Unit2
Ch. 1
1
2
3
4
5
6
7
8
9
Ch. 2
10
11
12
13
14

Unit 2 - Web Development

In the Web Development unit, students are empowered to create and share the content on their own web pages. They begin by thinking about the role of the web, and how it can be used as a medium for creative expression. As students develop their pages and begin to see themselves as programmers, they are encouraged think critically about the impact of sharing information online and how to be more critical content consumers. They are also introduced to problem solving as it relates to programming, as they learn valuable skills such as debugging, commenting, and structure of language. At the conclusion of the unit, students compile their work to create a personal website they can publish and share.

Chapter 1: Web Content and HTML

Big Questions

  • Why do people create websites?
  • How can text communicate content and structure on a web page?
  • How can I incorporate content I find online into my own webpage?
  • What strategies can I use when coding to find and fix issues?

Week 1

Lesson 1: Exploring Websites

Unplugged

  • Warm Up (10 minutes)
  • Activity (45 minutes)
  • Wrap Up (5 min)

This lesson covers the purposes that a website might serve, both for the users and the creators. The class explores a handful of the most-used websites in the United States and discusses how each of those sites is useful for users and how it might also serve its creators.

Teacher Links: Exemplar Student Links: Activity Guide

Lesson 2: Websites for Expression

Unplugged

  • Warm Up (5 mins)
  • Activity (40 mins)
  • Wrap Up (5 mins)

This lesson introduces websites as a means of personal expression. The class first discusses different ways that people express and share their interests and ideas, then looks at a few exemplar websites made by students from a previous course. Finally everyone brainstorms and shares a list of topics and interests to include, creating a resource for developing a personal website in the rest of the unit.

Teacher Links: Exemplar Student Links: Activity Guide

Lesson 3: Intro to HTML

Web Lab

  • Warm Up (10 mins)
  • Activity (30 minutes)
  • Wrap Up (5 minutes)

This lesson introduces 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. The class looks at an HTML page in Web Lab and discusses how HTML tags help solve this problem, then uses HTML to write the first web pages of the unit.

Teacher Links: Website

Week 2

Lesson 4: Headings

Web Lab

  • Warm Up (5 minutes)
  • Activity (45 minutes)
  • Wrap Up (5 minutes)

This lesson continues the introduction to HTML tags, this time with headers. The class practices using header tags to create page and section titles and learns how the different header elements are displayed by default. Next, the class plans how to organize their content on the personal web pages that will be built across the unit and begins the first page of the project.

Lesson 5: Digital Footprint

Unplugged

  • Warm Up (10 min)
  • Activity (30-40 min)
  • Wrap Up (5 minutes)

This lesson takes a step back from creating the personal website to talk about personal information people choose to share digitally. The class begins by discussing what types of information are good to share with other people, then looks at several sample social media pages to see what types of personal information could be shared intentionally or unintentionally. Finally, the class comes up with a set of guidelines to follow when putting information online.

Teacher Links: Exemplar | Exemplar Student Links: Activity Guide | Activity Guide

Week 3

Lesson 6: Lists

Web Lab

  • Warm Up (10 minutes)
  • Activity (40 minutes)
  • Wrap Up (10 minutes)

This lesson introduces ordered and unordered lists and the associated <ul>, <ol>, and <li> HTML tags. The class practices using the tags, then goes back to the personal web page project to add a new HTML page that includes the new tags.

Lesson 7: Intellectual Property and Images

Unplugged | Web Lab

  • Warm Up (10 min)
  • Activity 1 (20 min)
  • Activity 2 (20 min)
  • Wrap Up (5 min)

This lesson covers how to use media such as images, video, or music created by others a website while respecting the rights of the creator of that media. After first studying Creative Commons licensing, the class learns how to add images to web pages, and how to give proper attribution when doing so.

Teacher Links: Exemplar Student Links: Video | Activity Guide

Lesson 8: Clean Code and Debugging

Web Lab

  • Warm Up (10 minutes)
  • Activity (35 minutes)
  • Wrap Up (10 minutes)

This lesson covers common issues that arise when designing web pages in HTML. The class will correct errors in a sequence of increasingly complex web pages found on Code Studio and learn the importance of comments, whitespace, and indentation as tools for making web pages easier to read.

Week 4

Lesson 9: Project - Multi-Page Websites

Web Lab | Project

  • Warm Up (15 minutes)
  • Activity
  • Wrap Up (10 minutes)

This lesson covers hyperlinks, which allow web developers to connect pages together into one website. The class will link together all the previous pages into one project, and create navigation bars for each page before publishing the entire site to the Web.

Teacher Links: Exemplar Student Links: Project Guide | Peer Review | Rubric

Chapter Commentary

Students use computing as a form of self expression as they design and develop basic web pages. 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. They also explore the privacy and intellectual property implications of publishing their work online.

Chapter 2: Styling and CSS

Big Questions

  • How do I modify the appearance and style of my web pages?
  • How do I safely and appropriately make use of the content published on the Internet?

Week 5

Lesson 10: Styling Text with CSS

Web Lab

  • Warm Up (5 minutes)
  • Activity (40 minutes)
  • Wrap Up (10 minutes)

This lesson introduces CSS as a way to style elements on the page. The class learns the basic syntax for CSS rule-sets and then explores properties that impact HTML text elements. Finally, everyone applies text styles to their personal websites.

Lesson 11: Styling Elements with CSS

Web Lab

  • Warm Up (5 minutes)
  • Activity (40 minutes)
  • Wrap Up (5 minutes)

This lesson continues the introduction to CSS style properties, this time focusing more on non-text elements. The class begins by investigating and modifying the new CSS styles on a Desserts of the World page. Afterwards, everyone applies this new knowledge to their personal websites.

Lesson 12: Sources and Search Engines

  • Warm Up (10 minutes)
  • Activity (30 minutes)
  • Wrap Up (5 minutes)

After first completing a web search scavenger hunt, the class learns about the inner workings of search engines and has an opportunity to flex their analytical skills in a search for strange and unlikely animals.

Teacher Links: Key Student Links: Video | Activity Guide | Activity Guide

Lesson 13: RGB Colors and Classes

Web Lab

  • Warm Up (5 minutes)
  • Activity (40 minutes)
  • Wrap Up (5 minutes)

This lesson covers classes and custom colors. The class first learns how to specify custom colors using RGB (red, green, blue) values, then applies these colors to a new Four Seasons web page, which uses CSS classes. Using classes, the class adds more styles to the Four Seasons web page, then use them to style their personal websites.

Teacher Links: Key Student Links: Activity Guide

Week 6

Lesson 14: Project - Personal Portfolio Website

Web Lab | Project

  • Day 1
  • Day 2
  • Day 3

In the last few days of the unit, the class finalizes their personal websites, working with peers to get feedback, review the rubric, and put the finishing touches on the site. To cap off the unit, everyone shares their projects and how they were developed.

Teacher Links: Peer Review Exemplar | Project Guide Exemplar Student Links: Peer Review | Project Guide | Rubric

Chapter Commentary

After covering the basics of HTML, students dive into improving their websites with CSS. They learn to use colors, fonts and margins to create a unique style of their own design. At the end of the chapter students publish a personal portfolio website that demonstrates use of HTML for content and CSS for a personalized.