CyberCodeLab logo — neon green lab flask with terminal symbolCyberCodeLab

Web Development tutorials

Step-by-step HTML, CSS and JavaScript tutorials with a live code editor so you can practise as you learn.

Code editor showing a JavaScript function with parameters, filter and map calls, try-catch and return statements — functions deep dive tutorial

Intermediate

JavaScript Functions Deep Dive: Parameters, Returns & Arrow Functions

Go beyond the basics — function declarations vs arrow functions, default parameters, return values, scope and the early-return pattern, building a real tip calculator.

Array loop visualization showing indexed elements 0 to 9 being traversed by circular loop arrows — JavaScript arrays and loops tutorial

Basic

JavaScript Arrays & Loops: Working with Lists of Data

Learn arrays and loops in JavaScript — store lists, loop with for and for...of, and use push, map and filter to process data, all in the live editor.

Signup form with name, email and password fields showing green validation checkmarks, regex pattern and password strength rules — JavaScript form validation project

Intermediate

Project: Build a Signup Form with JavaScript Validation

Build a real signup form with instant validation — required fields, email format checking with regex, password rules and friendly error messages, step by step.

Neon green digital clock display built with JavaScript Date object and setInterval — beginner coding project

Basic

Project: Build a Digital Clock with HTML, CSS & JavaScript

A beginner-friendly project tutorial — build a live digital clock from scratch and learn setInterval, the Date object and template literals along the way.

JavaScript DOM manipulation diagram — getElementById, addEventListener code and DOM tree updating a neon interactive button

Intermediate

JavaScript DOM Manipulation: Make Your Page Interactive

Learn how JavaScript reads and changes a web page — select elements, change text and styles, create new elements and react to user events.

CSS Flexbox blueprint diagram showing flex container, rows, columns, main axis, justify-content and align-items properties

Intermediate

CSS Flexbox: Build Responsive Layouts the Easy Way

Master CSS Flexbox step by step — rows, columns, alignment, spacing and wrapping — and build a responsive card layout in the live editor.

Code editor showing basic JavaScript structure with const variables, functions and console.log — JavaScript basics tutorial for beginners

Basic

JavaScript Basics: Variables, Functions & Your First Script

Learn JavaScript from zero — variables, data types, functions and how to make a web page respond to a button click, all in the live editor.

CSS layout blueprint wireframe illustration — CSS basics tutorial

Basic

CSS Basics: How to Style Your First Web Page

Learn how CSS selectors, properties and values work — then practise colours, fonts and spacing in the live editor on this page.

Retro CRT monitor displaying HTML code — HTML basics tutorial

Basic

HTML Basics: Build Your First Web Page (Step by Step)

Learn HTML from scratch — what tags are, how a page is structured, and build your first web page in the live editor on this page.