Exercises

📄

HTML Challenge Lab

Build a small HTML example, explain what it does, and improve it once.

Mixed

Starter Code

<main>
  <h1>Welcome</h1>
  <p>This page uses semantic HTML.</p>
</main>

Quality Checks

• Runs without obvious errors
• Uses clear names
• Includes one improvement
• Can be explained in plain English

Open Editor

🎨

CSS Challenge Lab

Build a small CSS example, explain what it does, and improve it once.

Mixed

Starter Code

.card {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

Quality Checks

• Runs without obvious errors
• Uses clear names
• Includes one improvement
• Can be explained in plain English

Open Editor

⚡

JavaScript Challenge Lab

Build a small JavaScript example, explain what it does, and improve it once.

Mixed

Starter Code

const button = document.querySelector("button");
button.addEventListener("click", () => alert("Hello"));

Quality Checks

• Runs without obvious errors
• Uses clear names
• Includes one improvement
• Can be explained in plain English

Open Editor

🐍

Python Challenge Lab

Build a small Python example, explain what it does, and improve it once.

Mixed

Starter Code

items = ["learn", "build", "ship"]
for item in items:
    print(item.title())

Quality Checks

• Runs without obvious errors
• Uses clear names
• Includes one improvement
• Can be explained in plain English

Open Editor

💻

PHP Challenge Lab

Build a small PHP example, explain what it does, and improve it once.

Mixed

Starter Code

<?php
$name = htmlspecialchars($_POST["name"] ?? "Guest");
echo "Hello, $name";
?>

Quality Checks

• Runs without obvious errors
• Uses clear names
• Includes one improvement
• Can be explained in plain English

Open Editor

📊

SQL Challenge Lab

Build a small SQL example, explain what it does, and improve it once.

Mixed

Starter Code

SELECT users.name, orders.total
FROM users
JOIN orders ON orders.user_id = users.id;

Quality Checks

• Runs without obvious errors
• Uses clear names
• Includes one improvement
• Can be explained in plain English

Open Editor

⚛

React Challenge Lab

Build a small React example, explain what it does, and improve it once.

Mixed

Starter Code

function Card({ title }) {
  return <article className="card">{title}</article>;
}

Quality Checks

• Runs without obvious errors
• Uses clear names
• Includes one improvement
• Can be explained in plain English

Open Editor

🟢

Node.js Challenge Lab

Build a small Node.js example, explain what it does, and improve it once.

Mixed

Starter Code

app.get("/api/status", (req, res) => {
  res.json({ ok: true });
});

Quality Checks

• Runs without obvious errors
• Uses clear names
• Includes one improvement
• Can be explained in plain English

Open Editor

🛠

Git & GitHub Challenge Lab

Build a small Git & GitHub example, explain what it does, and improve it once.

Mixed

Starter Code

git checkout -b feature/course-page
git add .
git commit -m "Add course page"

Quality Checks

• Runs without obvious errors
• Uses clear names
• Includes one improvement
• Can be explained in plain English

Open Editor

🛡

Web Security Challenge Lab

Build a small Web Security example, explain what it does, and improve it once.

Mixed

Starter Code

Set-Cookie: session=...; HttpOnly; Secure; SameSite=Lax

Quality Checks

• Runs without obvious errors
• Uses clear names
• Includes one improvement
• Can be explained in plain English

Open Editor

♿

Accessibility Challenge Lab

Build a small Accessibility example, explain what it does, and improve it once.

Mixed

Starter Code

<button aria-expanded="false" aria-controls="menu">Menu</button>

Quality Checks

• Runs without obvious errors
• Uses clear names
• Includes one improvement
• Can be explained in plain English

Open Editor

📈

Data & Analytics Challenge Lab

Build a small Data & Analytics example, explain what it does, and improve it once.

Mixed

Starter Code

const rows = csv.split("\n").map(row => row.split(","));

Quality Checks

• Runs without obvious errors
• Uses clear names
• Includes one improvement
• Can be explained in plain English

Open Editor

🧠

AI Development Challenge Lab

Build a small AI Development example, explain what it does, and improve it once.

Mixed

Starter Code

messages = [{"role":"user","content":"Summarize this lesson"}]

Quality Checks

• Runs without obvious errors
• Uses clear names
• Includes one improvement
• Can be explained in plain English

Open Editor

☁

Cloud & DevOps Challenge Lab

Build a small Cloud & DevOps example, explain what it does, and improve it once.

Mixed

Starter Code

server {
  server_name code.example.com;
  root /var/www/code;
}

Quality Checks

• Runs without obvious errors
• Uses clear names
• Includes one improvement
• Can be explained in plain English

Open Editor

📱

Mobile Web Challenge Lab

Build a small Mobile Web example, explain what it does, and improve it once.

Mixed

Starter Code

@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr; }
}

Quality Checks

• Runs without obvious errors
• Uses clear names
• Includes one improvement
• Can be explained in plain English

Open Editor

💼

Developer Career Challenge Lab

Build a small Developer Career example, explain what it does, and improve it once.

Mixed

Starter Code

Project case study: Problem, constraints, choices, result, proof.

Quality Checks

• Runs without obvious errors
• Uses clear names
• Includes one improvement
• Can be explained in plain English

Open Editor