CSD Unit 2 - Web Development
In Unit 2, you’ll learn how to create and share the content on your own web pages. After deciding what content you want to share with the world, you’ll learn how to structure and style your pages using HTML and CSS. You’ll also practice valuable programming skills such as debugging and commenting. By the end of the unit, you’ll have a personal website that you can publish to the Internet.
Lesson 1: Exploring Websites
Unplugged
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.
Lesson 2: Websites for Expression
Unplugged
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.
Lesson 3: Intro to HTML Web Lab
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.
Lesson 4: Headings Web Lab
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
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.
Lesson 6: Lists Web Lab
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
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.
Lesson 8: Clean Code and Debugging Web Lab
In 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.
Lesson 9: Project - Multi-Page Websites Web Lab | Project
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.
Lesson 10: Styling Text with CSS Web Lab
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
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
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.
Lesson 13: RGB Colors and Classes Web Lab
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.
Lesson 14: Project - Personal Portfolio Website Web Lab | Project
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.
In Unit 2, you’ll learn how to create and share the content on your own web pages. After deciding what content you want to share with the world, you’ll learn how to structure and style your pages using HTML and CSS. You’ll also practice valuable programming skills such as debugging and commenting. By the end of the unit, you’ll have a personal website that you can publish to the Internet.
Lesson 1: Exploring Websites
Unplugged
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.
Lesson 2: Websites for Expression
Unplugged
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.
Lesson 3: Intro to HTML Web Lab
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.
Lesson 4: Headings Web Lab
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
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.
Lesson 6: Lists Web Lab
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
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.
Lesson 8: Clean Code and Debugging Web Lab
In 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.
Lesson 9: Project - Multi-Page Websites Web Lab | Project
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.
Lesson 10: Styling Text with CSS Web Lab
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
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
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.
Lesson 13: RGB Colors and Classes Web Lab
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.
Lesson 14: Project - Personal Portfolio Website Web Lab | Project
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.