Intro to Web Development

Launch Materials

Resource and Description
Intro to Web Development Course Reference Table: Code Nation's easy-to-use Reference Table is designed to help students find answers to their questions quickly during assignments or projects.
Printing Guide: All Guided Notes and Rubrics linked in one place.
Recommended Lesson Plan Structures: This Wiki page references a number of platforms and resources external to Code Nation. These are our recommendations for lesson plans you might consider for these external resources.

Unit 1: Introduction to Code Nation

Alignment	Resource and Description	Solution	Minutes
1.1	Code HS: What is the Web?: Students get a high level introduction to the Internet and how it functions, investigate how the Internet has impacted society over time, and set course goals for themselves.	N/A	45X3
1.1	Codecademy: This section allows students to make small changes to preexisting code so they can get excited about what programming can do	N/A	45
1.1	Google Classroom Facebook App: We know remembering students' names can be tough, especially if you have a large class. This app uses the Google Classroom API to help you learn the names of the students in your classroom.- Written by Xavi Ramirez	N/A	N/A
1.4	Tic, Tac, Toe and Mo': Volunteers can use this fun bingo game as a team-building activity. Volunteers should update the questions for their classrooms. You'll split the class into 3 teams and have them answer questions from week 1.	N/A	15-30
Volunteer Panel Lesson	Volunteer Panel on Tech Lesson : You can use this lesson if you would like to have a full class dedicated to introducing volunteers and having them participate in a panel to talk about careers in tech.	N/A	30-45min

---

Unit 2: HTML + CSS

Alignment	Resource and Description	Solution	Minutes
2.3	Khan Academy: basic Terminology: Whole group to introduction to basic terminology	N/A	3
2.3	HTML Madlibs: This activity gives students a chance to practice filling in paragraph tags and then creates a fun story.	HTML Madlibs Solution	15
2.3	Khan Academy: Intro to HTML: (13m video + 20m activities)	N/A	33
2.3	Popcode Lab: Use basic tags to tell us about yourself	To be developed	30
2.3	Popcode Lab: You have been hired as a web developer by The New York Times. Help build out their HTML	To be developed	30
2.4	Popcode Lab: Create a web of a famous person you look up to.	To be developed	30
2.4	Popcode Lab: Use HTML to answer the question: "What is the impact of technology in the classroom?"	To be developed	30
2.4	Khan Academy:More HTML: 14m video + 15m activities)	N/A	29
2.6	Cascading Style Sheet: Resource to explain cascading style sheets.	N/A	45
2.6	Khan Academy:Intro to CSS: (13m video + 20m activities)	N/A	33
2.6	Popcode: Intro to CSS: Use basic HTML and CSS to develop a site about Why should we protect the environment?	To Be Developed	30
2.7	Reference Table Scavenger Hunt: This is an optional extension activity that can be used if students are not utilizing the Reference Table.	N/A	10
2.8	Additional Class Attribute Slides: Describe how to use classes using shapes and colors	N/A	7
2.8	Khan Academy:Multiple CSS Selectors: (22m video + 25m activities)	N/A	47
2.8	Codecademy: Learn CSS: Selectors and Visual Rules: This section aligns closely with what students learn with Code Nation and also adds information about “ids” and the “!important” rule which are not discussed in this unit	N/A	45X5
2.8	NYC Landmark CSS Practice: Here is a list of tourist attractions around all of NYC’s 5 boroughs. Add classes for the attractions based on the borough.	To Be Developed	15
2.8	Codecademy: Learn CSS: Colors: This section reviews concepts about changing colors in CSS that students will be familiar with, while also delving into additional concepts not covered in class.	N/A	45X3
2.8	Pixel Art Activity: Students created pixel art in CSS.	N/A	15-20
2.8	Codecademy: Typography: Reviews concepts such as "font-family" and “font-weight”	N/A	45X3
2.8	Popcode: CSS Lab: Create a menu of your favorite dishes.	To Be Developed	30
2.9	Box Model Tool: This Popcode allows students to manipulate each of the box model property and values in real-time and see their effects in how the content appears on the page	N/A	5
2.9	Codecademy: Box Model: This section could serve as a review of the flexbox model taught in Code Nation lessons, while also going into more detail.	N/A	45X2
2.9	Simpson Layout Practice: Practice your CSS with the Simpsons.	Simpson CSS Solution	20
2.9	Khan Academy: Layout: (24m video + 30m activities)	N/A	54
2.9	Popcode Lab: Box Model: Create a website about climate change	To be Devloped	30
2.11	Flexbox with Nested Divs example: Use this Popcode page to help illustrate how flexboxes/divs behave with multiple levels of nesting.	N/A	5
2.11	Flexbox Froggy: Flexbox Froggy, a game where you help Froggy and friends by writing CSS code!	N/A	N/A
2.11	Flexbox Defense: Write CSS code to move defense towers into place to attack against enemies!	N/A	N/A
2.11	Flexbox Zombies: A story course in which each section unravels part of the plot, gives you mastery over a new flexbox concept, and presents zombie survival challenges that force you to solidify your new skills like your life depends on it.	N/A	N/A
2.11	Animated Flexbox Playground: This playground gives students the opportunity to practice using different Flexbox properties. Have students try the different property and value combinations in this Popcode environment.	N/A	N/A
2.11	Popcode Lab: Responsive Layout: You have been hired to create a responsive website for an old social media account called MySpace. They want you to create a sample profile of a fake person.	To be developed	30
2.15	Jeopardy Review: A Jeopardy game to review HTML and CSS	To be developed	40
2.R	Dinner Menu: Use HTML and CSS to create a dinner menu	To be Developed	45
2.R	CSS Zen Garden: Check out these webpages, all with the same HTML but stylized with CSS to be so different! Then Submit your own!.	N/A	45X2
2.R	Bug Smash Race: WE NEED YOUR HELP! The volunteer team has written some truly terrible, absolutely awful code. It’s riddled with bugs and we need you to fix it! And while we’re at it - we might as well make it a RACE.	N/A	45
2.R	Kahoot Unit 2: If you're done with the first few units, have some time and want a fun way to review, check out this fun Kahoot quiz.	N/A	15-20
2.R	Extended HTML and CSS review Kahoot!: If you're done with the first few units, have some time and want a fun way to review, check out this fun Kahoot quiz	N/A	45
2.R	New Student Catch Up Review: HTML and CSS: Slide deck that can be used to help catch up students who might have been late additions to your class or absent for most of the HTML and CSS units.	N/A	45
2.R	CSS Crash Course Review: CSS: Slide deck that can be used as a CSS review. Includes a guided and independent practice of all the unit 3 concepts.	N/A	45
2.R	Code HS: Styling Websites: In this unit, students learn the language CSS and use it to style their web pages. Students learn about the benefits of styling with CSS, and will use CSS to create several styled web pages of their own.	N/A	45X6
2.R	Unit 2 Catch-Up: Have a student starting late? need to catch them up? This is a great intro or review deck for Unit 1 HTML.	N/A	45
2.R	Code HS: Structuring Websites: In this unit, students learn about the language behind all websites: HTML. Students learn about several different HTML tags as well as the basic structure of a web page. Students use HTML to develop several of their own creative web pages.	N/A	45X11
2.R	Codecademy: Introduction to HTML:This section aligns closely with what students learn with Code Nation.	N/A	45X3
2.R	Raging Kittens CSS Project: A friend has a new rock band called the Raging Kittens! They've started a website, but it looks pretty plain. Use your CSS skills to make this site look cooler!	N/A	45
2.R	CSS Zen Garden: Check out these webpages, all with the same HTML but stylized with CSS to be so different! Then Submit your own!.	N/A	45
2.R	Pair Programming Reflection: A reflection form you can have students fill out after they have completed the Unit 4 pair programming project after they've finished.	N/A	N/A
2.R	HTML CSS Layout review Kahoot!: If you're done with the first few units, have some time and want a fun way to review, check out this fun Kahoot quiz	N/A	15
2.R	Layout and Positioning Review: Here's a great review lesson that focuses on Flexbox and the Box model but allows students to practice everything they've learned until this point.	N/A	45
2.R	HTML and CSS Review: HTML and CSS Popcode activity for review.	N/A	15
2.R	Code HS: Advanced HTML and CSS: This unit dives deeper into different things we can do with HTML and CSS. Students practice advanced topics in HTML and CSS, including visibility, image filtering, interaction, and animation, to develop more advanced web sites.	N/A	45X6
2.R	Popcode Lab: Layout Practice: Using what we've learned about box model and flexbox, make the "Questions" column look like the "Answers" column.	To be Developed	30
2.Extension	Codecademy: Tables: This section covers a new HTML element that Code Nation does not cover but can be implemented by students once learned	N/A	45
2.Extension	Codecademy:HTML Document Standards: This section covers slightly more advanced coding concepts about HTML structure that Code Nation generally skips over	N/A	45
2.Extension	Mini Hackathon: Holiday Wishlist: Mini Hackathon activity that can used to review HTML concepts and is holiday themed!	N/A	45
2.Extension	Patternizer: Fun way to learn about CSS Properties and design.	N/A	30
2.Extension	Mini Hackathon: New Years Activity: Mini Hackathon activity that can used to review CSS concepts and is holiday themed!	N/A	45
2.Extension	CSS Grid: This section covers a concept-grid-not discussed in Code Nation lessons	N/A	30
2.Extension	Mini Hackathon: Spring Break!: Mini Hackathon activity that can used to review Unit 4 concepts and is spring break themed. Could be done over several classes.	N/A	45X3
2.Extension	Mini Hackathon: Valentine's Day!: Mini Hackathon activity that can used to review Unit 4 concepts and is Valentine's Day themed. Could be done over several classes.	N/A	45

---

Unit 3: Intro to JavaScript

Alignment	Resource and Description	Solution	Minutes
3.3	JavaScript Exploration: Explore some basic JavaScript concepts students learn in the intro to JS unit.	To be developed	15
3.3	Calculate the Area Activity: In this activity, students will use variables and operators to calculate the area of different shapes.	To Be Developed	15
3.3	Variables and Operators Treasure Quest Practice: Build an awesome treasure hunting game using your knowledge of variables and operators! Get the high score by clicking on all of the treasures and none of the bombs!	To Be Developed	15
3.6	.innerHTML practice: Use the .innerHTML property to change the text so that it is about you when the buttons are clicked	To be developed	15
3.6	Colors, .style Practice: Use the .style property to paint the boxes with the colors in the rainbow.	To be developed	15
3.6	Color the Boxes: Using .style, color the even and odd boxes any color that you want.	N/A	15
3.7	Event Handler and .style Practice: Using the .style property, hide and show the red, blue, and green boxes when the buttons are clicked.	To be developed	15
3.7	Popcode Lab: Events and DOM Manipulation: You have been asked to create a webpage for a local deli in your neighborhood.	To be Developed	30
3.7	Out of this World Click Handler Practice: In this activity, students use the solar system to practice event handlers, .innerHTML, and .style	N/A	15
3.8	Button Game: Students will create a fun logic game. Students play a brain teaser game, then use jQuery to add new game components.	To Be Developed	20
3.8	Streetfighter Ryu Activity: Students use JavaScript event handlers to build a simple Streetfighter game!	Street Fighter Solution	15
3.8	Pizzeria Project: Using your knowledge of JavaScript, you will create an interactive website for a pizzeria.	To be developed	45X2
3.8	Unit 3 Review Lab: Online Report Card: Using your knowledge of JavaSCRIPT, create an Online Report Card.	To be developed	45
3.R	Interactive JavaScript Reference Table: This interactive reference table demonstrates JavaScript concepts and is a great way for beginners to see the reference table in action.	N/A	15
3.R	jQuery Concept & Vocab Review: End of unit 6 review.	N/A	45

---

Unit 5: Conditionals and .Value

Alignment	Resource and Description	Solution	Minutes
5.3	Inputs Calculator: Practice .value and operators while creating this basic calculator.	To Be Developed	15
5.3	Profile Creator: Use your JavaScript knowledge to make this profile preview screen work. You'll need to utilize inputs, variables, and event handlers.	To Be Developed	15
5.4	Carlton Packing List: Use Variables, String Concatenation, and .value to help Carlton build a packing list.	To Be Developed	15
5.4	Popcode Activity: Use JavaScript to create a program that allows the user to fill in the blanks to create a story	To Be Developed	15
5.5	Cookie Clicker Game: Use this cookie clicker game for some practice with event handling and conditionals.	Cookie Clicker Solution	15
5.6	If/Else Code Modification Practice: Use conditionals to check height	To Be Developed	15
5.7	The Login Page: Use conditionals to check login info	Login Solution	15
5.7	Tiny Quiz: Using conditional update the code so the application checks whether the user enters a correct Code Nation city.	Tiny Quiz Solution	15
5.7	Codecademy:Control Flow:This lesson covers conditionals taught by Code Nation such as if...else, and continues into switch statements.	N/A	45X2
5.Extension	[JavaScript Chat App (https://docs.google.com/presentation/d/1I5s91ET7EXU7oI27zJ_zZzbBMZkgg_QLE2cTPY8fvOw/edit#slide=id.g370dacb493_0_15): Students will review jQuery, .val(), and create a chat app.	To Be Developed	90
5.Extension	Insta App: Use JavaScript to build an Instagram app.	To Be Developed	90
5.R	Codecademy:Introduction to JavaScript: This lesson explains variables and string interpolation. Both of these topics are touched upon by Code Nation and Codeacademy expands on the topic.	N/A	45X2

---

Unit 6:Arrays, and Loops

Alignment	Resource and Description	Solution	Minutes
6.4	Simple drills: Array is provided, students write the loops to display them to webpage (4 drills in increasing difficulty) Note: Exercises written for for of loops but can be modified.	Simple Drills Solution	45
6.R	Codecademy: Learn JavaScript: Arrays and Loops: This lesson expands upon Code Nation topics and includes array methods, for, and while loops.	N/A	45X2

---

Unit 8: Functions

Alignment	Resource and Description	Solution	Minutes
8.5	Calendar Activity: This activity gives students more time to practice calling and working with functions by making a calendar.	Calendar solution code	30
8.5	Complete a Calculator: Completing, creating, and calling functions Independent Practice	Cal Solution	20
8.5	Variable Function Practice: Turn parts of the page different colors Guided Practice. Includes topics like: Variables, Functions, Parameters and Scope	Solution	20
8.5	Balloon Popping Game: Variables and Function Practice for use during a guided practice or independent practice	Balloon Popping solution code	20

---

Extension: Animations and Collisions

Resource and Description
Mario Game: Use keydown events to make the character move right and left and to react to a collision with another character (students will have to add in another character to the game board). Extra challenges would include: using a keydown event to make Mario jump, add a counter and have it increase by 1 every time Mario jumps, make the coin disappear when Mario jumps up and reappear when he lands.
Snake Game: Potential alternative project that can be challenging yet rewarding. (includes lesson plans and solution code)
The Flying Bird: The code here uses art from a popular mobile game. When the bird is clicked, the bird will flap its' wings. Solution
The Flying Bird 2: This takes Flying Bird to the next level. Solution
setInterval Lesson: Coders will use setInterval to periodically execute functions

Non-Internet Activities

Resource and Description
Tech & Society Writing Prompts: Tech & Society writing prompts, specifically for students who cannot do much coding practice at home and/or have limited access.
Nine Themes of Digital Citizenship: Overview of 9 themes of Digital Citizenship.
Icebreakers and Teambuilder Bank: A list of icebreakers for any setting.

---

Games

Resource and Description
Typing: In this lesson, the students are given type based games that will improve typing skills and speed.
Code Combat: CodeCombat is a platform for students to learn computer science while playing through a real game.
Lightbot: Program Lightbot to light up all of the blue squares!
Flexbox Defense: Write CSS code to move defense towers into place to attack against enemies!
Grasshopper: Grasshopper is the coding app for beginners. With fun, quick lessons on your phone, the app teaches adult learners to write real JavaScript.
Erase All Kittens:E.A.K. is an online game that provides kids aged 8-14 with knowledge of both computational thinking and professional coding languages, to prepare them for 21st Century degrees and careers.

---

Other

Resource and Description
Code Nation Skills: Non-Tech (A slide that explains what non-technical skills students can gain by participating in our classes!
Achieving Your Goals Through Code: Reading and Reflection Activity
Sample Mid-Year Reflection Worksheet: Worksheet that can be used to help facilitate a mid year cogen.
Women's History Month Slides
LGBTQ+ History Month
Keyboard Shortcuts (A couple of slides explaining helpful keyboard shortcuts
CodeSlang Activity (Tech and Society)
Field Trip (Pre and Post): Use these 10-15 minute activities before and after your field trip to make sure students are prepared for the trip and leave a good impression.
Field Trip (During): Use one of these slide decks during the field trip. Adjust to meet your specific field trip.
Field Trip Shark Tank Activity: Need a fun activity for a Field Trip? Check out this activity based on the hit show, Shark Tank!
Whiteboard video playlist: Whiteboard animation videos to summarize basic concepts by Code Nation volunteer Stephen Woo
Viewing Recommendations: Spycraft on Netflix: A list of recommended episodes from the Netflix series Spycraft. Might be of interest to any student who has expressed interest in knowing more about "hacking."
Viewing Recommendations: Scifi: Viewing/reading recommendations for students who have expressed an interest in science fiction

---

Tech and Society

Resource and Description
CodeSlang Activity (Tech and Society)
Spot the Surveillance Activity (Tech and Society)
Spot the Surveillance Activity (Tech and Society)
Survival of Best Fit Activity (Tech and Society)
Coded Bias Documentary lesson + activity (Tech and Society)

---

Digital Citizenship

Resource and Description	Theme	Minutes
My Digital Life is Like...: We often use our phones or other devices without even thinking about it. But paying closer attention to how -- and how much -- we use digital media can help us find better balance in our lives. Challenge students to truly consider how digital media adds to -- or takes away from -- their overall quality of life.	Media Balance and Wellbeing	45
Social Media and How You Feel: Social media plays a big role in most teens' lives, and research shows that it causes intense feelings -- both positive and negative. But not all media use is the same. There are many benefits that come with both active and passive media use. For better social and emotional well-being, encourage students to become creators of digital media, not just consumers.	Media Balance and Wellbeing	50
Can Media Be Addictive?: The word "addiction" packs a heavy punch, and the research is inconclusive on whether it's truly accurate when it comes to digital device use. What's certain, however, is that as people use devices and apps more, profits increase for the companies who make them. Help your students recognize how most of the technology they use is designed to keep them hooked, and help them use this as an opportunity to find more balance in their digital lives.	Media Balance and Wellbeing	60
The Health of Screentime: The research is still out when it comes to exactly how screen time affects our health. But one area where we know it does is our sleep. Just having a device near us seems to change the way our brains work. Help students learn that being responsible with digital media means adjusting how we use it so it isn't unhealthy for our bodies or our brains.	Media Balance and Wellbeing	45
Protecting Online Reputations: Tagging friends on social media is a great way to connect with others and capture memorable experiences. But what if they don't want to be tagged? Encourage your students to take responsibility for how they may affect the digital footprints of others.	Digital Footprint and Identity	50
Curated Lives: Social media gives us a chance to choose how we present ourselves to the world. We can snap and share a pic in the moment or carefully stage photos and select only the ones we think are best. When students reflect on these choices, they can better understand the self they are presenting and the self they aim to be.	Digital Footprint and Identity	50
Whos is Looking at Your digital Footprint:Our digital footprints can have a powerful impact on our future. This can be a scary thought, given that what's in our digital footprint isn't always in our control. Teach students that digital footprints are an opportunity to showcase their best selves and craft a footprint that leads to future success.	Digital Footprint and Identity	50
The Change You Want to See: Research shows that happiness in life is less about what you do and more about why you do it. When your actions have purpose, they lead to positive results -- both for you and the world. Help students use the power of the internet to turn their personal passions into positive impact.	Digital Footprint and Identity	50
Chatting and Red Flags: Having conversations online, without nonverbal cues or being able to see people, can be awkward and sometimes even risky -- with drawbacks from simple misunderstandings to manipulation or inappropriate messages. Help students navigate and avoid these situations before they go too far.	Relationships and Communication	45
Rewarding Relationships: "It's complicated" can describe many of our relationships with others, both romantic and otherwise. Add digital devices and social media to the mix, and things get complicated even further. Help students take the first step toward building healthy and rewarding friendships and romantic relationships, both online and off.	Relationships and Communication	45
Connecting with Digital Audiences: What you say, and how you say it, often depends on whom you're talking to, both in-person and online. The person or people you're chatting with -- and the apps or websites you're using -- affect how we communicate. Remind your students to consider their audience before they post or comment online, and help them build community and communicate effectively in the digital world.	Relationships and Communication	50
We are Civil Communicators: When we talk about our personal beliefs and politics, passions can run high -- especially when we're online. These intense moments can often lead to tit-for-tat insults, or worse. But, if addressed calmly and coolly, they can be an opportunity to find common ground and deeper understanding. Teach students to keep disagreements civil so their ideas will be heard and so they can advocate for positive change.	Relationships and Communication	55
What You Send in “That Moment When…: We've all faced thorny situations where what we say or do could potentially harm or hurt someone. Being honest is important, but is there such a thing as being too honest? Sometimes, innocent -- but insensitive -- comments can easily escalate to digital drama or even cyberbullying. Help students recognize and navigate these types of situations that happen online.	Cyberbullying, Digital Drama, & Hate Speech	50
Countering Hate Speech Online: As humans, we thrive on social connections and group associations. But this tendency can also lead us to be suspicious of people outside our group. This fear -- xenophobia -- can be overcome by more exposure to people who are different from us. However, the internet can often make this more difficult. Help students recognize this challenge and find strategies for navigating content online.	Cyberbullying, Digital Drama, & Hate Speech	50
Online Disinhibition and Cyberbullying: Texting and chatting online can sometimes feel just like talking to someone in person, but it's actually pretty different. It's all because of something called the "online disinhibition effect," which makes us more likely to share or communicate differently from how we would in person. Help your students learn to consider this concept before they post, and stop digital drama and cyberbullying before they start.	Cyberbullying, Digital Drama, & Hate Speech	45
Should Online Hate Speech Be Censored?: Hate speech can be both distasteful and offensive, but in many countries, it isn't illegal -- it's protected as free speech. But should it be? Many people worry that tolerance of hate speech, especially online, has led to acts of actual violence and hate crimes. But if hate speech is banned, who gets to decide what qualifies or doesn't qualify? Pose these questions for students, and help them think through the importance of both respect for others and free speech.	Cyberbullying, Digital Drama, & Hate Speech	55
Hoaxes and Fakes: We know not to believe everything we hear, but what about what we see? Advancements in computer-generated graphics, facial recognition, and video production have led to a world of viral videos that are often difficult to identify as fake. Help your students learn to read what they see on the web "laterally" by showing them how to get off the page, check credibility, and find corroboration.	News and Media Literacy	50
Challenging Confirmation Bias: Our brains are great at using past experiences to make quick decisions on the fly, but these shortcuts can also lead to bias. "Confirmation bias" is our brain's tendency to seek out information that confirms things we already think we know. Help your students learn to recognize this when they encounter news online, as a way to examine competing opinions and ideas and to avoid drawing questionable conclusions.	News and Media Literacy	45
Clicks for Cash: Well-crafted headlines benefit everyone. They help readers digest information and publishers sell news stories. But what if the headline is misleading? What if it's crafted just to get clicks and not to inform? "Clickbait" headlines may benefit advertisers and publishers, but they don't benefit readers. And when they go viral, they can badly misinform the public. Help students recognize and analyze clickbait when they see it.	News and Media Literacy	55
Filter Bubble Trouble: When we get news from our social media feeds, it often only tells us part of the story. Our friends -- and the website's algorithms -- tend to feed us perspectives we already agree with. Show students ways to escape the filter bubble and make sure their ideas about the world are being challenged.	News and Media Literacy	50
Big Data Dilemna: Many of us are aware that we're being tracked when we go online. It's one of the ways our favorite websites and apps know how to recommend content just for us. But how much information are companies actually collecting? And what are they doing with it? Digging into the details can help us make smart decisions about our online privacy and how to protect it.	Privacy and Security	50
Risk Check for New Tech: New tech, like location services and smart devices, helps make our lives easier and opens opportunities that didn't exist before. But these innovations also come with a cost -- especially to our privacy. Help students consider the benefits and drawbacks of these new technologies -- and decide whether they're ultimately worth it.	Privacy and Security	50
How Young is Too Young for Social Media: Kids have to be at least 13 to sign up for most social media platforms. But we know that many tweens work around the restriction. In doing so they can connect with peers and have fun, but they're also vulnerable to a number of risks -- mainly overuse and challenges to their social-emotional health. Reflecting on age-appropriate content and behaviors can help students think through social media's effects on all of us, regardless of our age.	Privacy and Security	50
Debating the Privacy Line: Often, the more information we have, the better decisions we're able to make. The power of data can benefit both individuals and governments. But who can be trusted with the responsibility of having all this data? Can governments collect and use it fairly and without violating our privacy? Help students think through this question and become thoughtful influencers of data policy and practice.	Privacy and Security	55

---

Recommended Lesson Plan Structures

Code Nation has compiled the above list of resources to support student learning on days that Code Nation Volunteers and Program Managers are not in the room. We recommend that you choose the resources that fit your classroom and student needs. You can use multiple different resources throughout the year, or just stick with one or two that you find work well. However, regardless of what you plan to teach on your non-Code Nation days, it's important to establish clear and consistent classroom procedures and routines that stay the same every day. This will help your students be most successful because they will know what to expect every day.

Below, we've outlined recommended lesson plan structures for each of the different platforms or resources included in this guide. While many of the types of lessons can be done independently by students, all require additional planning to ensure a successful lesson plan and high student engagement.

Code HS

CodeHS Lesson Plan

CodeHS is a comprehensive online teaching platform that has everything you need to teach computer science at your school, including web-based curriculum, teacher tools, administrator insights, and professional development.

CodeHS offers a variety of offerings. Web Design (Picasso) fits best with our HTML/CSS units, while Introduction to Computer Science in JavaScript (Golden) can be used to supplement our JavaScript units.

You can assign students videos, quizzes, examples, and exercises to complete -- and then use your teacher account to check the progress of all students in your class. This work can be taken as a participation or homework grade.

CSS Select By Class Lesson

Section	What to Do	Materials
Do Now(5 min)	Paper based reflection question based on the lesson or recently covered topics. Ex. "Why might you want multiple elements on a page to be styled the same way? Name some similarities between students that are in the same class."	Paper Do Now
Opening (5 min)	Share and celebrate student progress (leader board, etc.).Set expectations for CodeHS work time: 1. Computers open, working the whole time. 3. Eyes on your own screen (unless you are asking for/giving help).2. If you get stuck use your resources: reference table, google, ask a friend. Ex. "This week you've been working with your Code Nation teachers on CSS. Let's review some of the vocabulary that we've learned: CSS selectors, curly bracket, semi-colon, property, value."	Poster paper with CodeHS work time expectations
Independent Practice (30 min)	Log into your CodeHS account and classroom. Review computer expectations.Computer passing routine.Independent work time.	Computers Headphones (?)
Closing / Exit ticket (5 min)	Share and celebrate student progress. Ex. "Turn and talk: What is one new skill you learned today? How will you apply it to your future projects? "	NA

Codecademy

Codecademy Lesson Plan Codecademy is an online educational platform that offers a wide catalog of coding courses. Code Nation students can benefit from creating their own free account and completing exercises in the Web Development career path. Codecademy lessons can be done independently by students on their own laptops.

Just like a regular class day you should establish a consistent routine for Codecademy workdays. Below is a suggested routine, but you can personalize/modify it accordingly.

*NOTE: Codecademy PRO is a paid version of the site. Users can receive a short free trial of PRO, but you should instruct students NOT to click into any of the PRO activities or lessons

HTML Basics Lesson

Section	What to Do	Materials
Do Now (5 min)	Paper based reflection question based on the lesson or recently covered topics. Ex. "What is a web browser? Name some popular web browsers. What is HTML? How will you use HTML in Code Nation?"	Paper do now
Opening (5 min)	Share and celebrate student progress (leader board, etc.). Set expectations for Codecademy work time: **1.**Computers open, working the whole time 2. Eyes on your own screen (unless you are asking for/giving help) 3If you get stuck use your resources: reference table, google, ask a friend.Ex. "This week you've been working with your Code Nation teachers on HTML. Let's review some of the vocabulary that we've learned: HTML elements, tag, < angle brackets, and closing tag."	Poster paper with Codecademy work time expectations
Independent Practice (30 min)	Codecademy LinkReview computer expectations.Computer passing routine.Independent work time.	Computers and Headphones (?)
Closing / Exit ticket(5 min)	Share and celebrate student progress.Ex. "Turn and talk: What is one new skill you learned today? How will you apply it to your future projects? "	NA

Khan Academy

Khan Academy Lesson Plan Khan Academy is an online learning tool featuring short videos to model skills for students. Code Nation uses Khan Academy to facilitate student learning of technical concepts during the days of the week that Code Nation staff and volunteers are not present. Khan Academy lessons and exercises can be done independently by students on their own laptops. Students will need headphones to watch the videos--or you can watch them together on the projector.

*Visit the Teacher Quick-Start Checklist in order to set up a Khan Academy Classroom

HTML Basics Lesson

Section	What to Do	Materials
Do Now (5 min)	Paper based reflection question based on the lesson or recently covered topics. Ex. "What is a web browser? Name some popular web browsers. What is HTML? How will you use HTML in Code Nation?"	Paper do now
Opening (3 min)	Set expectations for Khan Academy work time:**1.**Computers open, working the whole time **2.**Eyes on your own screen (unless you are asking for/giving help) 3If you get stuck use your resources: reference table, google, ask a friend. *Ex. "This week you've been working with your Code Nation teachers on HTML. Let's review some of the vocabulary that we've learned: HTML elements, tag, < angle brackets, and closing tag."	Poster paper with Khan Academy work time expectations
Direct Teach (7 min)	Whole class watches a video from the lesson together.Ex. "Today we are going to watch a video to learn about the web and then we will have a chance to create poems on a webpage!"	Projector, computer, speakers
Independent Practice(28 min)	Khan Academy LinkReview computer expectations.Computer passing routine.Independent work time.	Computers and Headphones (?)
Closing / Exit ticket(5 min)	Turn and talk: What is one new skill you learned today? How will you apply it to your future projects?	NA

CS Principles

CS Principles Lesson Plan Computer Science Principles is a full-year AP accredited course. It offers a multidisciplinary approach to teaching the underlying principles of computation. The course introduces students to the creative aspects of programming, abstractions, algorithms, large data sets, the Internet, cybersecurity concerns, and computing impacts. Most lessons can be found here though a few suggested lessons above are found on other sites.

General Lesson Plan

Section	What to Do	Materials
Do Now (5 min)	Follow the CS Principles lesson plan for the day!	Paper do now
Opening(3 min)	Follow the CS Principles lesson plan for the day!	CS Principles lesson plan and any listed resources
Direct Teach (7 min)	Follow the CS Principles lesson plan for the day!	CS Principles lesson plan and any listed resources
Guided Practice (10 min)	Follow the CS Principles lesson plan for the day!	CS Principles lesson plan and any listed resources
Independent Practice (15 min)	Follow the CS Principles lesson plan for the day!	CS Principles lesson plan and any listed resources
Closing / Exit ticket (5 min)	Follow the CS Principles lesson plan for the day!	CS Principles lesson plan and any listed resources

Creative Computing Guide

Scratch Lesson Plan Scratch is a programming language that makes it easy to create interactive art, stories, simulations, and games – and share those creations online. ScratchEd is an online community where Scratch Educators share stories, exchange resources, ask questions, and find people. We recommend using the Creative Computing Guide from ScratchEd to support student learning. Code Nation uses Scratch to facilitate creative and computational thinking on the days of the week that Code Nation staff and volunteers are not present.

Scratch Unit 0 includes detailed directions on introducing students to Scratch and supporting them with setting up Scratch accounts.

General Lesson Plan

Section	What to Do	Materials
Do Now (5 min)	Paper based reflection question based on the lesson or recently covered topics. Ex. "What are the four parts of the box model? How would you fix this error message in Popcode?"	Paper do now
Opening (3 min)	Get students excited for the activity of the day!Ex. Is anyone interested in making animated characters perform actions on their webpage? Today we are going to learn how to make the Scratch cat do something surprising! Check out mine...I taught him to do the Macarena!"	ScratchEd lesson plan and any listed resources
Direct Teach (7 min)	Follow the ScratchEd Creative Computing Guide lesson plan for the day!	ScratchEd lesson plan and any listed resources
Independent Practice (15 min)	Follow the ScratchEd Creative Computing Guide lesson plan for the day!	Computers
Closing / Exit ticket (5 min)	Follow the ScratchEd Creative Computing Guide lesson plan for the day!Ex. "What did you figure out? What do you want to know more about?"	ScratchEd lesson plan and any listed resources

Tech in the News

Tech in the News Lesson Plan It's important for students to be aware of what's happening in the tech industry and how it affects them. We suggest several topics, but you are welcome to add additional subjects or choose articles that are more recent. You can print articles and do this activity without computers, or have students read the articles online (check for news sites without paywalls) and answer questions on Google Classroom.

Privacy (or not) Lesson

Section	What to Do	Materials
Do Now (5 min)	Give students headlines related to topic. Paper based reflection: What do you already know about this topic? How do you feel about this? How does this affect you? Ex. "Do you think your phone is listening to you? Do you think other people could guess your passwords? Have you ever gotten spam emails or phone calls?"	Paper do now
Opening (3 min)	Set expectations for Tech in the News work time: 1 Choose one article and read the whole thing 2 Computers open, working the whole time 3 Eyes on your own screen (unless you are asking for/giving help)If you finish early, research articles with the same topic Ex. "Today we'll be focused on internet privacy. Choose one of the articles that you just read the headline of and answer the questions. Be ready to discuss!"	Poster paper with Tech in the News work time expectations
Independent Practice(20 min)	Answer the following questions: (alter questions based on topic) 1 What is the article about? 2 What did you choose this article? Why does it interest you? 3 Describe the technology discussed in this article. 4Could this technology be helpful in other ways? 5 What does this make you want to learn more about?	Computers OR Paper
Group Discussion (12 min)	Options: 1 Have students pair up with students who read the same article and discuss.2 Have students pair up with students who read a different article and discuss 3 If all students read the same article, discuss as a whole class	Computers OR Paper
Closing / Exit ticket (5 min)	Turn and talk: What did you learned today? How will this change how you feel about/interact with tech?	NA

Digital Citizenship

Digital Citizenship Lesson Plan Common Sense Education offers a full digital citizenship curriculum, including all materials and lesson plans.

General Lesson Plan

Section	What to Do	Materials
Do Now (5 min)	Follow the Common Sense Education lesson plan for the day!	Paper do now
Opening (3 min)	Follow the Common Sense Education lesson plan for the day!	Common Sense Education lesson plan and any listed resources
Direct Teach (7 min)	Follow the Common Sense Education lesson plan for the day!	Common Sense Education lesson plan and any listed resources
Guided Practice (10 min)	Follow the Common Sense Education lesson plan for the day!	Common Sense Education lesson plan and any listed resources
Independent Practice (15 min)	Follow the Common Sense Education lesson plan for the day!Common Sense Education lesson plan and any listed resources
Closing / Exit ticket (5 min)	Follow the Common Sense Education lesson plan for the day!	Common Sense Education lesson plan and any listed resources

---