CyberCodeLab logo — neon green lab flask with terminal symbolCyberCodeLab

Tutorials

Learn by doing — programming tutorials include a live editor so you can practise right on the page.

Web DevelopmentCybersecurity
Laptop at a cyber café protected by a glowing security shield and padlock — public Wi-Fi safety with VPN protection

cybersecurity · Basic

Public Wi-Fi Safety: How to Stay Secure at Cafés, Airports & Hotels

Free public Wi-Fi is convenient but risky — learn the real threats (evil twins, snooping, fake login pages) and the simple habits that keep your data safe.

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

web-development · Intermediate · live editor

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

web-development · Basic · live editor

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.

Password manager secure vault interface with encryption shield, saved account logins, password strength meters and breach alerts — password manager beginner guide

cybersecurity · Basic

How to Use a Password Manager: A Complete Beginner's Guide

What a password manager is, how the encryption actually works, how to pick one, and a painless 30-minute migration plan — the single biggest security upgrade most people can make.

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

web-development · Intermediate · live editor

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

web-development · Basic · live editor

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

web-development · Intermediate · live editor

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

web-development · Intermediate · live editor

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

web-development · Basic · live editor

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.

Phishing email alert — neon envelope with fishing hook, spoofed sender address and malicious link warning

cybersecurity · Basic

How to Spot Phishing Emails: 7 Red Flags Everyone Should Know

Phishing causes most account breaches — learn the 7 warning signs of a fake email, see real-world examples, and know exactly what to do when one lands in your inbox.

CSS layout blueprint wireframe illustration — CSS basics tutorial

web-development · Basic · live editor

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

web-development · Basic · live editor

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.

Phone showing 2FA authentication code with lock and shield hologram — account security tutorial

cybersecurity · Basic

How to Protect Your Online Accounts: Passwords & 2FA Explained

A practical, beginner-friendly guide to strong passwords, password managers and two-factor authentication (2FA) — the three habits that stop most account hacks.