CodeLab

Learn by reading real code

Examples and small projects from our lessons. Read the explanation, copy or download the code, run front-end examples live, and experiment in the Playground.

8Examples

2Projects

6Languages

6Live previews

playground.js

const learner = { name: 'You', level: 'beginner' };

function practise(topic) {
  console.log(`${learner.name} is learning ${topic}!`);
  learner.level = 'getting better';
}

['HTML', 'CSS', 'JavaScript'].forEach(practise);

Open the PlaygroundWrite HTML, CSS & JavaScript and see it run

Just added

Login page: HTML, CSS, JavaScript, PHP and MySQL FizzBuzz in Python Average quiz score per course with JOIN and GROUP BY Handle a form safely in PHP Array methods: map, filter and reduce

Featured

Playground

index.html +2 files

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Techage Innovations - Student Registration</title>
  <!-- Link to external CSS file -->
  <link rel="stylesheet" href="style.css">
</head>

Beginner Live preview

Professional Student Registration Portal

Build a Professional Student Registration Portal from scratch using only HTML, CSS & JavaScript. A hands-on project des…

HTMLCSSJavaScript

497 lines · 3 files View project

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Profile card</title>
  <style>
    body { font-family: system-ui, sans-serif; background: #f2faf5; display: grid; place-items: center; min-height: 100vh; margin: 0; }
    .card { background: #fff; width: 280px; border-radius: 20px; padding: 28px; text-a

Beginner Live preview

A responsive profile card

Build a clean profile card with semantic HTML and a few lines of CSS.

HTML

25 lines View snippet

style.css

.stage {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;     /* vertical */
  height: 100vh;
  margin: -8px;
  background: linear-gradient(135deg, #0b3d24, #16a862);
}

Beginner Live preview

Centre anything with Flexbox

The three lines of CSS that centre an element both ways.

CSS

16 lines View snippet

More examples 5

Any level Beginner Intermediate Advanced

script.js

const scores = [45, 72, 88, 39, 91, 66];

// map: a new array, one result per item
const percentages = scores.map(score => score + '%');
console.log('As percentages:', percentages);

// filter: only the items that pass a test

Intermediate Live preview

Array methods: map, filter and reduce

Transform, select and total a list of quiz scores without a single for loop.

JavaScript

13 lines View snippet

index.html +4 files

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sign in</title>
  <link rel="stylesheet" href="style.css">

Intermediate Live preview

Login page: HTML, CSS, JavaScript, PHP and MySQL

A complete sign-in page: the form, its styling, friendly checks in the browser, secure PHP and the users table.

HTMLCSSJavaScriptPHPSQL / MySQL

134 lines · 5 files View project

index.php

<?php
$name  = trim($_POST['name']  ?? '');
$email = trim($_POST['email'] ?? '');
$errors = [];

if ($name === '') {
    $errors[] = 'Please enter your name.';

Intermediate Live preview

Handle a form safely in PHP

Read, validate and escape form input before showing it back to the visitor.

PHP

22 lines View snippet

database.sql

SELECT c.title           AS course,
       COUNT(a.id)       AS attempts,
       ROUND(AVG(a.score), 1) AS average_score
FROM courses c
JOIN quiz_attempts a ON a.course_id = c.id
WHERE a.status = 'submitted'
GROUP BY c.id, c.title

Intermediate Code only

Average quiz score per course with JOIN and GROUP BY

Combine two tables and summarise the results.

SQL / MySQL

9 lines View snippet

main.py

for n in range(1, 21):
    if n % 15 == 0:
        print("FizzBuzz")
    elif n % 3 == 0:
        print("Fizz")
    elif n % 5 == 0:
        print("Buzz")

Beginner Code only

FizzBuzz in Python

The classic loop exercise, written clearly.

Python

9 lines View snippet