Web Development

Learning Outcomes:

Students learn about the history of computer science and the first basic steps of HTML.

Topics covered:

History of Computer Science

HTML Basics

HTML Heading

Standard alignment:

2-IC-20, 3A-AP-18, 3A-AP-17, 2-AP-11, 2-DA-07

Learning Outcomes:

Students learn the different parts and pieces that make up a computer and how each part contributes to the whole. They learn to add color to their text in HTML.

Topics covered:

Computer Parts

Hardware v Software

Text Colors

Standard alignment:

2-CS-02, 2-CS-03, 3A-AP-18, 3A-AP-17, 2-AP-16, 2-AP-11, 2-DA-07, 3B-AP-22, 3B-AP-24

Learning Outcomes:

Students learn the basics of how the internet actually works and how to add fonts to their text in HTML.

Topics covered:

How the internet works

Fonts

Standard alignment:

2-NI-04, 2-AP-11, 2-AP-17, 2-AP-16, 2-DA-07, 3B-AP-22, 3B-AP-21, 3B-AP-19, 3B-AP-16, 3B-AP-14, 3B-AP-11, 3A-AP-18, 3A-AP-17, 3A-AP-16

Learning Outcomes:

Students examine more specifics of how different components work together to make the internet function as we know it. They add structure to their HTML files.

Topics covered:

How the Internet Works

HTML as a Language

HTML Structure

Standard alignment:

2-NI-04, 3B-NI-03, 3A-CS-03, 2-AP-11, 2-CS-02, 3A-AP-13, 3A-AP-16, 3A-AP-17, 3A-AP-18, 3A-AP-23, 3B-AP-14, 3B-AP-19, 3A-IC-24

Learning Outcomes:

Students discover basic troubleshooting strategies for some common troubles with technology. They add background colors and titles to their HTML file.

Topics covered:

Troubleshooting

Background Color

HTML Title

Standard alignment:

2-AP-17, 2-CS-03, 2-AP-11, 3A-AP-13, 3A-AP-16, 3A-AP-17, 3A-AP-18, 3A-AP-23, 3B-AP-14, 3B-AP-19, 3B-AP-22

Learning Outcomes:

Students practice using troubleshooting techniques to solve some examples of issues with technology. They add paragraphs, breaks, and dividers to their HTML file.

Topics covered:

Troubleshooting

Paragraphs

Breaks/Dividers

Standard alignment:

2-AP-11, 2-CS-03, 2-AP-17, 3A-AP-13, 3A-AP-16, 3A-AP-17, 3A-AP-18, 3B-AP-14, 3B-AP-19, 3B-AP-22

Learning Outcomes:

Students discover some strategies for debugging their code and fixing their own issues. They add ordered and unordered lists to their HTML file.

Topics covered:

Debugging Strategies

Ordered/Unordered Lists

Standard alignment:

2-AP-11, 2-CS-03, 3A-AP-13, 3A-AP-16, 3A-AP-17, 3A-AP-18, 3A-AP-23, 3B-AP-14, 3B-AP-19, 3B-AP-22, 3B-AP-24

Learning Outcomes:

Students explore different careers in Web Development and what kinds of schooling and preparation are needed. They add text align to their HTML file.

Topics covered:

Career Exploration

Text Align

Standard alignment:

2-IC-20, 2-AP-17, 2-AP-11, 3A-AP-13, 3A-AP-16, 3A-AP-17, 3A-AP-18, 3B-AP-11, 3B-AP-14, 3B-AP-22, 3B-AP-19

Learning Outcomes:

Students dive deeper into a career of their choice and learn more specifics about what it takes to go into that career field.

Topics covered:

Career Exploration

Links

Standard alignment:

2-AP-11, 2-AP-17, 2-IC-20, 3A-AP-13, 3A-AP-16, 3A-AP-17, 3A-AP-18, 3B-AP-11, 3B-AP-14, 3B-AP-19, 3B-AP-22

Learning Outcomes:

Students analyze what it means to be a good Digita Citizen and how to be respectful with technology. They add images to their HTML files.

Topics covered:

Digital Citizenship

Images

Standard alignment:

2-IC-20, 2-NI-05, 2-AP-17, 2-AP-11, 3A-AP-13, 3A-AP-16, 3A-AP-17, 3A-AP-18, 3B-AP-14, 3B-AP-19, 3B-AP-21, 3B-AP-22

Learning Outcomes:

Students explore some strategies to keep safe while using technology. They add buttons to their HTML files.

Topics covered:

Digital Safety

Buttons

Standard alignment:

2-AP-17, 3A-NI-05, 3A-AP-13, 3A-AP-16, 3A-AP-17, 3A-AP-18, 3B-AP-14, 3B-AP-21, 3B-AP-22, 3B-AP-19

Learning Outcomes:

Students examine some different programming languages and the advantages and disadvantages of each. They add background images to their HTML files.

Topics covered:

Programming Languages

Background Image

Standard alignment:

2-AP-13, 2-AP-17, 2-IC-20, 3A-AP-13, 3A-AP-16, 3A-AP-17, 3A-AP-18, 3B-AP-10, 3B-AP-14, 3B-AP-19, 3B-AP-21, 3B-AP-22

Learning Outcomes:

Students analyze what a digital footprint is and take a look at their own digital footprint so far. They discuss strategies to have a healthy footprint. They add videos to their HTML files.

Topics covered:

Digital Footprint

Videos

Standard alignment:

2-AP-17, 2-IC-20, 3A-IC-24, 3B-IC-25, 3B-IC-26, 3A-AP-13, 3A-AP-16, 3A-AP-17, 3A-AP-18, 3B-AP-14, 3B-AP-19, 3B-AP-21, 3B-AP-22

Learning Outcomes:

Students critically think about the accessibility of different programs and applications. They add image links to their HTML files.

Topics covered:

Digital Accessibility

Image Link

Standard alignment:

2-IC-21, 2-IC-20, 2-AP-17, 2-AP-13, 2-CS-01, 3A-AP-17, 3A-AP-21, 3A-IC-25, 3A-AP-13, 3A-AP-16, 3A-AP-18, 3B-AP-14, 3B-AP-19, 3B-AP-21

Learning Outcomes:

Students discuss how to have a healthy relationship with social media and technology in their personal life. They add marquees to their HTML file.

Topics covered:

Social Media

Marquees

Standard alignment:

2-AP-13, 2-AP-17, 2-IC-20, 3A-AP-13, 3A-AP-16, 3A-AP-17, 3A-AP-18, 3B-AP-14, 3B-AP-19, 3B-AP-21, 3B-AP-22, 3B-IC-25, 3B-IC-27, 3A-IC-24

Learning Outcomes:

Students form teams and create a plan to work together to accomplish given objectives in a programming project.

Topics covered:

Team Project

Standard alignment:

2-CS-01, 2-CS-02, 2-DA-07, 2-AP-11, 2-AP-13, 2-AP-15, 2-AP-16, 2-AP-17, 2-AP-18, 2-IC-22, 3A-DA-09, 3A-AP-13, 3A-AP-16, 3A-AP-17, 3A-AP-18, 3A-AP-23, 3B-AP-10, 3B-AP-11, 3B-AP-14, 3B-AP-19, 3B-AP-21, 3B-AP-22, 3B-AP-17, 3A-AP-22

Learning Outcomes:

Students practice giving and recieiving feedback with other teams on their programming projects.

Topics covered:

Team Project

Feedback

Standard alignment:

2-CS-01, 2-CS-02, 2-DA-07, 2-AP-11, 2-AP-13, 2-AP-15, 2-AP-16, 2-AP-17, 2-AP-18, 2-IC-22, 3A-DA-09, 3A-AP-13, 3A-AP-16, 3A-AP-17, 3A-AP-18, 3A-AP-19, 3A-AP-23, 3B-AP-10, 3B-AP-11, 3B-AP-14, 3B-AP-19, 3B-AP-21, 3B-AP-22, 3B-AP-17, 3A-AP-22

Learning Outcomes:

Teams present their projects and what they learned with the class.

Topics covered:

Team Project Presentations

Standard alignment:

2-CS-01, 2-CS-02, 2-DA-07, 2-AP-11, 2-AP-13, 2-AP-15, 2-AP-16, 2-AP-17, 2-AP-18, 2-IC-22, 2-AP-19, 3A-DA-09, 3A-AP-13, 3A-AP-16, 3A-AP-17, 3A-AP-18, 3A-AP-19, 3A-AP-22, 3A-AP-23, 3B-AP-10, 3B-AP-11, 3B-AP-14, 3B-AP-19, 3B-AP-21, 3B-AP-22

Learning Outcomes:

Students are introduced to the CSS language and the benefits of having an external style sheet. They create separate CSS files and connect them to their HTML files.

Topics covered:

Intro to CSS

External Style Sheet

Standard alignment:

3B-AP-22, 3B-AP-21, 3B-AP-19, 3B-AP-11, 3B-AP-10, 3A-AP-18, 3A-AP-17, 3A-AP-16, 3A-AP-13

Learning Outcomes:

Students add text shadowing and rounded corners to their CSS and HTML files.

Topics covered:

Text Shadow

Rounded Corners

Standard alignment:

3B-AP-22, 3B-AP-19, 3B-AP-14, 3B-AP-11, 3A-AP-18, 3A-AP-17, 3A-AP-16, 3A-AP-13, 2-AP-17

Learning Outcomes:

Students explore the need for data compression and the difference between lossy and lossless compression techniques. They add box shadows to their CSS and HTML files.

Topics covered:

Data Compression

Box Shadow

Standard alignment:

2-AP-11, 3A-AP-13, 3A-AP-16, 3A-AP-17, 3A-AP-18, 3B-AP-10, 3B-AP-11, 3B-AP-19, 3B-AP-21, 3B-AP-22

Learning Outcomes:

Students examine the challenges and advantages of modern data storage approaches. They add color gradient to their CSS and HTML files.

Topics covered:

Color Gradient

Storage

Standard alignment:

2-AP-11, 2-AP-13, 2-AP-17, 2-AP-16, 3A-AP-13, 3A-AP-16, 3A-AP-17, 3A-AP-18, 3B-AP-10, 3B-AP-11, 3B-AP-14, 3B-AP-19, 3B-AP-21, 3B-AP-22, 3B-AP-12

Learning Outcomes:

Students learn the importance of good code documentation and how to add comments in their HTML and CSS files.

Topics covered:

Documenting Code

Comments in HTML/CSS

Standard alignment:

2-AP-11, 2-AP-13, 2-AP-19, 3A-AP-16, 3A-AP-17, 3A-AP-18, 3B-AP-10, 3B-AP-11, 3B-AP-14, 3B-AP-19, 3B-AP-21, 3B-AP-22, 3A-AP-23

Learning Outcomes:

Students learn how to differentiate their tags by using class names. They also practice using the color picker in their CSS and HTML files.

Topics covered:

Classes

Color Picker

Standard alignment:

3B-AP-22, 3B-AP-21, 3B-AP-19, 3B-AP-14, 3B-AP-11, 3B-AP-10, 3A-AP-23, 3A-AP-18, 3A-AP-17, 3A-AP-16, 3A-AP-13, 3A-DA-09, 2-AP-16, 2-AP-11, 2-DA-07

Learning Outcomes:

Students practice gathering data and analyzing it for patterns. They add margins and padding to their CSS and HTML files.

Topics covered:

Data

Margins

Padding

Standard alignment:

2-DA-07, 2-AP-11, 2-AP-13, 2-AP-17, 3A-AP-13, 3A-AP-16, 3A-AP-17, 3A-AP-18, 3B-AP-10, 3B-AP-11, 3B-AP-14, 3B-AP-19, 3B-AP-21, 3B-AP-22

Learning Outcomes:

Students learn how to change appearance when the cursor hovers over an item by using pseudo selectors. They add opacity to their CSS and HTML files.

Topics covered:

Pseudo Selectors

Opacity

Standard alignment:

3B-AP-22, 3B-AP-21, 3B-AP-19, 3B-AP-14, 3B-AP-11, 3B-AP-10, 3A-AP-23, 3A-AP-18, 3A-AP-17, 3A-AP-16, 3A-AP-13, 2-AP-16, 2-AP-11, 2-DA-07

Learning Outcomes:

Students criticaly examine design choices and learn some strategies for effective web design. They further compartmentalize their code with the use of Div tags.

Topics covered:

Design Tips

Div Tags

Standard alignment:

2-AP-11, 2-AP-13, 2-AP-17, 3A-AP-13, 3A-AP-16, 3A-AP-17, 3A-AP-18, 3B-AP-10, 3B-AP-11, 3B-AP-14, 3B-AP-19, 3B-AP-21, 3B-AP-22

Learning Outcomes:

Students learn more advanced ways to design buttons and lists on their HTML files.

Topics covered:

Button Design

List Styles

Standard alignment:

3B-AP-21, 3B-AP-19, 3B-AP-11, 3B-AP-10, 3A-AP-23, 3A-AP-18, 3A-AP-17, 3A-AP-16, 3A-AP-13, 3A-DA-09, 2-AP-16, 2-AP-11, 2-DA-07

Learning Outcomes:

Students discover the need for market research and practice collecting data to better understand a population. They add icons to their CSS and HTML files.

Topics covered:

Market Research

CSS Icons

Standard alignment:

2-DA-08, 2-AP-15, 2-IC-22, 3A-DA-11, 3A-AP-17, 3A-AP-13, 3A-AP-16, 3A-AP-18, 3B-AP-10, 3B-AP-11, 3B-AP-14, 3B-AP-19, 3B-AP-21, 3B-AP-22

Learning Outcomes:

Students learn how to add borders and more advanced approaches to positioning items on their web pages.

Topics covered:

Borders

Positioning

Standard alignment:

3B-AP-22, 3B-AP-21, 3B-AP-19, 3B-AP-14, 3B-AP-11, 3B-AP-10, 3A-AP-23, 3A-AP-18, 3A-AP-17, 3A-AP-16, 3A-AP-13, 3A-DA-09, 2-AP-16, 2-AP-11, 2-DA-07

Learning Outcomes:

Students learn to make their web pages responsive to different screen sizes as they add media queries to their CSS and HTML code. They add styling to their background images.

Topics covered:

Media Queries

Background Image Styles

Standard alignment:

3B-AP-22, 3B-AP-21, 3B-AP-19, 3B-AP-14, 3B-AP-11, 3B-AP-10, 3A-AP-23, 3A-AP-18, 3A-AP-17, 3A-AP-16, 3A-AP-13, 3A-DA-09, 2-AP-16, 2-AP-11, 2-DA-07

Learning Outcomes:

Students are introduced to the cybersecurity concept of cryptography and practice encrypting messages. They are also introduced to Bootstrap and learn to connect to the Bootstrap library.

Topics covered:

Bootstrap

Cryptography

Standard alignment:

3B-NI-04, 3B-AP-18, 2-NI-06, 2-DA-07, 2-AP-11, 2-AP-13, 2-AP-17, 3A-AP-13, 3A-AP-16, 3A-AP-17, 3A-AP-18, 3B-AP-10, 3B-AP-11, 3B-AP-14, 3B-AP-19, 3B-AP-21, 3B-AP-22

Learning Outcomes:

Students explore other encryption techniques as they practice with the pig pen cipher. They practice using different Bootstrap classes in their CSS And HTML files.

Topics covered:

Cipher

Bootstrap Classes

Standard alignment:

2-NI-06, 2-DA-07, 2-AP-11, 2-AP-13, 2-AP-17, 3B-NI-04, 3A-AP-13, 3A-AP-16, 3A-AP-17, 3A-AP-18, 3A-AP-15, 3B-AP-10, 3B-AP-11, 3B-AP-14, 3B-AP-19, 3B-AP-21, 3B-AP-22

Learning Outcomes:

Students analyze different legal and ethical concerns that arise with advancing technologies in today's world. They learn to add Bootstrap Grids to their CSS and HTML files.

Topics covered:

Legal and Ethical Concerns

Bootstrap Grid

Standard alignment:

3A-AP-18, 2-AP-11, 2-AP-13, 2-AP-17, 2-IC-23, 3A-AP-13, 3A-AP-16, 3A-AP-17, 3B-AP-10, 3B-AP-11, 3B-AP-14, 3B-AP-19, 3B-AP-21, 3B-AP-22

Learning Outcomes:

Students get further practice using Bootstrap's 12 column grid. They also add Jumbotrons to their CSS and HTML files.

Topics covered:

12 Column Grid

Jumbotron

Standard alignment:

3B-AP-22, 3B-AP-21, 3B-AP-19, 3B-AP-14, 3B-AP-11, 3B-AP-10, 3A-AP-23, 3A-AP-18, 3A-AP-17, 3A-AP-16, 3A-AP-13, 3A-DA-09, 2-AP-16, 2-AP-11, 2-DA-07

Learning Outcomes:

Students examine how personal data can be collected and explore their own opinions on the prevalence of personal data online. They learn to add cards to their CSS and HTML files.

Topics covered:

Personal Data

Cards

Standard alignment:

2-IC-23, 3A-IC-29, 3A-IC-30, 2-AP-11, 2-AP-13, 2-AP-17, 3A-AP-13, 3A-AP-16, 3A-AP-17, 3A-AP-18, 3B-AP-10, 3B-AP-11, 3B-AP-14, 3B-AP-19, 3B-AP-21, 3B-AP-22

Learning Outcomes:

Students explore different kinds of threats that exist in technology and ways they can protect or prevent against them. They learn to add carousels to their HTML and CSS files.

Topics covered:

Types of Threat

Carousels

Standard alignment:

3A-NI-05, 3A-NI-06, 3A-NI-07, 3A-IC-24, 3A-IC-30, 2-NI-05, 2-AP-11, 2-AP-13, 2-AP-17, 2-IC-20, 2-IC-23, 3A-AP-13, 3A-AP-16, 3A-AP-17, 3A-AP-18, 3B-AP-10, 3B-AP-14, 3B-AP-19, 3B-AP-21, 3B-AP-22

Learning Outcomes:

Students learn more options that the Bootstrap library has to offer as they add a nav bar and dropdown to their CSS and HTML files.

Topics covered:

Bootstrap Nav Bar

Bootstrap Dropdown

Standard alignment:

3B-AP-22, 3B-AP-21, 3B-AP-19, 3B-AP-14, 3B-AP-11, 3B-AP-10, 3A-AP-23, 3A-AP-18, 3A-AP-17, 3A-AP-16, 3A-AP-13, 3A-DA-09, 2-AP-16, 2-AP-11, 2-DA-07

Learning Outcomes:

Students examine the Digital Divide and how different people have varying access to technology. They learn to add animations to their CSS and HTML files.

Topics covered:

Digital Equity

Animations

Standard alignment:

2-IC-21, 2-IC-20, 2-AP-17, 2-CS-01, 2-AP-11, 2-AP-13, 3A-AP-13, 3A-AP-16, 3A-AP-17, 3A-AP-18, 3B-AP-10, 3B-AP-11, 3B-AP-14, 3B-AP-19, 3B-AP-21, 3B-AP-22, 3A-AP-21, 3A-IC-25, 3B-IC-26, 3B-IC-27

Learning Outcomes:

Students learn to add tranformation and transitions to their HTML and CSS files.

Topics covered:

Transform

Transition

Standard alignment:

3B-AP-22, 3B-AP-21, 3B-AP-19, 3B-AP-14, 3B-AP-11, 3B-AP-10, 3A-AP-23, 3A-AP-18, 3A-AP-17, 3A-AP-16, 3A-AP-13, 3A-DA-09, 2-AP-16, 2-AP-11, 2-DA-07

Learning Outcomes:

Students learn some strategies to break down big projects into smaller, more manageable pieces. They are introduced to tables in HTML.

Topics covered:

Tables

Break Down Big Probems

Standard alignment:

2-AP-11, 2-AP-13, 2-AP-17, 3A-AP-13, 3A-AP-16, 3A-AP-17, 3A-AP-18, 3B-AP-10, 3B-AP-11, 3B-AP-14, 3B-AP-19, 3B-AP-21

Learning Outcomes:

Students practice creative probem solving through a team activity as they try to creat shapes with a rope while blindfolded. They learn more details about creating tables in HTML.

Topics covered:

Tables

Problem Solving

Standard alignment:

2-AP-11, 2-AP-13, 2-AP-17, 3A-AP-13, 3A-AP-16, 3A-AP-17, 3A-AP-18, 3B-AP-10, 3B-AP-11, 3B-AP-14, 3B-AP-19, 3B-AP-21, 3B-AP-22

Learning Outcomes:

Students practice breaking down a big project into smaller pieces by planning out a party. They learn how to add styling to their tables in CSS And HTML.

Topics covered:

Tables

Break Down Big Probems

Standard alignment:

2-AP-11, 2-AP-13, 2-AP-17, 3A-AP-17

Learning Outcomes:

Students further practice creative problem solving as they algorithmically work through a pathway puzzle. They are introduced to creating forms on their CSS and HTML files.

Topics covered:

Problem Solving

Forms

Standard alignment:

2-AP-11, 2-AP-13, 2-AP-17, 3A-AP-13, 3A-AP-16, 3A-AP-17, 3A-AP-18, 3B-AP-10, 3B-AP-11, 3B-AP-14, 3B-AP-19, 3B-AP-21, 3B-AP-22

Learning Outcomes:

Students practice communicating with peers through a blindfolded unplugged activity; They learn to create a text input on their forms in HTML and CSS.

Topics covered:

Communication

Text Input

Standard alignment:

2-AP-11, 2-AP-13, 2-AP-17, 3A-AP-13, 3A-AP-16, 3A-AP-17, 3A-AP-18, 3B-AP-10, 3B-AP-11, 3B-AP-14, 3B-AP-19, 3B-AP-21, 3B-AP-22

Learning Outcomes:

Students discuss how there are often many different ways to create a piece of code that works. Many approaches can be correct. They learn to add radio options for their HTML forms.

Topics covered:

Radio Input

Standard alignment:

2-AP-11, 3A-AP-13, 3A-AP-16, 3A-AP-17, 3A-AP-18, 3B-AP-10, 3B-AP-11, 3B-AP-14, 3B-AP-19, 3B-AP-21, 3B-AP-22

Learning Outcomes:

Students examine the presence of AI and the pros and cons of pursuing further innovations in machine learning. They learn to create a submission for inputs on their HTML and CSS forms

Topics covered:

Artificial Intelligence

Submit Input

Standard alignment:

2-AP-11, 2-AP-12, 2-AP-17, 2-IC-20, 3A-AP-13, 3A-AP-16, 3A-AP-17, 3A-AP-18, 3B-AP-10, 3B-AP-11, 3B-AP-14, 3B-AP-19, 3B-AP-21, 3B-AP-22

Learning Outcomes:

Students have an opportunity to reflect on their progress over the course of the class. They examine the presence of computer science in their future and discuss ways that knowledge of computers will benefit them.

Topics covered:

Why Computer Science Matters

Standard alignment:

2-IC-20