Unit 2 - The Internet - Web Development

The Internet has become the primary source of information for most students, but few are critical consumers of that information. Understanding how that information ends up online and who controls it will make students better consumers of information.

Students will find empowerment through the realization that they too can take part in this creation and dissemination of information by creating their own web pages. Students will take a more critical look at the web pages that are created by others to look for what makes a strong website and then use the problem solving process to implement parts of those designs.

Students spend most of the unit building up a personal portfolio website which can be used later in the course to show off their work! Each step builds on the previous so is important that students complete each step. As a guide below are the lessons and the activities students do in each connected to the project:

  • Lesson 2 - Design your Home page on paper
  • Lesson 4 - Start your Hobbies and Recipe pages
  • Lesson 5 - Start your About Me page
  • Lesson 6 - Fix bugs in your website
  • Lesson 7 - Add style to your About Me page
  • Lesson 8 - Add more styling to your About Me page
  • Lesson 9 - Create your home page on the computer AND Bring together your Hobbies, Recipe, About Me and Home pages into one website
  • Lesson 10 - Add special styling to website using classes
  • Lesson 11 - Receive feedback from peers to help improve your website
  • Lesson 13 - Review your website and publish it for the first time!
  • Lesson 14 - Optimize your website for search engines
  • Lesson 15 - Add a Cause page and make sure to give credit to any work you used that is not your own
  • Lesson 16 - Finalize your website!

Chapter 1: Web Content and HTML

Big Questions

  • How can text communicate content and structure on a web page?
  • Why do people create websites?
  • What strategies can I use when coding to find and fix bugs?

Week 1

Lesson 1: Quality Websites

Every website has a purpose, a reason someone created it and others use it. In this lesson, students will identify the purpose of a website and the key features of a website that can help it achieve its purpose. Students will break up into pairs to analyze a set of websites with a common purpose. Students will decide if the websites achieve their intended purpose and give reasons for why. Using the reasons why, the class will have come up with a list of features that influence if a website meets its purpose.

Teacher Links: Website | Website Student Links: Activity Guide | Project Guide

Lesson 2: Website Design

In this lesson students will design a sketch of a first draft of a personal home page. Creating a sketch reinforces the problem solving process. Students will first define what is included in a personal home page is. Then students will begin to prepare for creating their own page by sketching out a home page.

Student Links: Project Guide

Lesson 3: Describing Web Pages


Students will invent their own language that attempts to describe the structure and content of simple web pages. Through this process, they explore the difficulties of creating a language that describes both of these features at the level of specificity required for a computer to understand. Students will come up with many different ideas of languages, leading to a discussion about why everyone who builds a web page needs to use the same set of rules.

Student Links: Activity Guide

Lesson 4: Text on the Web

Web Lab

Students will investigate the common language used to communicate content with browsers: HTML. They will explore basic HTML properties by using Web Lab to work with header and list elements. They will create two personal web pages: a Hobbies page and a Recipe page.

Student Links: Project Guide | Rubric

Week 2

Lesson 5: Images in HTML

Students are introduced to some of the general tags all HTML documents should contain. Once students have added those to their Hobbies and Recipes page. Students will work through levels where they add images to a pre-built site. Then they will make a new About Me page for their portfolio that includes three images that show some of their preferences.

Teacher Links: Answer Key Student Links: Project Guide | Rubric

Lesson 6: Clean Code and Debugging

Web Lab

In this lesson students will common issues that arise when designing web pages in HTML. Students will correct errors in a sequence of increasingly complex web pages found on Code Studio. In the process they will learn the importance of comments, whitespace, and indentation as tools for making web pages easier to read. At the end of the lesson students create a list of strategies for debugging web pages and ensuring they are easy to read and maintain.

Student Links: Project Guide

Chapter Commentary

In this chapter students learn how HTML is used to create the structure of content on a web page. Students learn how tags, keywords, and syntax are used to communicate instructions to a computer generating a web page. Students will program basic web pages using HTML. In addition students will practice debugging programs to develop the practices of iterating to improve a project and perseverance when tracking down bugs.

Chapter 2: Styling and CSS

Big Questions

  • How do a I create style on web pages?
  • How can I pull together many web pages into one website?

Lesson 7: Styling Text Elements with CSS

Web Lab

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 a HTML page about Guinness World Record holders, adding their own style to the provided page. In the last level, students apply what they have learned about styles for text elements to their About Me page.

Student Links: Project Guide

Lesson 8: Styling Elements with CSS

Web Lab

This lesson continues to introduce 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 do more styling of their About Me page.

Student Links: Project Guide

Week 3

Lesson 9: Multi-Page Websites

Web Lab

After learning about how to put many files into one project and link them together, students finally embark on creating their personal website. In this lesson, they pull together all the previous pages they have created into one project, create a home page, and add navigation between the pages.

Student Links: Project Guide | Rubric

Lesson 10: RGB Colors and Classes

In this lesson, students first learn how to specify custom colors using their RGB (red, green, blue) values. They then apply these colors to a new Four Seasons web page, which uses CSS classes. CSS classes allow web developers great groups of elements they want styled differently than other elements of the same type. Using classes, students add more styles to the Four Seasons web page, then use them to style their personal websites.

Teacher Links: Slides Student Links: Project Guide | Activity Guide | Rubric | Activity Guide

Lesson 11: Peer Review: Personal Portfolio Website

Students have been continuously working on the same project for many weeks. In this lesson students take a step back from implementing their own website and look at peers websites. Through peer review students will get to share feedback on each others sites as well as hopefully get some new ideas for their own website.

Student Links: Activity Guide | Activity Guide | Project Guide

Chapter Commentary

After gaining the basics of HTML in Chapter 1, students dive into styling their websites with CSS in this chapter. At the end of the chapter students will have produced a simple multi-page personal website that will incorporate locally stored images and internal links (e.g. from the main page to individual smaller ones) but will not yet link to other websites and online content.

Chapter 3: Publishing Websites and Digital Citizenship

Big Questions

  • Where are all the websites I use stored and how am I able to access them?
  • How can I incorporate content I find online into my own webpage?
  • How do I safely and appropriately make use of the content published on the Internet?

Lesson 12: Digital Footprint

As students have recently spent some time thinking about the actual content that will go into their personal website, this lesson takes a step back from the unit-long project (publication of a personal website) to help students articulate what personal information they choose to share digitally and to whom. It also reinforces the notion that much of the information that they choose to share digitally falls largely out of their control the moment it is released.

Student Links: Activity Guide | Activity Guide

Week 4

Lesson 13: Website Review and Publish

Web Lab

After reflecting on their experience exploring digital footprints, students brainstorm a list of Personally Identifiable Information (PII) that should not be included on their websites. Once they have added the list to their Web Development Practices - Project Guide, each student will use the everything in their practices packet to review their own site to make sure it meets those standards before publishing to the world for the first time!

Teacher Links: Website Student Links: Project Guide

Lesson 14: Sources and Search Engines

This lesson gives students a deeper understanding of how search engines work by having them take some time to design their own algorithms for determining the relevance and trustworthiness of a website. A video about how search works will help students see how some of the real world algorithms for searching work. Motivated by the desire to have their website found, students will update their websites to make them easier to find in searching.

Teacher Links: Teacher Guide Student Links: Activity Guide | Activity Guide | Project Guide

Lesson 15: Intellectual Property

Starting with an exploration of the song “Happy Birthday”, and its history of copyright protection despite being a common American cultural staple, the class will explore the purpose and role of copyright for both creators and users of creative content. After a brief discussion about the purpose of copyright, we move on to an activity exploring the various Creative Commons licences as a solution to the difficulty in dealing with copywrite.

Teacher Links: Website Student Links: Video | Video | Activity Guide | Rubric

Week 5

Lesson 16: Project: Personal Portfolio Website

Web Lab

Students have spent a lot of time throughout the unit working on their Personal Website. In the final couple of days students finalize their websites. They work with peers to get feedback, put the finishing touches on the websites, review the rubric and reflect on their process. To cap off the unit, they will share their projects and also a overview of the process they took to get to that final design.

Student Links: Peer Review | Planning Guide | Project Guide | Rubric | Project Guide

Chapter Commentary

In this chapter students learn how to integrate their websites with the vast network of websites and content available on the world wide web. Along the way they will learn to properly cite sources of content found online and will consider other questions of privacy, security, and ownership arising from content being placed online. Throughout the unit students continue to develop skills with HTML and CSS which they will use to incrementally improve their website, culminating in the completion of their personal portfolio which will be used to showcase their work for the remainder of the class.