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

Results 4

Any level Beginner Intermediate Advanced

Intermediate Clear all

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