HTML & CSS
10 Day Unit Additional Resources
Embedded Files
General Summary of the Unit:
This unit introduces students to the fundamentals of web development using HTML and CSS. Students will learn how to create, structure, and style their own websites from scratch. Through a hands-on project, they will apply their knowledge to design and build a fully functional and visually appealing website.
Skills Students Need or will Develop:
To understand the basics of HTML and CSS
To learn how to structure web pages using HTML
To apply CSS for styling and layout design
To develop problem-solving skills by debugging and improving website code
To create a personal or thematic website as a culminating project.
Goals For a Final Project:
By the end of the unit, students will have a solid understanding of HTML and CSS, enabling them to build and style web pages. They will have completed their own website, showcasing their ability to structure content, apply design principles, and troubleshoot coding issues. This unit will equip students with foundational web development skills, encouraging further exploration and growth in the field of web design and development.
Teacher Resources
Teacher Resources
Introduction to Basic HTML coding
Introduction to Basic HTML coding
HTML Teacher Cheatsheet (may not want to show students right away since it generates code) https://htmlcheatsheet.com/
HTML5 Validation - https://validator.w3.org/
The Markup Validator is a free service by W3C that helps check the validity of Web documents.
Most Web documents are written using markup languages, such as HTML or XHTML. These languages are defined by technical specifications, which usually include a machine-readable formal grammar (and vocabulary). The act of checking a document against these constraints is called validation, and this is what the Markup Validator does.
Student Resources
Student Resources
Learn how to use HTML and CSS to make webpages. HTML is the markup language that you surround content with, to tell browsers about headings, lists, tables, etc. CSS is the stylesheet language that you style the page with, to tell browsers to change the color, font, layout, and more.
Project Ideas
Project Ideas
Mock Website
Mock Website
Have the students split into groups of four or five and assign them to choose a product or service for which to build a web page. Once they pick their product, have them work as a group to make a mock-website for that product. Once all projects are turned in, allow all the other groups in the class visit each website and vote on which one is best. This will give the project a competitive edge, thus making it more fun.
Personal Website Design
Personal Website Design
Have each individual student make a personal website about themselves to best depict their likes, dislikes and general personality. Once all of them are created, have the other members of the class go to each website and read through them. Not only is this an educational HTML project, but it also helps you and the other students in the class get to know other members of the class that might normally be quiet or unsocial.
Juicemind Lessons, Formative Assessments, and Final Project
Juicemind Lessons, Formative Assessments, and Final Project
Juicemind Import Link (Credit) - Dr. Travis Zimmerman
HTML and CSS
Part 1 - HTML Basics
Part 1 - HTML Basics - Formative Assessment
Part 2 - Links, Horizontal Page Breaks, and Lists
Part 2 - Links, Horizontal Page Breaks, and Lists - Formative Assessment
Part 3 - Adding style, color, and images
Part 3 - Formative Assessment - Adding style, color, and images to your code
More HTML Practice
CSS Part 1 - Intro to CSS - Selectors and Properties
CSS Part 2 - Selectors for IDs and Classes
CSS Parts 1 and 2 - Formative Assessment
Final Project - The Personal and Professional Portfolio
Report abuse