Unit 2: HTML & CSS

Dive deep into the building blocks of the web. Learn how to structure your web page and style it to your liking.

Focus	Resource and Description	Solution	Minutes
Intro to HTML	Khan Academy: basic Terminology: Whole group to introduction to basic terminology	N/A	3
Intro to HTML	Khan Academy: Intro to HTML: (13m video + 20m activities)	N/A	33
Intro to HTML	Codecademy: Introduction to HTML:This section aligns closely with what students learn with Code Nation.	N/A	45X3
HTML Tags	HTML Madlibs: This activity gives students a chance to practice filling in paragraph tags and then creates a fun story.	HTML Madlibs Solution	15
HTML Tags	Popcode Lab: Use basic tags to tell us about yourself	To be developed	30
HTML Tags	Popcode Lab: You have been hired as a web developer by The New York Times. Help build out their HTML	To be developed	30
HTML Tags	Popcode Lab: Create a web of a famous person you look up to.	To be developed	30
HTML Tags	Popcode Lab: Use HTML to answer the question: "What is the impact of technology in the classroom?"	To be developed	30
HTML Tags	Khan Academy:More HTML: 14m video + 15m activities)	N/A	29
Intro to CSS	Cascading Style Sheet: Resource to explain cascading style sheets.	N/A	45
Intro to CSS	Khan Academy:Intro to CSS: (13m video + 20m activities)	N/A	33
Intro to CSS	Popcode: Intro to CSS: Use basic HTML and CSS to develop a site about Why should we protect the environment?	To Be Developed	30
Documentation	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
CSS Class Attributes	Additional Class Attribute Slides: Describe how to use classes using shapes and colors	N/A	7
CSS Class Attributes	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
CSS Class Selectors	Khan Academy: Multiple CSS Selectors: (22m video + 25m activities)	N/A	47
CSS Class Selectors	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
CSS Colors	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
CSS Colors	Pixel Art Activity: Students created pixel art in CSS.	N/A	15-20
CSS Font	Codecademy: Typography: Reviews concepts such as "font-family" and “font-weight”	N/A	45X3
CSS Lab	Popcode: CSS Lab: Create a menu of your favorite dishes.	To Be Developed	30
CSS Box Model	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
CSS Box Model	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
CSS Box Model	Popcode Lab: Box Model: Create a website about climate change	To be Devloped	30
CSS Layout	Simpson Layout Practice: Practice your CSS with the Simpsons.	Simpson CSS Solution	20
CSS Layout	Khan Academy: Layout: (24m video + 30m activities)	N/A	54
CSS Layout	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
CSS Flexbox	Flexbox with Nested Divs example: Use this Popcode page to help illustrate how flexboxes/divs behave with multiple levels of nesting.	N/A	5
CSS Flexbox	Flexbox Froggy: Flexbox Froggy, a game where you help Froggy and friends by writing CSS code!	N/A	N/A
CSS Flexbox	Flexbox Defense: Write CSS code to move defense towers into place to attack against enemies!	N/A	N/A
CSS Flexbox	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
CSS Flexbox	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
HTML/CSS Review	Jeopardy Review: A Jeopardy game to review HTML and CSS	To be developed	40
HTML/CSS Review	Dinner Menu: Use HTML and CSS to create a dinner menu	To be Developed	45
HTML/CSS Review	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
HTML/CSS Review	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
HTML/CSS Review	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
HTML/CSS Review	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
HTML/CSS Review	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
HTML/CSS Review	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
HTML Review	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
HTML/CSS Review	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
HTML/CSS Review	HTML and CSS Review: HTML and CSS Popcode activity for review.	N/A	15
HTML/CSS Review	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
CSS Review	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
CSS Review	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
CSS Review	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
CSS Review	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
CSS Review	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
CSS Review	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
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
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
Extension	Patternizer: Fun way to learn about CSS Properties and design.	N/A	30
Extension	Mini Hackathon: New Years Activity: Mini Hackathon activity that can used to review CSS concepts and is holiday themed!	N/A	45
Extension	CSS Grid: This section covers a concept-grid-not discussed in Code Nation lessons	N/A	30
Extension	Mini Hackathon: Holiday Wishlist: Mini Hackathon activity that can used to review HTML concepts and is holiday themed!	N/A	45
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
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