Computing · Year 8

Active learning ideas

CSS: Colors, Fonts, and Layout

Active learning works for CSS styles because students need immediate visual feedback to connect abstract code with real outcomes. When students see color shifts or layout changes in real time, they grasp the impact of units and positioning faster than through abstract explanations.

• National Curriculum Attainment Targets
• KS3: Computing - Web Technologies
• KS3: Computing - CSS

• 30–45 min
• Pairs → Whole Class
• 4 activities

Activity 01

• Gallery Walk
• 35 min · Pairs

Pairs Challenge: Color Harmony Hunt

Pairs select a website theme, like 'ocean' or 'forest', and code CSS rules for complementary colors using hsl() and rgb(). They apply to sample HTML, swap screens to critique, and refine based on feedback. End with a class gallery vote.

Compare different CSS units for sizing elements and text.

Facilitation Tip

During the Color Harmony Hunt, have students screenshot their color pairings and write a one-sentence rationale for each choice to reinforce intentional design decisions.

What to look for

Present students with a small HTML snippet and a set of CSS rules. Ask them to predict the final rendered output, focusing on how colors and fonts will appear. For example: 'Given this HTML and CSS, what color will the heading be, and what font size will it display at?'

• Understand
• Apply
• Analyze
• Create
• Relationship Skills
• Social Awareness

Activity 02

• Gallery Walk
• 45 min · Small Groups

Small Groups: Font Factory Workshop

Groups receive mismatched HTML text blocks and create font-family stacks with fallback options, varying sizes in px, em, and rem. Test readability on different 'devices' by resizing browser windows. Compile into a shared stylesheet demo.

Construct a CSS stylesheet to create a consistent visual theme for a multi-page website.

Facilitation Tip

In the Font Factory Workshop, require groups to present their font stack decisions and explain how readability and visual hierarchy guided their selections.

What to look for

Students create a simple multi-page website (e.g., a personal portfolio with an index and about page). They then swap stylesheets with a partner. Each student reviews their partner's CSS for consistency in color choices and font application, providing one specific suggestion for improvement.

• Understand
• Apply
• Analyze
• Create
• Relationship Skills
• Social Awareness

Activity 03

• Gallery Walk
• 40 min · Whole Class

Whole Class: Layout Relay Race

Divide class into teams. Each member adds one layout property (margin, padding, position) to a shared HTML file projected live. Teams race to achieve a balanced page design, discussing choices as a group before final tweaks.

Critique a web page's design for its effective use of color and typography.

Facilitation Tip

For the Layout Relay Race, display each team’s progress on a shared screen so students can see how positioning affects the document flow in real time.

What to look for

Ask students to write down two different CSS units for sizing (e.g., px, em, %). For each unit, they should write one sentence explaining when it might be more appropriate to use that unit over the other.

• Understand
• Apply
• Analyze
• Create
• Relationship Skills
• Social Awareness

Activity 04

• Gallery Walk
• 30 min · Individual

Individual: Redesign Critique Lab

Students analyse a poorly laid-out webpage screenshot, identify issues, then code CSS fixes focusing on box model and positioning. Upload before-and-after versions to a class padlet for peer comments.

Compare different CSS units for sizing elements and text.

Facilitation Tip

In the Redesign Critique Lab, provide a rubric that explicitly asks students to evaluate consistency, contrast, and alignment in their redesigns.

What to look for

Present students with a small HTML snippet and a set of CSS rules. Ask them to predict the final rendered output, focusing on how colors and fonts will appear. For example: 'Given this HTML and CSS, what color will the heading be, and what font size will it display at?'

• Understand
• Apply
• Analyze
• Create
• Relationship Skills
• Social Awareness

A few notes on teaching this unit

Teach CSS by prioritizing experimentation over memorization. Guide students to notice patterns through side-by-side comparisons of px versus em or rgb versus hex. Avoid lectures longer than 10 minutes; instead, model debugging live as students work. Research shows that active construction of stylesheets builds deeper understanding than passive observation.

Successful learning looks like students confidently selecting units for sizing based on context, applying color and font choices that align with design principles, and debugging layout issues through trial and iteration. They should articulate why they chose specific values and units.

---

Watch Out for These Misconceptions

• During the Color Harmony Hunt, watch for students who assume all color units are interchangeable.

  Have pairs test their color values by swapping px with em for font sizes in their snippets, then observe how each unit affects the layout. Ask them to document when fixed units work better and when relative units preserve design integrity.

• During the Layout Relay Race, watch for students who think absolute positioning always removes elements from the page flow.

  Challenge teams to place an absolutely positioned element inside a relatively positioned container, then observe how the container’s space remains affected. Ask them to sketch the flow before and after rendering to clarify the difference.

• During the Color Harmony Hunt, watch for students who rely solely on named colors.

  Provide hex and rgb swatches alongside named colors, then ask pairs to replicate a provided color palette using custom values. Use the browser’s eyedropper tool to verify accuracy, reinforcing precision and flexibility.

---

Methods used in this brief

• Gallery Walk