👑 Premium Sign in Sign up

Language lab · Beginner

🌐 HTML + CSS

Concept → trace → write code → run tests → explain why → improve → mini-project. Start in the browser if you like; set up your own computer when you are ready.

🧪 Runs in your browserOfficial download & docs ↗

🧪 Browser workspace

Runs in a sandbox inside your browser with a time limit: no install needed, and your code never reaches our server.

Loading the workspace…

🛠️ Set up and verify

  1. Install
    nothing to install: use VS Code and a browser
    nothing to install: use VS Code and a browser
    nothing to install: use VS Code and a browser
  2. Editor: Visual Studio Code with Live Server (optional), axe Accessibility Linter.
  3. Create index.html
    <!doctype html>
<html lang="en">
<body>
  <h1>Hello, GayaGnan!</h1>
</body>
</html>
  4. Run it and check the version
    open index.html in your browser
open index.html in your browser
  5. Health check: paste what your terminal printed.

Install one language at a time. These commands only install or print versions; nothing here deletes files. Versions change: check the official page and note the version you installed.

🧭 The 14-lab path

  • 00 · Setup and verify — install the runtime and editor, run hello world, print the version, fix PATH
  • 01 · Syntax and trace — follow each line and the value of every variable
  • 02 · Logic — conditionals and decision trees
  • 03 · Loops — trace tables and loop challenges
  • 04 · Functions — break problems down and test each piece
  • 05 · Data structures — lists, maps, stacks, queues and trees you can see
  • 06 · Debugging — bug cases with a hint ladder
  • 07 · Algorithms — search, sort and Big-O comparison
  • 08 · Files and data — read and write fixture files
  • 09 · API or database — talk to a mock API or a sandbox database
  • 10 · Testing — write tests and read failing assertions
  • 11 · Security — secure coding and dependency hygiene for this language 🧪 Accessible Dashboard
  • 12 · Project — one portfolio mini-project
  • 13 · Assessment — quiz, coding test, rubric and an explain-your-answer prompt

📚 Modules

  1. semantic HTML
  2. forms
  3. CSS selectors
  4. box model
  5. flexbox
  6. grid
  7. responsive design
  8. accessibility
  9. keyboard navigation
  10. colour and contrast
  11. animations with reduced motion

🏗️ Mini-projects

  • Personal portfolio
  • Course catalogue
  • Responsive lab dashboard

Projects use synthetic data only.