Free video course
Web Development from Zero
Learn HTML, CSS and JavaScript step by step, and build a real, mobile-friendly business website yourself. No experience needed, just a laptop.
- 10episodes out now
- ~60 minof lessons
- Freecode download for every episode
How the course works
Each lesson is short and builds on the one before it, so watch them in order.
- 1. WatchCode types itself on screen while a live preview shows exactly what each line does.
- 2. Pause and try itFollow along in VS Code, a free editor. Every episode ends with a small challenge.
- 3. Check your workDownload the finished code for each episode and compare it with yours.
- 4. Build a real siteFrom Episode 7 you build a complete website for a café in Jinja.
All episodes
Start at Episode 1, even if you have written a little code before.
How Websites Work
Want to learn web development but don't know where to start? By the end of this video you'll understand how websites actually work, and you'll have built your first web page on your own computer, for free.
- What really happens when you open a website (browser, server, domain names and DNS)
- HTML, CSS and JavaScript explained simply
- Installing VS Code and the Live Server extension (free)
- Writing your first HTML page, line by line
- 3 mistakes almost every beginner makes
HTML Your First Real Page
Turn a test page into a real, well-structured web page.
- How HTML tags and elements work
- Headings h1 to h6, and the one-h1 rule
- Paragraphs, strong and em
- Semantic HTML: header, main, section, footer
- Comments, and 3 beginner mistakes
Links, Images and Lists
Add the three things almost every website needs.
- The a tag, href and attributes
- Menu links that jump to sections (#id)
- A WhatsApp chat link (wa.me)
- Images: src, alt and width
- Bullet and numbered lists
CSS Colours, Fonts and Spacing
Make any page look professional with CSS.
- Connecting a style.css file
- How a CSS rule works
- Hex colours
- Free Google Fonts
- The box model: padding vs margin
Flexbox Side by Side Layouts
Put things side by side, the way professionals do.
- Why everything stacks by default
- display: flex on the parent
- justify-content, align-items and gap
- Classes and the .class selector
- A row of equal cards
Responsive Design Phone First
Most of your visitors are on a phone. Make your site work for them.
- The viewport meta tag
- Flexible sizes: max-width 100%
- Media queries for phones
- Stacking with flex-direction: column
- Testing with Chrome DevTools
Project, a Café Website (Part 1)
Build a complete website for a café in Jinja, part 1: planning and HTML.
- Planning a business website
- Header, hero and call to action
- A menu with prices
- About and contact sections
- A tap-to-call link
Project, a Café Website (Part 2)
Turn the plain café page into a beautiful, responsive website.
- Brand colours and two Google Fonts
- CSS variables
- A hero image with a dark overlay
- Buttons with a hover effect
- Menu cards and a phone layout
JavaScript Basics
Make your web page do things, with your first JavaScript.
- The browser console
- Variables: let and const
- Strings and numbers
- querySelector and textContent
- Click events with addEventListener
JavaScript on the Café Website
Add a mobile menu and a WhatsApp order form to the café website.
- A ☰ menu button for phones
- classList.toggle
- An HTML form: input, select, button
- The submit event and preventDefault
- Building a WhatsApp order link
Coming next
Contact form and WhatsApp chat button
A click-to-chat link and a working contact section.
Put your website online
Domains, hosting, uploading your files, free SSL and testing on your phone.
Questions
Do I need any experience?
No. Episode 1 starts from how websites work and walks you through installing the free tools.
What do I need?
A laptop or desktop computer (Windows, Mac or Linux), a web browser and VS Code, which is free. You do not need internet to practise once the tools are installed.
Is it really free?
Yes. The videos and the code downloads are free.
I’m stuck on a step. Where do I ask?
Leave a comment on that episode on YouTube and tell us which step you are on. We read the comments.