Programmer's Picnic • Phase 2 HTML/JS
Home
Home › HTML/JS Track › Milestone 04
⭐ Phase 2 • HTML/CSS

Milestone 04: KBC Theme Header

Create a KBC-style top area.

10% complete

🎯 Goal

Complete this milestone so the KBC HTML/JavaScript project moves one step closer to the final working app.

🖼 Expected Output SVG

This diagram defines what the project output should include at this milestone.

Milestone 04 output diagram

🔨 Fully Defined Task

What to build

  • Open the files listed in this milestone.
  • Add only the feature described by this milestone.
  • Use the SVG output diagram to understand the target result.
  • Compare your work with the code-up-to-this-point snapshot.
  • Run the project in the browser and fix console errors.

Acceptance Criteria

  • The feature works without console errors.
  • The output matches the SVG diagram for this milestone.
  • The code uses current project state and JSON where applicable.

Submit to Teacher

  • Screenshot of the working feature.
  • Short explanation of the changed code.
  • Git commit message for this milestone.

📄 Files and Code Snapshot

Open the complete code up to this milestone:

📄 index.html📄 style.css📄 app.js📄 questions.json

💻 Code Up To This Point

View milestone 04 code
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>KBC Quiz</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="app">
    <header class="top"><h1>KBC Quiz</h1>
    </header>
  </main>
  <script src="app.js"></script>
</body>
</html>

style.css

body{font-family:Arial;background:#061533;color:white;margin:0}.app{max-width:1100px;margin:auto;padding:24px}button{cursor:pointer}\n.top{display:flex;justify-content:space-between;align-items:center}.top h1{color:#ffd54f}

app.js

console.log('KBC app started');

▶ Run This Milestone

Open milestone-code/milestone-04/index.html in your browser.
For best results use VS Code Live Server.

🐞 Debugging Challenge

If this milestone does not work:
1. Check that the correct milestone-code folder is open.
2. Check browser console.
3. Check JSON commas and quotes.
4. Compare with the SVG diagram.
5. Compare with the code snapshot.

🌐 GitHub Commit

git add .
git commit -m "Phase 2 milestone 04: KBC Theme Header"
git push

🏆 Completion Checklist

← PreviousNext →