Web Design & Development 1 in HTML & CSS -- Unit 5 The Box Model:
This is the fifth 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 applications for the Box Model of displayed elements on a web page, including differences between block and inline elements, relevant CSS properties, centering and other positioning techniques, and more.
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 5 (The Box Model), including lesson plans, answer keys, and project files. The zip file contains 7 primary folders organizing the unit:
Lesson 1 - Box Model Properties:
In this lesson, students will expand their understanding of block v inline elements according to their behavior with CSS box model properties: width, height, margin, border, padding, and display. Students will apply box model properties to various HTML elements.
Lesson 2 - Box Sizing and Reset Styles:
In this lesson, students will use the different available calculation methods to determine the true rendered size of a block element. They will then start their own reset.css stylesheet to be kept in their templates folder. It will include a universal reset for box calculations and a few suggested default styles for every web project.
Lesson 3 - Centering Methods:
In this lesson, students will apply the 2 primary methods for centering content horizontally. They will use the text-align property to center inline content within a block element, and they will use box model properties including automatic margins to center the block element itself within its container. Students will also discuss possible use cases and workarounds to achieve vertical centering.
Lesson 4 - Positioning and Layout Basics:
In this lesson, students will alter the normal “flow” of a document using techniques offered by the CSS position property: static, relative, fixed, absolute. Students will use padding and margin properties to create space for absolute/fixed elements.
Lesson 5 - Applying Icons:
In this lesson students will explore methods for adding icon images to a page, including sprite images and Font Awesome characters. Students will compare the use of background images, IMG elements, and pseudoelements for icons.
Unit Activity - Develop Given Page:
In this activity, students will be given a one-page design to implement. Students will optimize images and write all of the HTML and CSS code from scratch.
Review and Assessment:
Use the box-model.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 6: Hyperlinks and Data Structures. For the previous unit, see Unit 4: Images. Also check out the complete 8-unit bundle for a full class in HTML & CSS.