Table of Contents
CODE.org Unit Overview
In this unit, 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, using resources, and teamwork.
Major Projects
Additional Resources
- CODE.org – This unit uses the Web Development curriculum at CODE.org
- CODE.org Web Lab Documentation
- w3schools How To Section
1. Exploring Web Pages
Essential Question
How can we choose websites based on the needs of a user?
Lesson Overview
To start the unit, you will explore a variety of website designs and match them to potential users. Next, you will design a prototype of a website and have a discussion on what it means to be a web designer.
Directions
- Complete the Web Design for Users activity guide using the example websites here
- Use a separate sheet of paper for your website prototype
Vocabulary
No new vocabulary this lesson
Resources & Handouts
In this first activity, students will see exploring web pages, but not coding them quite yet. Have your students show you their Web Design for Users handout and describe the prototype website they designed.
If you want to learn web design alongside your student, CODE.org is a free curriculum and you are more than welcome to join in on the learning! In order to follow along you will need to do the following:
- Create an account on CODE.org using an email and password, or signing up using a Google, Facebook, or Microsoft account
- Sign in to your account, you should see your name in the top right if you have signed in successfully.
- Go to https://studio.code.org/join and use the section code WMKSKK.
- Once you press join, you should be added to the section and good to go!
If you are having any issues, feel free to email me at qobrien@vusd.us and I will do my best to help.
2. Intro to HTML
Essential Question
How can we tell the computer both what to put on the web page, and how to organize it?
Lesson Overview
In this lesson, you will learn the basics of HTML, how to use the Web Lab Tool, and how to use the many resources on CODE.org by exploring the code behind a webpage and creating your own!
Directions
Complete levels 1-7 of Lesson 2: Intro to HTML. If you finish early, complete the challenges on level 8.
Vocabulary
- HTML – Hypertext Markup Language, a language used to create web pages
- HTML Element – A piece of a website, marked by a start tag and often closed with an end tag
- HTML Tag – The special set of characters that indicates the start and end of an HTML element and that element’s type
- Website Content – the text and images on a website
- Website Structure – how the content of a website is organized
Resources & Handouts
No additional resources for this lesson
This will be the first time students will be coding in class, and will hopefully have some new skills to show off. Have your student explain what HTML is and what the different sections of the Web Lab Tool do (level 2 goes over both of these, the video in the Help & Tips section is especially helpful). Level 7 is the assessment level, and your student’s preview screen should look like the picture in the instructions panel.
3. Headings & Lists
Essential Question
How can we work together to fix problems with our websites?
Lesson Overview
In this lesson, you will learn the principles of paired programming while you debug problems with your sites and learn how to use heading and list elements.
Directions
Complete levels 1-8 of Lesson 3: Headings and Lists. If you finish early, work on the challenges on level 9.
Vocabulary
- Heading – A title or summary for a document or section of a document.
- List – allows web developers to group a set of related items
Resources & Handouts
No additional resources for this lesson
This is the first time students will provide structure to their web pages. Have your student show you their work on level 9, where they should have added appropriate headings and lists to a page about pets. Ask your student how they added headings and lists to their web pages and if they are unsure, have them click on “Help & Tips” (top left corner) and review the topics they are struggling with.
4. Project: Recipe Book
Essential Question
How can I use HTML to share something about myself?
Lesson Overview
In your first web design project, you will use what you have learned about HTML to share a favorite recipe (or learn a new one)!
Directions
- Brainstorm and/or research recipe ideas
- Complete the Recipe Project Graphic Organizer
- Review what we have learned in level 1
- Add your HTML for your recipe on level 2
Vocabulary
No new vocabulary
Resources & Handouts
Our first project is an opportunity for students to show what they have learned so far in HTML (headings, paragraphs, and lists) in the form of a recipe. This is a fantastic opportunity to share a favorite recipe or learn something new together! Go over the Recipe Project Graphic Organizer with your student to see how their work will be graded and make sure they have added a description, ingredient list, and directions.
Note – For this project, I am offering extra credit if students share a picture of them (and preferably their family) making/enjoying their recipe!
5. Digital Footprint
Essential Question
How can you make sure that your private information stays private?
Lesson Overview
We are taking a break from learning how to code webpages and instead learning how to protect our private information online. You will look at fake social media accounts and discover just how much information people reveal about themselves.
Directions
Complete the Social Sleuth Activity Guide using the social media pages here. Make sure you read all of the instructions on the handout before you begin.
Vocabulary
No new vocabulary
Resources & Handouts
This is a great lesson to look over with your students and can be used to start a conversation about responsible social media usage. Students will fill out two tables (front and back) with information they find on a collection of fake social media sites. Note that for this assignment, they may not find all of the information for each table, so a few blank spaces do not mean it is incomplete.
6. Styling Text with CSS
Essential Question
How can we change the style of text on a web page?
Lesson Overview
In this lesson, we will dive into the art of styling elements on a page using CSS, a cutting-edge coding language. Our focus will be on adding or refining styles across a series of web pages.
Directions
Complete levels 2-10 of CODE.org. If you finish early, level 11 introduces new CSS properties to explore!
Vocabulary
- CSS – Cascading Style Sheets; a language used to describe how HTML elements should be styled
- CSS Selector – the part of a CSS rule-set that defines which HTML elements the style should be applied to
Resources & Handouts
No additional resources for this lesson
This is the first lesson where student web pages will start to have style appear in the form of modifying text size and color. Go over the assessment on level 10 with your student and have them show you how they changed the size and color of the page.
7. Project: Holiday Celebration Webpage
Essential Question
How can you express your personal style on a web page?
Lesson Overview
In this project, you get to show off your HTML and CSS skills by designing a web page about a holiday celebration of your choice! Choose a holiday that has a special meaning or learn about a new holiday celebrated somewhere else in the world!
Directions
- Complete the Holiday Celebration Project Guide. Use the list of holidays if you are having trouble deciding on one.
- Add the HTML and CSS for your web page here. Make sure you refer to the grading rubric on the project guide.
Vocabulary
No new vocabulary
Resources & Handouts
In this project, students will be testing their new styling skills by creating a holiday celebration webpage. Look over the holiday celebration project guide during the beginning stages and give any feedback on their answers. After the first day, ask your student to show you their work so far and explain the code that styles the web page.
8. Lesson Skipped
9. Using Images
Essential Question
How can we add images on our websites, while making sure we respect everyone’s rights?
Lesson Overview
This lesson covers how to add images to your web pages and explains how ‘self-closing’ tags are unique.
Directions
Complete levels 1-8 of Lesson 9: Using Images. If you finish early, level 9 shows you how to further customize images or modify your previous projects!
Vocabulary
No new vocabulary
Resources & Handouts
No additional resources for this lesson
Students are learning how to add images to web pages in this lesson. Go over the assessment on level 8 where they are adding a picture to the page.
10. Websites for Expression
Essential Question
How can we use websites to express ourselves?
Lesson Overview
In this lesson, we look at how web development can be used as a form of self-expression. We will look through some example web pages and then start the planning process of your own personal page.
Directions
Complete the Personal Web Page Project Guide. If you are feeling stuck, use these example pages for some inspiration.
Vocabulary
No new vocabulary
Resources & Handouts
This upcoming project gives students a lot more freedom to choose what their website will be about. Some students love this and know exactly what they want to make a web page about while others need help developing a topic. Look over the Personal Web Page Project Guide with your student and if the answers are missing, use the prompts at the top of the page to help generate some ideas.
11. Styling Elements with CSS
Essential Question
How can we style the images and layouts of our pages?
Lesson Overview
This lesson will expand your understanding of CSS and focus on styling non-text elements of your web pages.
Directions
Complete levels 2-8 of Lesson 11: Styling Text with CSS. If you finish early, level 9 teaches you a few new elements you can add to your web pages!
Vocabulary
No new vocabulary for this lesson
Resources & Handouts
No additional resources for this lesson
Student work really starts to come alive with this lesson! Go over the assessment on level 8 and have them show you how they changed the background color, moved the images, and changed the text color.
12. Your Web Page – Prepare
Essential Question
What do we need to do to prepare to build our web pages?
Lesson Overview
In this lesson, we will review all that we have learned so far and focus on the “prepare” stage of the problem-solving process by designing our web pages on paper and finding our images before starting to code.
Directions
Complete the Personal Web Page Project Guide – Prepare. Make sure all images are saved to your Google Drive and renamed using proper naming conventions.
Vocabulary
No new vocabulary
Resources & Handouts
This lesson is a continuation of lesson 10 and is an opportunity for students to make sure they know all of the code they will need for their upcoming webpage and have all of their images prepared so the rest of the project can go smoothly. Go over step 2 with your student and have them explain the code they will be using to style their page. If they have already found them, have them show you what images they will be using.
13. Project: Personal Web Page
Essential Question
What skills and practices help when we code web pages?
Lesson Overview
Here is where all that preparation pays off! In this lesson we review all that we have learned so far before starting to code our own personal web pages.
Directions
- Complete levels 1-7 of Project: Personal Web Page
- When your web page is finished, complete the Personal Web Page Reflection
Vocabulary
No new vocabulary
Resources & Handouts
This is one of the lessons where students really get to express themselves and show off everything they have learned so far. Have your student show you their web page and explain the HTML and CSS code used to make it all happen.
14. Websites for a Purpose
Essential Question
What are the different reasons people make websites?
Lesson Overview
In this lesson, we take a deeper look at why people design websites and how websites can be used to solve problems. We will also start looking at our final web design project
Directions
Complete the Websites for a Purpose Activity Guide using the example pages here.
Vocabulary
No new vocabulary
Resources & Handouts
This lesson starts the second half of the unit where students start to look at how their web development skills can help those around them. Look over the Websites for a Purpose Activity Guide and discuss the question at the bottom of the page with them.
15. Team Problem Solving
Essential Question
How can we work together to make a great team?
Lesson Overview
Working in teams comes with certain challenges, so in this lesson we discuss how we can work best as a team and start to decide on norms and responsibilities within the group.
Directions
As a team, complete the Website Team Plan
Vocabulary
No new vocabulary
Resources & Handouts
Everyone remembers how frustrating group projects can be, and the goal of this lesson is to address some of the difficult aspects before they become a problem. Not every student will have this handout, but students should remember what parts of the upcoming web site they are responsible for.
16. Sources and Research
Essential Question
How do we find relevant and trustworthy information on the Internet?
Lesson Overview
In this lesson, we will learn how search engines work and how to make sure the information we are finding is trustworthy and useful.
Directions
Complete the Internet Scavenger Hunt and Links and Research Activity Guides
Vocabulary
- Relevant – closely connected to a topic
- Search Engine – A program that searches for items on the World Wide Web.
- Trustworthy – reliable, honest, and truthful
Resources & Handouts
This is a fun lesson that tests how well students can use search engines. They should learn a few tricks to help refine their internet searches, ask them to teach you what they learned! Go over the Internet Scavenger Hunt and Links and Research Activity Guides with them with a focus on determining how to trust an online source.
17. CSS Classes
Essential Question
How can we create different styles for the same type of element?
Lesson Overview
This lesson introduces CSS classes which allow us to give individual elements their own style.
Directions
Complete levels 1-6 of Lesson 17: CSS Classes. If you finish early, their are challenges available on level 7.
Vocabulary
- CSS Class – An identifier that allows multiple elements in an HTML document to be styled in the same way
Resources & Handouts
No additional resources for this lesson
This lesson teaches students how to make individual elements stand out on their web pages. Go over the assessment on level 6 and check that one haiku’s heading, paragraph, and image have a style that is different from the rest of the page.
18. Planning a Multi-Page Site
Essential Question
How do we plan a web page as a group?
Lesson Overview
In this lesson, your team will start to prepare for your final web site project. During the lesson, you will sketch out your web pages, figure out style ideas, find images, and assign responsibilities.
Directions
As a team, complete the Website for a Purpose Project Guide
Vocabulary
No new vocabulary
Resources & Handouts
In this lesson, students will be completing a project guide in preparation for their first multi-page website. Not every student will take the project guide home, but students should know the general idea of their website and what pages they will be responsible for.
19. Linking Pages
Essential Question
How can we combine several different web pages into one website?
Lesson Overview
In this lesson, you learn how to go from a web page to a multi-page website! We will also review good naming conventions to make sure your users (and colleagues) know what you are doing.
Directions
Complete levels 1-6 of Lesson 19: Linking Pages. If you finish early, you can learn how to create external, image, or button links in level 7!
Vocabulary
No new vocabulary
Resources & Handouts
No additional resources for this lesson
This lesson shows students how to create multi-page websites, which can be a difficult jump in complexity and can test organizational skills. Go over the assessment on level 6 with your student and see if they were able to create a second page, move over the relevant information, and that you are able to go back and forth between the pages.
20. Project: Website for a Purpose
Essential Question
What skills and practices will help us work together to make a great website?
Lesson Overview
In our final web design project, your team will work both together and individually to code all of the pages for your website for a purpose.
Directions
- Complete your team website levels 1-6 of Project: Website for a Purpose
- When you are done, use the grading rubric and checklist to make sure everything is complete
Vocabulary
No new vocabulary
Resources & Handouts
Parent/Guardian Involvement
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.