Full playable demo

Open the finished Sunny Side Café site

Use this as the target described by the client brief.

Playable result only — the source code stays hidden.

Mission 00 6 min

Mission 0: Meet Your Client

Client: Sunny Side Café

The café needs a warm, easy-to-read website that encourages people to visit. You are not choosing a random project: the client has supplied the content, sections and acceptance checklist. Your job is to decide how to turn that brief into clean HTML and CSS.

The finished site needs navigation, a hero, About, three featured menu cards, opening hours, contact details, hover feedback, responsive layouts and a footer.

Build roadmap

What you’ll build, mission by mission

  1. 1
    Skeleton

    Turn the brief into semantic page regions.

  2. 2
    Navigation

    Recall the Flexbox navbar pattern.

  3. 3
    Hero

    Build hierarchy from supplied client copy.

  4. 4
    About

    Create a balanced two-column section.

  5. 5
    Menu cards

    Build the three required featured items.

  6. 6
    Interactions

    Add subtle hover feedback.

  7. 7
    Visit

    Lay out opening hours and contact details.

  8. 8
    Responsive

    Solve the client's phone-layout problems.

  9. 9
    Debug

    Repair a deliberately broken version.

  10. 10
    Client check

    Pass the full acceptance checklist.

Mission demoCreate the Client Page Skeleton

Finished result only — the answer code stays hidden.