Quick recap: last time we styled elements with CSS rules — who can remember how a class in the HTML connects to a style in the CSS?
Today we're coding in HTML/CSS to build a small website layout: a header at the top, a content area in the middle and a footer at the bottom. We'll work at our devices step by step — predict first, then build, run and fix.
Open with the recap question on the class-versus-CSS-rule link, then set the goal: a website with a header, content area and footer. Have devices logged in and the editor open. Keep this brief — don't show the code yet, just the shape of what they'll build.
Before anyone runs anything, look at what we're about to build and commit to a prediction. When this page runs, what will appear at the top? Where will the columns sit — side by side or stacked? What will be at the bottom?
Say your prediction to your partner before you press run.
This is the PRIMM predict beat. Ask: what appears at the top, are the columns side by side or stacked, what's at the bottom? Collect two or three predictions and write them on the board to revisit at the make-sense step. Support cue: let students point at the region they mean rather than describe it in words.
Websites can come in hundreds of different layouts and in this lesson we will take a look at some of the most common layouts and how to code them in CSS.
A website is normally broken into the following areas:
Project the interactive activity and walk through the three regions — header, content, footer — naming them as you point. Key question: why might the header stay the same on every page? Misconception to head off: students think each region needs a whole new page; clarify it's all one layout. This naming step is decomposition in action.
The header appears at the top of the web page and would normally contain:
Here is an example of HTML and CSS that creates a simple header for a website. Take a look at the HTML and CSS code and see how we have used CSS to style the header, brand and menu a.
Model the header on the board: show how the class on the element matches a rule in the CSS. Watch for the brand or menu links not styling because the class names don't match exactly — have students read both side by side. Extension cue: confident students can adjust the header colour once it works.
The layout of content on a website can vary from page to page. For example the layout for a page that has a list of products is going to be different from a page an "About Us" page that has text and images.
Usually though the content area will be broken into one of the following layouts:
1 column layoutUse the board sketch of one-, two- and three-column layouts so students can name what they're choosing. Key question: why would a products page need a different content layout to an About Us page? No code to write here — it sets up the columns step that follows.
You're previewing this lesson. Get full access to this lesson and hundreds more — each one ready to teach, with interactive activities, printable resources and pupil progress tracking built in.