Beginner Tutorials
Your first lines of code — HTML, CSS, JavaScript, and your first real project.
Lessons at this level
HTML Essentials
8 lessons covering elements, text, links, images, forms, and document structure.
Start tutorial →Introduction to HTML
Get started with HTML and understand what it is, how it works, and why it matters.
Start tutorial →Your First HTML Page
Create your very first HTML page and learn the basic structure of a document.
Start tutorial →Working with Text
Use headings, paragraphs, emphasis, and formatting elements to structure readable content.
Start tutorial →Links & Navigation
Learn to create links that connect pages and help users move around a site.
Start tutorial →Working with Images
Add images to your pages with better accessibility, file choices, and page structure.
Start tutorial →Document Structure
Build properly structured HTML documents with semantic elements and a clear hierarchy.
Start tutorial →HTML Forms
Create forms that collect user input with labels, fields, and better structure.
Start tutorial →Emmet Workflow
Speed up HTML authoring with Emmet shortcuts, abbreviations, and editor productivity tools.
Start tutorial →CSS Essentials
9 lessons covering selectors, the box model, colours, typography, layout, responsiveness, and Flexbox.
Start tutorial →Introduction to CSS
Understand what CSS is, how it works with HTML, and why every website relies on it.
Start tutorial →Selectors & Properties
Learn how to target elements with selectors and style them with core CSS properties.
Start tutorial →Colors & Typography
Work with colour systems, fonts, and readable type choices for polished pages.
Start tutorial →Typography & Text Styling
Style readable text with font families, sizing, spacing, colour, and typographic hierarchy.
Start tutorial →Box Model
Control spacing with margin, padding, borders, and sizing to shape layout clearly.
Start tutorial →Layout Fundamentals
Build page layouts with positioning, columns, and modern layout thinking.
Start tutorial →Flexbox Basics
Use Flexbox utilities to align, distribute, and reorder content responsively.
Start tutorial →Responsive Design
Combine media queries and modern units to make layouts adapt to different screens.
Start tutorial →Modern CSS Features
Explore CSS variables, logical properties, and modern styling tools for cleaner code.
Start tutorial →Why Your CSS Isn't Working (And How to Fix It)
Common CSS pitfalls — specificity, inheritance, typos — and how to debug them.
Start tutorial →JavaScript Essentials
6 lessons covering variables, operators, conditionals, loops, and functions.
Start tutorial →Getting Started
Learn what JavaScript is and how it powers interactivity on the modern web.
Start tutorial →Variables & Data Types
Store and work with different types of data in JavaScript programs.
Start tutorial →Operators
Perform calculations and combine values with comparison, arithmetic, and logical operators.
Start tutorial →DOM & Interactive JavaScript
7 lessons covering DOM selection, manipulation, traversal, event handling, advanced events, dynamic content, and arrays.
Start tutorial →Functions
Create reusable blocks of code that make programs clearer and easier to maintain.
Start tutorial →Introduction to DOM
Learn how the browser turns HTML into a live DOM tree that JavaScript can work with.
Start tutorial →Arrays and Methods
Master JavaScript arrays and useful methods that support DOM-driven data work.
Start tutorial →DOM Manipulation
Select, update, and modify elements dynamically to change what users see on the page.
Start tutorial →Event Handling
Respond to user actions with event listeners, interaction patterns, and form behavior.
Start tutorial →Advanced Events
Work with custom events, focus behavior, throttle, debounce, and more advanced interaction patterns.
Start tutorial →DOM Traversal
Navigate more complex DOM structures by moving between parents, children, and siblings.
Start tutorial →Dynamic Content
Create, insert, clone, and manage new elements dynamically as your UI changes.
Start tutorial →From Idea to Live Website: The Full Journey Explained
A high-level walkthrough of the entire process from concept to deployment.
Start tutorial →Black Swan Bistro — Part 1 (Build Your First Web Page)
Create a real restaurant homepage from scratch using HTML and CSS.
Start project →