My checklist
Web Adventures · Week 8

Flexbox Friends

Aim: Arrange several cards neatly across a webpage.

New coding words

  1. layout
  2. container
  3. Flexbox
  4. row
  5. gap

What the coding words mean

  1. layout: The way content is arranged on a webpage.
  2. container: An element that holds other elements inside it.
  3. Flexbox: A CSS tool for arranging elements in rows or columns.
  4. row: An arrangement that places items from left to right.
  5. gap: The space placed between items in a Flexbox layout.
Code along

Flexbox Friends

This code creates three cards and uses Flexbox to arrange them in a row that can wrap on a narrow screen.

Coding space

Edit index.html for your webpage’s content. Use style.css to change its colours, fonts and layout. Select the tab you want to edit, then select Run my code to see your changes in Preview. Your changes save separately for this activity in this browser.

Tab indents. Esc then Tab leaves the editor. Ctrl/⌘ + Enter runs your code.

PreviewYour webpage
What will you create?

Select Run my code to see your webpage here.

Mini project

Creature Card Gallery

This code creates a responsive gallery of three equally styled creature cards with spaces between them.

Coding space

Edit index.html for your webpage’s content. Use style.css to change its colours, fonts and layout. Select the tab you want to edit, then select Run my code to see your changes in Preview. Your changes save separately for this activity in this browser.

PreviewYour webpage
What will you create?

Select Run my code to see your webpage here.

Your mini-project to-do list

0 of 4 completed

Complete these activities in the mini-project editor above. After each change, select Run my code to check your webpage.

Save your finished mini project

Select Download my work and save the file as week_8_creature_gallery.zip. Extract this .zip file to keep your HTML, CSS and JavaScript files together, then open index.html in a browser to view your webpage.

Debugging detective

Chi Opara, your course guide

Knowledge check

Question 1

Which rule starts a Flexbox layout?

Question 2

What does the gap property change?

Your answers are checked in this browser and are not submitted.

How are you getting on so far?

My checklist

Finished Web Adventures Week 8?

Your completion and mood are saved only in this browser.