Computer Science Discovery

What is the Internet?

 How does the web work?

 Parts of a URL.

Slides: Web development what is the internet .pptx - Google Slides 

Assignment: URL Assignment - Google Docs 

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

Objectives

Students will be able to:

• Create a prototype of a web design to meet the needs of a user using the problem-solving process

• Identify features of a web design that match the needs of users

• Understand the steps of the problem-solving process

To kick off a unit, students examine 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.

Slides: U2 L01 Web Development - Lesson 01 - Exploring Web Pages - Google Slides 

Worksheet: U2L01 - Activity Guide - Web Designs for Users (A) - Google Docs 

Video Lesson  Web lesson 1 Made with Clipchamp 

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

Objectives

Students will be able to:

• Explain that HTML allows a programmer to communicate the way content should be structured on a web page

• Understand how to use lesson resources provided in Web Lab

• Write a simple HTML document that uses opening and closing tags to structure content

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. 

Slides: U2 L02 Web Development - Lesson 02 - Intro to HTML - Google Slides 

Code.org Work: numbers 1-9 All

Video Lesson : Web Lesson 2 Made with Clipchamp 

Question of the Day: How can we remember what all the tags mean? 

Objectives

Students will be able to:

• Structure content into headings, subheadings, lists and paragraphs.

•  Use heading and list tags to change the appearance of text on a web page.

 In this lesson, students continue to use HTML to structure text on web pages, with a focus on 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. 

Slides: https://docs.google.com/presentation/d/1D8FlkMJc5adkjpKKtOjNUYe2kJophv_xhZfg5gpbUpQ/edit

Code.org Work: Numbers 1-9 and 11a

Video Lesson: Web Lesson 3 

HTML Tag Chart: HTML Tags chart - Google Docs 

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

Overview

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.

Slides: U2 L06Web Development - Lesson 06 - Styling Text with CSS - Google Slides

Video Lesson : CSD Unit 2: Lesson 6 - Styling Text with CSS (25-26) 

https://www.youtube.com/watch?v=hOrfVeFIXzg&list=PLKWZWXHOTkwJzz7UdjlJ26L_Ir54lRhbO&index=12

Code.org work:  1-10 Skip number 9

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

Overview

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?

Slides: U2 L08 Web Development - Lesson 08 - Using Images - Google Slides 

Video Lesson: CSD Unit 2: Lesson 8 - Using Images (25-26) 

https://www.youtube.com/watch?v=TbPXywb7Chk&list=PLKWZWXHOTkwJzz7UdjlJ26L_Ir54lRhbO&index=11

Code.org work: Finish lesson 8 numbers 1-6 and number 8 (For number 8 do not follow the code.org directions. Instead you will

1.  add a heading with a place you would like to visits. 

2. add an image of that place

3. create a subheading for reasons you would like to visit. 

4. add an ordered or unordered list of at least 3 reasons you would like to visit that place. 

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

Overview

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.

Slides: Web Development - Lesson 09 - Styling Elements with CSS - Google Slides 

Video Lesson: CSD Unit 2: Lesson 9 - Styling Elements with CSS (25-26)  

Code.org Work: Numbers 1-10

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?

Video: CSD Unit 2: Lesson 11 - CSS Classes (25-26) 

Slides: Web Development - Lesson 11 - CSS Classes - Google Slides 

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?

Slides: Web Development - Lesson 12 - Organizing My Content - Google Slides 

Video lesson: CSD Unit 2: Lesson 12 - Organizing Content w/ Flexbox Part 1 (25-26) 

CSD Unit 2: Lesson 12 - Organizing Content w/ Flexbox Part 2 (25-26) 

Overview

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?

Slides: Lesson 13 - Flexbox Children for More Control - Google Slides 

Video Lesson: CSD Unit 2: Lesson 13 - Flexbox Children for More Control Part 1 (25-26) 

Video Lesson: CSD Unit 2 Lesson 17 - Linking Pages (25-26) 

First 9 Weeks

Career Exploration Google Slides Presentation - Google Docs  

Second 9 Weeks 

🖥️ Student Instructions: Website Project – Part 1 - Google Docs  (This project will be started during the first 9 weeks but will not be due or graded until the second 9 weeks)

🖥️ Student Instructions: Website Project – Part 2 - Google Docs