Accessing locked lessons and answer keys
This course provides extra resources which are only available to verified teachers.

Web Development ('24-'25)

In Web Development, students are put in the shoes of a web developer and empowered to design and create a web page to meet a user’s needs. As students develop the pages and begin to see themselves as web developers and designers, they are encouraged to think critically about the impact of sharing information online and how to be more critical consumers of content. They are also introduced to problem-solving related to programming while learning valuable skills such as debugging, using resources, and teamwork. At the conclusion of chapter one, students will design and create a web page for a user. After chapter two, students will have worked with a team to create a multi-page website they can publish and share.

Description: Students work as web developers to design and develop web pages to meet users' needs. Focusing on the tags, keywords, and syntax used to communicate instructions to the computer, students use HTML to structure the content of a web page and CSS to design and organize the content. They also explore the privacy and intellectual property implications of publishing web pages online.

Goals:

  • Create digital artifacts that use multiple computer languages to control the structure and style of their content.
  • Create a web page to meet a user's needs.
  • Use different programming languages to solve different problems.
  • Examine their role and responsibilities as creators and consumers of digital media.

Big Questions:

  • How do web developers create web pages for users?
  • How can text communicate a web page's content, structure, and style?
  • How do I safely and appropriately create content for the Internet?
  • What strategies can I use when coding to find and fix issues?

Description: Students expand their ideas of websites beyond personal expression and begin to see them as a way to solve problems. Students build on their collaborative skills and work in teams to create multi-page websites that solve a problem.

Goals:

  • Create digital artifacts that use multiple computer languages to control the structure and style of their content.
  • Create a website that solves a problem.
  • Use different programming languages to solve different problems.
  • Examine their role and responsibilities as both creators and consumers of digital media.

Big Questions:

  • How can websites be used to address problems in the world?
  • What strategies can teams use to work better together?
  • How do I know what information can be trusted online?

Finished Teaching This Unit?

Answer this short survey to let the Code.org curriculum team know how the unit went.

Make all lessons in this Unit visible or hidden for your students.

Chapter 1: Creating Webpages
Lesson 1: Exploring Web Pages

Question of the Day: How can we choose websites based on the needs of a user?

To kick off a unit devoted to group problem solving and developing websites for other users, students begin by investigating the design of different websites. Students look at a variety of websites and attempt to match each design with a potential user. Then students choose a user and attempt to prototype a website design for them on paper or in a digital template. To conclude the activity, students consider what it means to be a web designer and create resources for other users.

Lesson 2: Intro to HTML

This lesson introduces many new concepts and tools to students: they are introduced to HTML, the Web Lab tool, and how to navigate lesson resources on Code.org in general. In this lesson, students are introduced to HTML as a solution to the problem of how to communicate both the content and structure of a website to a computer. The lesson begins with a brief unplugged activity demonstrating the challenges of effectively communicating the structure of a web page. Students then look at an exemplar HTML page in Web Lab and discuss with their classmates how HTML tags help solve this problem. Students then write their first HTML. A wrap-up discussion helps to solidify the understanding of content vs. structure that was developed throughout the lesson.

Question of the Day: How can we tell the computer both what to put on the web page, and how to organize it?

Lesson 3: Headings and Lists

This lesson introduces the core practices of pair programming and debugging. In this lesson, students continue to use HTML to structure text on web pages, this time in pairs, with a focus on working together and debugging problems with their sites. Students learn how to use the different heading and list elements and practice using them to give their web pages more structure.

Question of the Day: How can we work together to fix problems with our websites?

Lesson 4: Digital Footprint

Question of the Day: How can you make sure that your private information stays private?

In this lesson, students pause their own on developing web pages so they can develop an understanding of how personal information is surfaced on the internet, sometimes intentionally and sometimes unintentionally. Students look at several fictitious social media pages to see what they can learn about different people purely from publicly available information. They then reflect on what guidelines are appropriate for posting their own information online, especially as they prepare to create more personalized websites.

Lesson 5: Mini-Project: HTML Web Page

In this mini-project, students use what they have learned to create a web page for a user. Students begin their project by using the Problem Solving Process to help them design a web page for a user. As they determine what content to include on the web page for their user, they will identify which tags they will use to implement their design. Students then build their user’s web page in Web Lab. Optionally, after engaging in a formal feedback process, they may change their web pages based on feedback before reflecting on their process. The lesson also includes an optional review of the HTML students have learned ‌before building the web page.

Question of the Day: How can I use HTML to design and build a web page for a user?

Lesson 6: Styling Text with CSS

This lesson introduces CSS as a way to style elements on the page. Students learn the basic syntax for CSS rule-sets and then explore properties that impact HTML text elements. They work on an HTML page about Guinness World Record holders, adding their own style to the provided page. While only a few CSS properties are introduced in the core lesson, students are encouraged to use the optional activities at the end of the lesson to explore more ways that they can express themselves using CSS.

Question of the Day: How can we change the style of text on a web page?

Lesson 7: Intellectual Property

Until this point, the only content that students have used on their web pages is their own, but in the next lesson, they will be adding images to their sites. Before they do so, they need to understand the rules governing how to legally use content they find on the web. Starting with a discussion of their personal opinions on how others should be allowed to use their work, the class explores the purpose and role of copyright for both creators and users of creative content. They then move on to an activity exploring the various Creative Commons licenses as a solution to the difficulty in dealing with copyright.

Question of the Day: What kind of rules protect everyone's rights when we use each other's content?

This lesson contains no levels.
Lesson 8: Using Images

This lesson introduces images, which are different from earlier tags in that they are 'self-closing' and include attributes. Students should understand that these tags do not surround content in the same way as other tags. Students start the class by considering the ethical implications of using images on their websites, specifically in terms of intellectual property. They then learn how to add images to their web pages using the <img> tag and how to cite the image sources appropriately.

Question of the Day: How can we add images on our websites, while making sure we respect everyone's rights?

Lesson 9: Styling Elements with CSS

This lesson continues the introduction to CSS style properties, this time focusing more on non-text elements. Students begin this lesson by looking at a website about Desserts of the World. They investigate and modify the new CSS styles on this website, adding their own styles to the page. After working on the Desserts page, students apply their knowledge of new CSS properties to their personal websites.

Question of the Day: How can we style the images and layouts of our pages?

Lesson 10: Mini-Project: Adding Style to a Web Page

In this mini-project, students use what they have learned to style a web page for a user. Students begin their project using the Problem Solving Process to help them determine how they will style a web page for a user. Students then style their users' web pages in Web Lab. Optionally, after engaging in a formal feedback process, they may change their web pages based on feedback before reflecting on their process. The lesson also includes an optional review of the HTML and CSS students learned ‌before styling the web page.

Question of the Day: How can I use CSS to style a web page for a user?

Lesson 11: CSS Classes

Up until this point, the only styling students have been able to do is styling by the element, which means that every element of a particular kind has the same style. This lesson expands on the CSS that students have already learned by introducing classes, which allow web developers to treat groups of elements they want to be styled differently than other elements of the same type. Students first investigate and modify classes on various pages, then create their own classes and use them to better control the appearance of their pages. They then reflect on how they could use this skill to improve their team websites.

Question of the Day: How can we create different styles for the same type of element?

Note: Single elements can also be selected by id, but this type of selection is possible with a class applied only to that single element. Because id selection does not add any extra functionality, it is not taught in this course.

Lesson 12: Organizing Content with Flexbox

This lesson introduces students to two new web development tools: div tags and Flexbox styling. This lesson introduces students to div tags to organize their HTML code into sections. They then learn about Flexbox and how it can be used with their div containers to style and position items. Students practice using Flexbox properties to control the layout of web pages.

Question of the Day: What are div tags and Flexbox and why are they important in web design?

Lesson 13: Flexbox Children for More Control

This lesson introduces students to advanced Flexbox child properties including order, align-self, flex-grow, and flex-shrink through an interactive warm-up and the various level exercises. They’ll deepen their understanding of how these properties affect web page layouts and conclude with a creative group drawing game to reinforce their learning.

Question of the Day: How do Flexbox child properties affect the layout and organization of elements within a webpage?

Lesson 14: Chapter 1 Project

In this chapter project, students use what they have learned to style and organize a web page for a user. Students begin their project by using the Problem Solving Process to help them determine how they will organize the content of a user’s web page. Students then use CSS classes and flexbox to organize their user’s web page in Web Lab. Optionally, after engaging in a formal feedback process, they may change their web pages based on feedback before reflecting on their process.

Question of the Day: How can I use CSS classes and Flexbox to organize webpage content for a user?

Chapter 2: Multi-page Websites
Lesson 15: Team Problem Solving

This lesson explicitly addresses the challenges students may find working in a group and supports them in crafting a plan to overcome these challenges. Students work together to set group norms and brainstorm what features they would like their websites to have. The class starts by thinking of some popular teams in different contexts, then reflects on what makes teams successful. They then get into their own teams and make a plan for how they will interact and reach success in their own projects. Afterward, the teams begin to brainstorm ideas for their website project.

Question of the Day: How can we work together to make a great team?

This lesson contains no levels.
Lesson 16: Sources and Research

This lesson encourages students to think more about their responsibilities as consumers of information and how to find relevant and trustworthy information online. After viewing and discussing a video about how search engines work, students will search for information relevant to their site. They'll need to analyze the sites they find for credibility to decide which are appropriate to use on their own website. By the end of this lesson, students should have developed strategies for determining which websites are more trustworthy and tie these strategies back to their own role as content producers by looking for ways to make their own sites appear more trustworthy.

Question of the Day: How do we find relevant and trustworthy information on the Internet?

This lesson contains no levels.
Lesson 17: Linking Pages

This lesson will give students practice in using links and introduce them to good navigation practices for their sites. Students begin by looking online for the first web page and discussing how its use of links was what started the web. They then transition to Web Lab where they learn how to make their own links, as well as good conventions that make it easier for users to navigate on a page. Finally, they reflect on their group project and what their personal goals are for the final stretch.

Question of the Day: How can we combine several different web pages into one website?

Lesson 18: CSS Pseudo-classes

This lesson introduces students to the dynamic world of CSS pseudo-classes. Students will learn about their role in enhancing web page interactivity and style. They will explore, practice, and apply various pseudo-classes like link, visited, hover, and active, understanding how these selectors can transform the user experience on websites.

Question of the Day: What is a CSS pseudo-class, and how does it change the way an element looks or behaves on a web page?

Lesson 19: Planning a Multi-Page Site

Students work in teams to plan out their websites and create a sketch of each page. They then download the media that they will need for their sites. At the end of the activity, they decide how the work will be distributed among team members and report whether the entire group agreed to the plan.

Question of the Day: How do we plan a web page as a group?

Lesson 20: Project - Website for a Purpose

Teams have spent a lot of time throughout the chapter planning their websites. In this lesson, they are finally able to code their pages. Using the project guide, the team works together and individually to code all of the pages, then puts all of the work together into a single site.

Question of the Day: What skills and practices will help us work together to make a great website?

Lesson 21: Peer Review and Final Touches

This lesson focuses on the value of peer feedback. Students first reflect on what they are proud of, and what they would like feedback on. Teams then work with peers to get that feedback through a structured process that includes the project rubric criteria. Afterward, students decide how they would like to respond to the feedback and put the finishing touches on their sites. After a final review of the rubric, they reflect on their process. To cap off the unit, they will share their projects and also an overview of the process they took to get to that final design.

Question of the Day: How can we use feedback to make our websites better?*

Post-Project Test
1.
Level TypeLevel Status
Not startedIn progressKeep workingNeeds review
Completed
Assessments / Surveys
Concept
Concept: Not started
Concept: In progress
N/AN/A
Concept: Completed (perfect)
N/A
Activity
Activity: Not started
Activity: In progress
Activity: Keep working
Activity: Needs review
Activity: Completed (perfect)
Activity: Submitted
Level TypeLevel Details
Concept
Text
Video
Map
Activity
Unplugged
Lesson Extras
Online
Assessment
Question
Choice level