Unit2

Unit 2 - Web Development

In this 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

  • How can text communicate content and structure on a web page?
  • Why do people create websites?
  • 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

Every website has a purpose, a reason someone created it and others use it. In this lesson, students will start to consider the purposes a website might serve, both for the users and the creators. Students will explore a handful of the most-used websites in the United States and try to figure out how each of those sites is useful for users and how they might also serve their creators.

Student Links: Activity Guide

Lesson 2: Websites for Expression

Unplugged

In this lesson students investigate ways to use websites as a means of personal expression and develop a list of topics and interests that they would want to include on a personal website. To begin the lesson students brainstorm different ways that people express and share their interests and ideas. Students then look at a few exemplar websites made by students from a previous CS Discoveries course to identify ways they are expressing their ideas. Finally students brainstorm and share a list of topics and interests they might want to include on a personal website which they can reference for ideas as they progress through the unit.

Student Links: Activity Guide

Lesson 3: Intro to HTML

Web Lab

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.

Teacher Links:

Week 2

Lesson 4: Headers

Web Lab

In this lesson, students continue to use HTML to structure text on web pages, this time with headers. Students learn how the different header elements are displayed by default and practice using them to create page and section titles. Students then start to decide how they will organize their content on their own personal web pages. In the last level, students begin the project that they will continue to work on throughout the unit.

Lesson 5: Digital Footprint

Unplugged

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 3

Lesson 6: Lists

Web Lab

Students are introduced to ordered and unordered lists in HTML and work through a few levels in which they use the <ul> <ol> and <li> tags. They then go back to their project, where they add a new HTML page. Inside the new page, they write the HTML to display a recipe, top ten list, or any other content that uses the new tags that they have learned.

Lesson 7: Intellectual Property and Images

Unplugged | Web Lab

If you want to use media such as images, video, or music created by others into your own website, you'll first need to understand and respect the rights of the creator of that media. After first learning about Creative Commons licensing, you'll learn about how to add images to your web pages, and how to give proper attribution when you do it.

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

Lesson 8: 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.

Week 4

Lesson 9: Project - Multi-Page Websites

Web Lab | Project

After learning about how to link web pages to one another, students are finally able to publish the website they have been working on. In this lesson, they link together all the previous pages they have created into one project, create a new page, and add navigation between the pages before publishing the entire site to the Web.

Student Links: Project Guide | Peer Review | Rubric

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 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

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.

Lesson 11: 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.

Lesson 12: Sources and Search Engines

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

Student Links: Activity Guide | Activity Guide

Lesson 13: RGB Colors and Classes

Web Lab

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 to treat 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.

Student Links: Activity Guide

Week 6

Lesson 14: Project - Personal Portfolio Website

Web Lab | Project

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 | Project Guide | Rubric

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 publish a personal portfolio website that demonstrates use of HTML for content and CSS for a unified style.