Web Design & Development 1 in HTML & CSS -- Unit 7 Layouts and Response:
This is the seventh in an eight-unit course which aims for students to master HTML & CSS basics to write complete static web pages. This unit explores concepts and techniques for building different layouts and responding to different-sized screens.
If you need a complete curriculum for teaching HTML & CSS in a classroom setting, consider the BUNDLE
that contains all 8 units, supplemental ebook, and master student view!
The materials are classroom-ready and created in easily editable formats (such as HTML and Word documents) for quick customization. A variety of activities are provided, including hands-on work with professional tools, worksheets and assessments with answer keys, and web pages and web apps made specifically for use in this course.
This package includes the complete resources for Unit 7 (Layouts and Response), including lesson plans, answer keys, and project files. The zip file contains 6 primary folders organizing the unit:
Lesson 1 - Layering with Box Model and Position Properties:
In this lesson, students will review the box model and position properties, while adding the z-index property to apply layered effects in their layout.
Lesson 2 - Mobile-Friendly Design:
In this lesson, students will examine different device and browser dimensions, and how smaller dimensions affect usability. They will begin styling a web site with mobile-friendly features, applying appropriate spacing, fonts, image sizes, and more for small screens.
Lesson 3 - Media Queries to Check Viewport Size:
In this lesson, students will use media queries to detect different screen sizes for applying different style sheets. They will style a web page using extra stylesheets to override styles for different screen sizes, and they will examine site statistics to determine appropriate breakpoints for responding to screen size.
Lesson 4 - Constructing Grids with Floats:
In this lesson, students will go back to a more traditional desktop-first approach to design, using a grid structure (built with the CSS float and overflow properties) that simply re-stacks vertically for mobile response.
Unit Activity - Implement a Responsive Design:
In this activity, students will write all of the HTML and CSS to implement a given design. The design includes a “mobile view” and a “desktop view” of all 3 pages on the site.
Review and Assessment:
Use the layouts.html reading as a summary review document with suggested activities that students should be able to complete on their own by the end of the unit. The provided assessment may be used directly as an exam or modified as needed.
For the next unit, see Unit 8: Capstone Projects. For the previous unit, see Unit 6: Hyperlinks and Data Structures. Also check out the complete 8-unit bundle for a full class in HTML & CSS.