About this course
From blank file to responsive, deployed website - practiced quest by quest in the EchoLens compiler.
This is a 6-week short course - enough depth to build real projects and a portfolio piece, without a long commitment. It runs online in the August 2026 cohort (starting 1 August 2026) and is taught the EchoLens way: you learn by doing real, gradeable work rather than just watching lectures.
What's included
- Live, instructor-led online sessions across 6 weeks (24 hours total).
- Hands-on coding quests you solve inside the EchoLens browser compiler - nothing to install.
- Gems, stages and a leaderboard that keep you moving instead of grade anxiety.
- A verified certificate with a scannable QR code, ready to share on LinkedIn, when you finish.
- The first week is open free so you can try the course before you pay.
What you will learn
Course learning outcomes
By the end of this course, you will be able to:
- CLO 1. Build a responsive, accessible layout using semantic HTML, modern CSS, Flexbox and Grid.
- CLO 2. Use JavaScript and the DOM to add interactivity, fetch data from APIs and manage local state.
- CLO 3. Deploy a complete, responsive website with live data using Git and modern tooling.
Course outline - level by level
12 leveles, each with hands-on quests you clear in the portal.
- Level 1. Semantic HTML, deeper · CSS foundations - Structure pages with semantic HTML, forms and media, and style them with selectors, specificity, the box model and units that scale.
- Level 2. Type and colour systems · Layout with Flexbox - Set up web typography, colour palettes and CSS variables, then build common layouts with Flexbox alignment and spacing.
- Level 3. CSS Grid · Responsive design - Build two-dimensional layouts with CSS Grid, then go mobile-first with media queries and fluid, flexible layouts.
- Level 4. Motion and polish · Organising CSS - Add tasteful transitions and transforms, then organise CSS into reusable, well-named, maintainable components.
- Level 5. JS essentials, deeper · Arrays and objects - Work with variables, functions, scope and modern syntax, and handle data with map, filter, reduce and destructuring.
- Level 6. DOM manipulation · Events and forms - Select elements and build UI in JavaScript, then handle events, forms and input validation.
- Level 7. Fetch and APIs · Async JavaScript - Call an API and read JSON, then display live data with promises, async/await and graceful delay handling.
- Level 8. Rendering data · State and storage - Render data to the DOM with templating, drive a simple app with state, and persist it with local storage.
- Level 9. Git and GitHub · Debugging - Use version control with branches and commits, collaborate on GitHub, and debug with browser dev tools.
- Level 10. npm and a component mindset · Deploying - Think in reusable pieces with npm packages, then deploy a static site to a live URL on Netlify, Vercel or GitHub Pages.
- Level 11. Planning the build · Building the UI - Plan a multi-page responsive portfolio from wireframe to code, and build a consistent, mobile-first UI of layout and components.
- Level 12. Adding interactivity · Ship a portfolio site - Add real interactivity and live data, run an accessibility and performance pass, and deploy the finished site.
How you submit: Coding quests in the built-in compiler with an AI copilot beside the editor - exactly the Cursor/Copilot workflow the course teaches.
Your production end project
A Deployed, Responsive Portfolio Website
A live, mobile-first site with real interactivity - the strongest proof a junior frontend developer can show.
Design, build, and deploy a complete multi-page responsive website, most naturally your own developer portfolio, with real interactivity and at least one section powered by live data. It is the piece you send with every job or freelance application.
- ✓A multi page, mobile first responsive layout built with Flexbox and Grid
- ✓Clean, organised, reusable CSS with a consistent design system
- ✓Real interactivity in JavaScript, such as a theme toggle or form validation
- ✓At least one section that fetches and renders live data from an API
- ✓Accessible, semantic HTML
- ✓The project in a public GitHub repo with clear commits
- ✓Deployed to a live URL on a free host
- ✓A passing basic accessibility and performance check
Shipped when: The site is live, looks right on phone and desktop, the interactive features work, the data section loads, and the code sits in a public repo you can walk through.
Who it's for
Frontend Web Development with HTML, CSS & JavaScript suits learners at a beginner to intermediate level who want a practical, project-based route into Frontend Web Development with HTML. You need only a browser and an internet connection - all coding runs inside the EchoLens compiler, so there is nothing to set up.
Certificate
Finish every stage and EchoLens issues a verified certificate carrying a QR code anyone can scan to confirm it on our site. You can add it to your CV or share it to LinkedIn in one click.