Every day ends with a site that works and something to show. Scroll to see how the LeetCamp showcase grows over 20 days, week by week. Each picture is the real page: drag the width slider to feel how it responds.
Weekly goal: A complete, plain home page with all content in containers. Badge: Structure Builder. Week 1 page →
You see the finished LeetCamp site, make your plan, and your first page opens in the browser.
You add: index.html: the basic template with one h1.
You leave with: Planning sheet + a page with your title as a heading.
This is the real page. Scroll it, hover it and click the buttons. Use the width control at the top to resize.
Your page says something: a heading, an intro and the three steps.
You add: Headings, paragraphs, a list and comments.
You leave with: Headings, paragraphs and lists, labelled with comments.
This is the real page. Scroll it, hover it and click the buttons. Use the width control at the top to resize.
Your page is split into named boxes you can point to.
You add: header, section, div and footer containers with classes; the three steps become cards.
You leave with: Navbar, tools section, how-we-do-it section and footer, each in its own container with a class.
This is the real page. Scroll it, hover it and click the buttons. Use the width control at the top to resize.
You have two pages that link to each other, and your quiz buttons are on the page.
You add: A navbar link to about.html and the new Who I am page with its quiz buttons.
You leave with: A link, buttons and two linked pages.
This is the real page. Scroll it, hover it and click the buttons. Use the width control at the top to resize.
You review a partner's page and show yours to the class.
You add: The full footer, tidier indentation and a final check of every tag, link and alt text.
You leave with: A complete, unstyled home page with two linked pages.
This is the real page. Scroll it, hover it and click the buttons. Use the width control at the top to resize.
Weekly goal: A styled, well-laid-out page that looks like your own brand. Badge: Style Maker. Week 2 page →
Colour arrives. Your page stops looking like a worksheet.
You add: styles.css: your palette variables, fonts, body, links, headings and the gradient text.
You leave with: styles.css linked, with colours and fonts applied.
This is the real page. Scroll it, hover it and click the buttons. Use the width control at the top to resize.
Your containers get padding, borders and rounded corners, and the page is centred.
You add: The .container, the section spacing, the card box and the footer box.
You leave with: Containers look like neat cards, centred on the page.
This is the real page. Scroll it, hover it and click the buttons. Use the width control at the top to resize.
A sticky navbar and a footer that line up like a real website.
You add: The navbar with flex, nav links with hover, and the footer text styles.
You leave with: A working navbar and footer.
This is the real page. Scroll it, hover it and click the buttons. Use the width control at the top to resize.
The three steps become a row of hover-lifting cards with a gradient number.
You add: Grid for .steps and .footer-grid, card hover and the gradient number badge.
You leave with: A styled 3-card row and a 3-column footer.
This is the real page. Scroll it, hover it and click the buttons. Use the width control at the top to resize.
Your whole site looks like your own brand, on both pages.
You add: Who I am page: profile, avatar, chips, cards and quiz box, all styled with the same styles.css.
You leave with: A styled two-page site.
This is the real page. Scroll it, hover it and click the buttons. Use the width control at the top to resize.
Weekly goal: A responsive site with a working interactive quiz. Badge: Quiz Master. Week 3 page →
Your site looks good on a phone-sized window and a big screen.
You add: The viewport meta tag, media queries and reduced-motion support.
You leave with: Page looks good at two widths.
This is the real page. Scroll it, hover it and click the buttons. Use the width control at the top to resize.
You click a button and your page answers back.
You add: A script at the bottom of about.html with sayHi() and a Click-me button.
You leave with: A button that reacts when clicked.
This is the real page. Scroll it, hover it and click the buttons. Use the width control at the top to resize.
A quiz question that knows right from wrong.
You add: check(answer) with if / else, wired to the three answer buttons.
You leave with: One working quiz question.
This is the real page. Scroll it, hover it and click the buttons. Use the width control at the top to resize.
Feedback appears right inside your quiz box.
You add: The result line and textContent: the finished quiz script.
You leave with: Quiz with on-page feedback.
This is the real page. Scroll it, hover it and click the buttons. Use the width control at the top to resize.
Friends play your quiz and you fix the bugs they find.
You add: Nothing new. Test, debug and polish.
You leave with: Responsive pages with a working quiz.
Weekly goal: The Who I am page, a final test, a live website and a confident showcase. Badge: Launcher. Week 4 page →
Your About page is in your own words, and your site has one feature that is unmistakably yours.
You add: Every [ ... ] replaced with your own words (first name only), plus the tabbed tools showcase from the demo and a content check.
You leave with: About page written and linked, one extra feature added, content checked.
This is the real page. Scroll it, hover it and click the buttons. Use the width control at the top to resize.
Your site is live. Open it on another device.
You add: A bug-hunt pass and a DEPLOY.md checklist.
You leave with: Every learner has a live URL.
Your talk is ready and your live site is checked. Building is finished!
You add: talk.md: your three-part talk. No new code. Last bug fixes only.
You leave with: Rehearsed 2-minute talk and a finished project.
You show what you know on paper, then present your site to your classmates.
You add: Nothing new. This is the finished site.
You leave with: Written quiz done and every learner has presented.
No more coding. Play, celebrate and take home your badges.
You add: Nothing to build. Games, awards, snacks and a class photo.
You leave with: Camp complete. Everyone leaves with a certificate and a memory.