Skip to content
PractiCode Learn
Start Free

Front-End Web Development

Build websites that look right on every screen, then put them online for real. Fifteen modules, from your very first tag to a site with your name on it.

  • 15 modules, 119 lessons
  • About 140 hours
  • 15 projects and a capstone
  • Module 1 is free
Start Module 1 FreeSee the Syllabus

Aligned to the MDN Curriculum and SFIA 9 · Lessons save for offline

By the end, you’ll be able to

  • Build semantic, accessible web pages that meet WCAG 2.2 AA.
  • Lay out responsive interfaces with Flexbox and Grid that work from 320 px phones to wide desktops.
  • Write JavaScript that responds to users and fetches live data from REST APIs.
  • Use the terminal, Git and GitHub to version, collaborate on and publish code.
  • Set up a modern project with npm, Vite, Prettier and ESLint.
  • Test, optimise and deploy a site to production, on your own domain.
  • Use AI assistants critically: ask good questions, check the answers and never ship code you can't explain.
  • Present a portfolio of at least six projects hosted under your own name.

The syllabus

Tap a module to see its lessons

1How the web works6 lessons · about 1 hourFree

What really happens between tapping a link and seeing a page.

  1. What happens when you open a website
  2. URLs, domains and DNS
  3. Requests, responses and status codes
  4. HTML, CSS and JavaScript: who does what
  5. Your first web page
  6. Reading MDN, the developer's dictionary
Module projectModule check

Project: An "About me" page, built in the browser

2HTML: structure and meaning10 lessonsPro

Structure content so browsers, search engines and screen readers all understand it.

  1. Elements, tags and attributes
  2. Headings, paragraphs and lists
  3. Links and file paths
  4. Images and alt text
  5. Page structure: header, nav, main, footer
  6. Sections and articles
  7. Tables, used properly
  8. Forms: inputs, labels and buttons
  9. Built-in form validation
  10. The head: titles, meta tags and link previews
Module projectModule check

Project: A menu page for a local restaurant

3Your toolkit and your first live site9 lessonsPro

VS Code, the terminal, Git and GitHub, then put your first site live.

  1. Files, folders and paths
  2. Setting up VS Code
  3. No laptop yet? Free cloud editors
  4. The terminal in 15 minutes
  5. Git basics: init, add, commit
  6. GitHub: push your code
  7. Publish with GitHub Pages
  8. Browser DevTools
  9. AI assistants: ask, check, understand
Module projectModule check

Project: The menu page, live on the web, with a README

4CSS fundamentals10 lessonsPro

Selectors, the cascade and the box model, and how to debug them in DevTools.

  1. Connecting CSS to HTML
  2. Selectors
  3. The cascade and specificity
  4. Inheritance
  5. Colour and contrast
  6. Units: px, rem, %, vw
  7. The box model
  8. Block and inline
  9. Custom properties
  10. Debugging CSS in DevTools
Module projectModule check

Project: Style the restaurant menu

5Typography, images and icons6 lessonsPro

Readable type, fast web fonts, responsive images and SVG icons.

  1. Web fonts that load fast
  2. Type scales and readable text
  3. Spacing systems
  4. Responsive images and modern formats
  5. SVG icons
  6. Backgrounds, borders and shadows
Module projectModule check

Project: A magazine-style article page

6Flexbox7 lessonsPro

Line things up in a row or a column, then spread them out or centre them.

  1. Normal flow
  2. Flex containers, main and cross axis
  3. justify-content
  4. Aligning items with Flexbox
  5. Wrapping and gap
  6. grow, shrink and basis
  7. Patterns: navbars, cards, footers, centring
Module projectModule check

Project: A navigation bar and card section

7Grid and responsive design8 lessonsPro

Two-dimensional layouts that adapt from small phones to wide screens.

  1. Rows, columns and fr
  2. Placing items and naming areas
  3. auto-fit and minmax
  4. Mobile-first and media queries
  5. Container queries
  6. Positioning and z-index
  7. Transitions, animation and reduced motion
  8. Testing on real phones
Module projectModule check

Project: A responsive landing page for a local business

8JavaScript fundamentals10 lessonsPro

Variables, functions, loops, arrays and objects, and how to debug them.

  1. What JavaScript does, and the console
  2. let and const
  3. Strings, numbers and booleans
  4. Comparisons and conditions
  5. Functions
  6. Arrays
  7. Loops
  8. Objects
  9. Template literals and string methods
  10. Debugging with breakpoints
Module projectModule check

Project: A bill splitter

9Thinking in JavaScript7 lessonsPro

Break problems into steps, and use array methods, errors and modules.

  1. Breaking problems into steps
  2. Scope
  3. map, filter and find
  4. reduce
  5. Errors and try…catch
  6. Modules: import and export
  7. Reading other people's code
Module projectModule check

Project: A budget tracker's logic, with tests

10The DOM and events9 lessonsPro

Make pages respond to taps, typing and forms.

  1. What the DOM is
  2. Selecting elements
  3. Changing text, classes and attributes
  4. Creating and removing elements
  5. Click, input and submit events
  6. Event delegation
  7. Form validation with JavaScript
  8. Saving data with localStorage
  9. Focus and keyboard support
Module projectModule check

Project: An interactive quiz

11Data and APIs: fetch, JSON and EmailJS9 lessonsPro

Pull live data into your pages, handle slow and broken cases, and send a form.

  1. JSON
  2. How APIs work
  3. Promises and async/await
  4. Fetching data
  5. Loading, empty and error states
  6. Sending data with POST
  7. Contact forms with EmailJS
  8. API keys: what's safe in front-end code
  9. Debugging network requests
Module projectModule check

Project: A currency or weather dashboard with a working contact form

12Git for teams and modern tooling9 lessonsPro

Branches and pull requests, then npm, Vite, Prettier and ESLint.

  1. Branches
  2. Merging and conflicts
  3. Pull requests and code review
  4. Good commits and .gitignore
  5. Node and npm
  6. package.json and scripts
  7. Vite
  8. Prettier and ESLint
  9. Using a library from npm
Module projectModule check

Project: Move the dashboard to Vite through a pull request

13Accessibility6 lessonsPro

Audit and fix pages against WCAG 2.2 AA, with a screen reader and a keyboard.

  1. Who accessibility is for
  2. Keyboard and focus
  3. Screen readers: TalkBack and NVDA
  4. Contrast and colour
  5. Accessible forms and errors
  6. Automated audits: axe and Lighthouse
Module projectModule check

Project: An accessibility audit and fix of an earlier project

14Design for developers5 lessonsPro

Hierarchy, spacing and colour, and how to build from a Figma file.

  1. Visual hierarchy
  2. Alignment, spacing and consistency
  3. Reading a Figma file
  4. Exporting assets
  5. Building a design faithfully
Module projectModule check

Project: Build a page from a Figma design

15Ship it: performance, SEO and real clients8 lessonsPro

Core Web Vitals, SEO, your own domain, and working with a client.

  1. Lighthouse and Core Web Vitals
  2. Faster images and fonts
  3. SEO basics
  4. Deploying to Netlify from GitHub
  5. Custom domains and HTTPS
  6. Netlify forms and redirects
  7. A first automated test
  8. Working with a client: brief, scope, handover
Module projectModule check

Project: Deploy a site with a Lighthouse score of 90+

Some of what you’ll build

  • Module 2

    A menu page for a local restaurant

  • Module 7

    A responsive landing page for a local business

  • Module 11

    A currency or weather dashboard with a working contact form

Module 1 takes about an hour. It’s free.

Start Module 1 Free