Web Development Foundations
Learn how the web works and build a real, responsive website with HTML, CSS and JavaScript. Every lesson has a written guide, a narrated screen recording, a PDF and the finished source code.
Or every course for 12 months: $129.00 see all-access
What you'll be able to do
- Explain what happens between typing a URL and seeing a page
- Write valid, well-structured HTML documents
- Style pages with CSS selectors, the cascade and the box model
- Build layouts with Flexbox that adapt from phones to desktops
- Add behaviour with JavaScript: variables, functions, events and the DOM
- Publish a finished, responsive one-page website
Curriculum
6 modules · 15 lessons · about 7 hours
How the web works
Browsers, servers, URLs and HTTP: the model everything else builds on.
HTML: the structure of a page
Write documents browsers, search engines and screen readers all understand.
- 02Your first HTML pageWrite a complete HTML document for a small business, line by line, and open it in your browser.Free22 min
- 03Semantic HTML and accessibilityUse landmarks, a proper heading outline, alt text and a skip link so everyone can use your page.Video · PDF24 min
- 04Forms and inputsBuild an accessible cake-order form with labels, the right input types and built-in validation.Video · PDF26 min
CSS: making it look right
Selectors, the box model, Flexbox and responsive design.
- 05CSS basics: selectors, the cascade and the box modelLink a stylesheet and style the bakery page with type, class, descendant and hover selectors.Video · PDF25 min
- 06Flexbox layouts and responsive designLay out the header and menu with Flexbox, then adapt the page from phone to desktop with a media query.Video · PDF28 min
- 07CSS Grid for page layoutsLay out the whole page with grid-template-areas, and make a menu that fits as many columns as there's room for.Video · PDF26 min
- 08Custom properties and dark modeMove every colour into CSS variables, then give the site a dark theme that follows the visitor's device setting.Video · PDF22 min
JavaScript: making it interactive
Variables, functions, the DOM and events.
- 09JavaScript first steps: variables, functions and the DOMShow whether the bakery is open right now and build an accessible show/hide FAQ.Video · PDF30 min
- 10Arrays, objects and loopsStore the menu as data and build the page from it, with a filter for eggless items.Video · PDF28 min
- 11Fetching data with fetch() and JSONLoad the menu from a JSON file with fetch(), async and await, and handle errors properly.Video · PDF26 min
Ship it
Version control, publishing and quality checks.
- 12Git and GitHub basicsTrack every change to your project with Git, then put it on GitHub.Video · PDF30 min
- 13Publishing your websitePut the bakery site online for free with GitHub Pages or Netlify, and connect your own domain.Video · PDF24 min
- 14Performance and Lighthouse checksAudit the bakery site with Lighthouse, find a real layout-shift problem, fix it and measure again.Video · PDF24 min
Final project
Put everything together in a site of your own.
Projects
Sunrise Bakery one-page site
Built across the lessons: semantic HTML, a styled and responsive layout, a live open/closed badge and an accessible FAQ.
Your own business website
The final project: plan, build and publish a responsive site for a real or imagined business, checked with Lighthouse.
Final assessment and certificate
A 10-question assessment covering the whole course. Score 8 or more after completing the lessons and Code Craft issues a certificate of completion with a public verification link.
Go to the assessmentWeb Development Foundations: questions
Straight answers, no fine print. If yours isn't here, ask us — we reply within one business day.
Still have questions?
Real humans, one business day.
- No-obligation, fixed quote — free
- Talk to the team who'll build it
- Reply within one business day
No. The course starts from how the web works and your first HTML file. If you can create folders and save files, you can follow it.