My checklist
Web Adventures · Week 7

Build a Web Card

Aim: Group content and style it as a card.

New coding words

  1. class
  2. div
  3. border
  4. padding
  5. margin

What the coding words mean

  1. class: A label that allows one or more HTML elements to share a style.
  2. div: A container used to group related webpage content.
  3. border: A line drawn around an element.
  4. padding: Space between an element’s content and its border.
  5. margin: Space outside an element, separating it from other elements.
Code along

Build a Web Card

This code creates a white information card for Nova with a purple border and space inside and around the card.

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

Superhero Profile Card

This code creates a centred superhero profile card with a dark-blue border, a hero name, power and home city.

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.

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_7_superhero_card.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 creates space inside a border?

Question 2

Why does a CSS class selector begin with a dot?

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

How are you getting on so far?

My checklist

Finished Web Adventures Week 7?

Your completion and mood are saved only in this browser.