Web Foundations Lesson 7 of 7

Checkpoint: your first web page

Checkpoint, 30 min, 4 problems

Builds on lessons 1 to 6. Start at lesson 1

Learn

On your own this time

Four problems that use everything so far: HTML elements and attributes, CSS rules and flexbox, and JavaScript values, variables and template literals. No hints until your first check. Read each task twice; the details are part of it.

Cleared it? The Band tour poster and the Game character card projects use the same skills on a bigger page, and both are free.

Checkpoint

A profile card

Build a profile card inside the <div class="card">:

  • an <h2> with the name Priya Shah
  • an image from /assets/noodle/coding.svg, 100 pixels wide, with useful alt text
  • a paragraph about her (any text)
  • a link with the text Listen on her page that goes to https://example.com/priya

Then style .card with 16px of padding and a 2px solid border in any colour.

On your own: hints appear after your first check, a solution after 3 checks or if you give up.

exercise_1.html to run
<style>
</style>
<div class="card">
</div>

Checkpoint

A row of links

The three links in the nav list sit on top of each other. Make the <ul> a flex row with a 12px gap, and remove its bullets with list-style: none. Leave the HTML as it is.

On your own: hints appear after your first check, a solution after 3 checks or if you give up.

exercise_2.html to run
<style>
</style>
<nav>
  <ul class="menu">
    <li><a href="/">Home</a></li>
    <li><a href="#music">Music</a></li>
    <li><a href="#gigs">Gigs</a></li>
  </ul>
</nav>

Checkpoint

A receipt line

In the script, store the buyer's name Mia, the number of tickets 2 and the price 7.5 in three variables. Work out the total in a fourth variable (let JavaScript do the maths), then print exactly:

Mia: 2 x 7.5 = 15

Constraint

  • Let JavaScript work out the 15.

On your own: hints appear after your first check, a solution after 3 checks or if you give up.

exercise_3.html to run
<script>
  // your variables, then one console.log
</script>

CheckpointPredict the output

Lives after a hit

What does this page print in the console?

exercise_4.html
<script>
  let lives = 3;
  lives -= 1;
  console.log("Lives: " + lives + 1);
  console.log(`Lives: ${lives + 1}`);
</script>
HTML, CSS and JavaScript