Beginner to intermediate · 18 lessons · free · ages 12+
Web Developer Path step by step.
A complete start to web development. Each lesson explains one idea, shows a colourful example you can run, and gives you code to type and practise, with a live preview and instant checking as you go.
18 lessons
What you will do
1. HTML foundations
How the web works and your first HTML page
Complete the page: give it the title `My page`, put an `h1` heading inside the body, add two lines of text separated by `<br>`, and add an HTML comment.
Start →2Elements, attributes and text formatting
Write a paragraph with the id `notes` that contains important text (`strong`), emphasised text (`em`), highlighted text (`mark`) and a subscript (`sub`).
Start →3Links, lists and tables
Build a timetable table with a heading row of three `th` cells (Day, Subject, Time) and at least two rows of three `td` cells. Then add an ordered list of three steps and a link to `#top`.
Start →4Images, audio, video and embeds
Write a figure that contains an image (with `src` and `alt`) and a caption, then an `audio` player with `controls` and a `video` player with `controls`.
Start →5Semantic page layout
Build the layout: a `header` with an `h1` and a `nav` holding two links, a `main` with a `section` that contains an `article`, an `aside`, and a `footer` with some text.
Start →6Forms and user input
Build a sign-up form with labelled text, email and password fields, two radio buttons that share the name `level`, a checkbox, a `select` with two `option`s, a `textarea` and a submit button.
Start →2. CSS styling
Adding CSS: three ways and three selectors
Colour the `h1` text, give `.intro` a `background-color`, and give `#special` both a `color` and a `background-color`.
Start →8Backgrounds and gradients
Give `.hero` a `background-image` that uses `linear-gradient`, set its `background-size`, and give `.card` a `background-color`. Use the long-hand properties.
Start →9Fonts and text styling
Style `h1` with a `font-family`, a `font-size`, `text-align: center` and `text-transform: uppercase`. Style `p` with a `line-height` and `letter-spacing`, and remove the underline from `a` with `text-decoration: none`.
Start →10Combinators, pseudo-classes and pseudo-elements
Write four rules with exactly these selectors: `.menu a:hover` (set a `color`), `.menu li:first-child` (set `font-weight`), `h2::before` (set `content`) and `input[type="text"]` (set a `border`).
Start →11The box model
Style `.card`: give it a `width`, some `padding`, a `border`, a `margin` of `12px auto`, and `box-sizing: border-box`.
Start →12Display and position
Make `.card` `position: relative`, pin `.badge` to its top-right corner with `position: absolute`, `top` and `right`, and hide `.hide-me` with `display: none`.
Start →3. Responsive layout with a CSS framework
Responsive design and the 12-column grid
Inside a `div` with class `container`, build a `div` with class `row` that holds three `div` columns with class `col-md-4`, each containing an `h3` heading and a paragraph.
Start →14Typography classes
Write an `h1` with the class `display-4`, a paragraph with the class `lead`, and a paragraph that uses `text-center`, `text-muted` and `text-uppercase` (the same element can carry several classes).
Start →15Containers and spacing utilities
Make a `container-fluid` with the classes `bg-light` and `p-4`, and inside it a heading with `mb-3` and a paragraph with `mb-0`. Then add a second `div` with the classes `container` and `mt-3` that holds a box with the class `mx-auto`.
Start →16Colours, badges, alerts, buttons and borders
Build a `div` with the classes `alert` and `alert-success`, two `span` badges with the class `badge`, a `button` with `btn` and `btn-primary`, a `btn-group` holding three `btn` buttons, and a `div` that has both `border` and `rounded`.
Start →17Navbars and cards
Build a `nav` with the classes `navbar` and `bg-dark`, a `navbar-brand` link and a `navbar-nav` list with at least two `nav-link` links. Then build a `card` containing a `card-body` with a `card-title`, a `card-text` and a link styled as a `btn`.
Start →18Carousels and scrollspy
Build a carousel with the id `slides`: an indicators list with three `li` items, a `carousel-inner` with three `carousel-item` slides (only the first is `active`), and a `carousel-caption` in the first slide. Then write `<body data-spy="scroll" data-target="#mynav">` as the start of a page with a `nav` whose id is `mynav`.
Start →Next
Keep going
Learn HTML
HTML is the language that builds every web page. Type a little code, watch the page appear next to it, and get a tick when you have it right.
8 lessons · Beginner · ages 9+ →Learn CSS
CSS makes a web page look good. The page is already written; you write the style rules and watch it change as you type.
8 lessons · Beginner · ages 10+ →Learn JavaScript
JavaScript makes pages do things. Write a few lines, press Run, and see what your program prints. The lessons start from nothing.
8 lessons · Beginner · ages 11+ →Learn Python
Python is one of the friendliest languages to start with. Each lesson explains one idea in a minute, then gives you one small task: write the code, press Run, and get a tick when it is right.
24 lessons · Beginner · ages 9+ →Python Studio
Premium · free for nowPython Studio is for learners who have started Python and want to make things: draw spirals and rosettes with the turtle, write secret codes, referee a game, build a deck of cards and make a ball bounce. Each project has one clear goal and instant checking.
18 lessons · Beginner to confident · ages 10+ →Coding Grandmaster
Premium · free for nowCoding Grandmaster is for learners who know Python basics and want to understand how the clever parts work. Instead of importing libraries, you build them: a sieve, a sorting counter, Bayes' rule, a regression line, a nearest-neighbour classifier and a small neural network, one short project at a time.
46 lessons · Advanced · ages 13+ →FAQ
Web Developer Path: questions
What will I learn in Web Developer Path?
You will build a well-structured, styled and responsive web page using semantic HTML, CSS and a CSS framework. Each of the 18 lessons has one small task and automatic checking.
How long does it take?
About 270 minutes in total, 18 short lessons of around 15 minutes each. Go at your own pace.
Do I need to know anything first?
No. It starts with how the web works. If you would like a gentler start first, the free Learn HTML track uses smaller steps.
Do I get a certificate?
Yes. Finish all the lessons and you can download a free certificate of completion with your name. It is a record of what you did, not an accredited qualification.
Start a conversation
Want a teacher beside you?
Tell us the learner's age, country and goal. We suggest a starting point and confirm the format and price before anything is booked.
- Tell us the learner’s age or grade and goals
- We’ll suggest a suitable class or learning path
- We’ll confirm format, timing and fees with a parent or guardian
Play it, don't just read it
Write some code right now
Free games that need no sign-up. Pick one and play for five minutes.
Pick a game
- Predict the OutputRead a short Python program and choose what it prints. Then watch it run…Play
- Bug HunterA Python program prints the wrong answer. Find the one line with the…Play
- Code BuilderThe lines of a Python program are mixed up. Tap them into the right…Play
- Code JungleWrite real Python to guide Miko the monkey to every banana. 24 levels:…Play