HTML & CSS Web Development

How to Access Projects

Your Ninja built a real 5-page personal website this week — here's how to open it at home in four steps:

  1. Download your ninja's project folder. Your ninja's Sensei uploaded each week's finished websites to Google Drive on Friday afternoon. Pick the week your ninja attended:
  2. Unzip the folder if it downloads as a .zip file. You should see the website's .html, .css, .js files and an assets folder inside.
  3. Open the website in a browser. Double-click index.html — it should open in Chrome, Edge, or Safari. Your ninja can navigate through all 5 pages of the site they built.
  4. Keep building (optional). If your ninja wants to keep editing, install VS Code (free) and the Live Server extension — the same setup we used at camp. Right-click index.html → "Open with Live Server" and the page reloads automatically every time they save a change.

What We Covered This Week

Throughout the camp, Ninjas wrote real HTML, CSS, and JavaScript by hand — using VS Code, Live Server, and Chrome (the same tools real web developers use every day) — and learned how to use Claude.ai as a coding assistant the right way. Click any topic to expand.

HTML Basics & the Homepage
  • Set up VS Code and the Live Server extension — the browser auto-refreshes every time you save (no F5)
  • Learned the three layers of every website: HTML = structure, CSS = style, JavaScript = behavior
  • Peeked at real websites' source code (Ctrl+U in Chrome) — "every site is made of these three things"
  • Built index.html — headers, paragraphs, images, links (internal and external)
  • Wrote their first CSS — changed background images and font sizes in main.css
Favorite Food Page & Lists
  • Built fav-food.html with a sidebar (ingredients + steps) and a main content area
  • Learned unordered lists (<ul>) for ingredients and ordered lists (<ol>) for recipe steps
  • Linked buttons to real external sites (a store URL for ingredients, allrecipes for the recipe)
  • Styled images with CSS: .image.featured img { border-radius: 8px; }
  • Used id="..." to style a single list item differently from the rest
Opinions Table & Table CSS
  • Met HTML tables — rows (<tr>), header cells (<th>), data cells (<td>)
  • Planned the table on paper first — what topics, what columns, what rows (real engineering practice)
  • Built opinions.html with at least 3 columns and 5 rows of their own opinions
  • Styled the table with border-collapse: collapse, padding, border, and colored header rows
  • Added striped rows with the real CSS pseudo-class tr:nth-child(even)
Hobbies Page, AI Workflow & JavaScript
  • Built hobbies.html with images, text, and styled sections
  • Learned how to use Claude.ai as a coding assistant — specifically taught: "AI is your assistant, you are the coder"
  • Met JavaScript — the third leg of web development (the behavior layer)
  • Started building a Clicker game in games.html with JavaScript event handlers and counters
Quiz Game, Polish & Friday Presentations
  • Finished games.html with a Quiz game — questions, answer checking, score tracking, all in JavaScript
  • Polished the whole website — consistent navigation, working links, clean styling
  • Designed a presentation poster for the showcase
  • Presented their full 5-page personal website to parents at the Friday Presentations & Poster Showcase

What's Next?

Want your ninja to keep building? Code Ninjas® West Katy's CREATE program turns the spark of camp into a year-round 9-Belt journey — from white belt to black, building real games week after week with their own Code Sensei®. New students can start with our Summer of Code promo: 2 months for $299, ages 8–14. Promotion ends June 30.

Or come back for a FREE 30-minute trial to see if year-round is the right fit for your family.

Sign up for Summer of Code » Book a free trial »

Leave a Google Review

Hey there, Code Ninjas family — we'd love your help.

If your ninja had a great week, a 5-star Google review takes 30 seconds and helps another family find us.

★★★★★ Leave a Google review →

Show us your review at pickup and your ninja picks a little Code Ninjas thank-you — wristband, pencil, lanyard, or another ninja goodie. Hi-Yah!

Moments in the Dojo

Feel free to call or text us during business hours. Please note: our doors open only when classes are in session.

Copyright © 2026, Code Ninjas West Katy.
All rights reserved.