Frontend Developer

Full outline

The complete path to becoming a frontend engineer — the web platform fundamentals most tutorials skip, modern CSS, deep JavaScript, TypeScript, React and the framework layer, plus the performance, accessibility and testing work that separates a hobbyist from a professional.

1. 01How The Web Works

   You cannot debug what you do not understand.

   • HTTP & HTTPS

     The request/response protocol every website runs on. Methods, status codes, headers, and why TLS matters.

   • DNS & domains

     How a human-readable name becomes an IP address, and what each record type is for.

   • How browsers render

     Parsing, the DOM and CSSOM, layout, paint and composite. This is the mental model behind every performance fix you will ever make.

   • Domains, hosting & DNS setup

     Getting a site onto the public internet on a real domain, with HTTPS.

2. 02HTML, Properly

   Semantic markup is the cheapest accessibility win there is.

   • Semantic elements

     Using the element that describes the content, not the one that looks right. Screen readers, SEO and your future self all benefit.

   • Forms & validation

     Forms are where most real web apps live. Native HTML gives you far more than most developers use.

   • Accessibility foundations

     Roughly one in six people has a disability. Accessible markup is a baseline professional requirement, not a nice-to-have.

   • SEO & metadata

     How search engines and social platforms read your page.

3. 03Modern CSS

   CSS in 2026 can do things that needed JavaScript in 2016.

   • Box model & the cascade

     Specificity, inheritance and the box model. Almost every 'CSS is broken' moment is one of these three.

   • Flexbox & Grid

     The two layout systems that replaced a decade of hacks. Learn when each is the right tool.

   • Responsive & fluid design

     Designing for every viewport without writing twenty breakpoints.

   • The new CSS

     Nesting, :has(), subgrid, view transitions. Features that meaningfully change how you write styles.

   • Styling at scale

     How teams keep CSS maintainable past ten thousand lines.

4. 04JavaScript In Depth

   The language, not just the framework's dialect of it.

   • Language fundamentals

     Types, coercion, scope, closures. The base layer every framework sits on.

   • Async JavaScript

     Callbacks, promises, async/await and the event loop that schedules them all.

   • DOM & browser APIs

     Direct DOM work still matters — for performance, for libraries, and for the days the framework gets in your way.

   • Fetch, JSON & APIs

     Talking to servers: REST conventions, error handling, and CORS — the error everyone hits in week one.

   • Modules & tooling

     How your source becomes a bundle the browser can run fast.

5. 05TypeScript

   The default for professional frontend work.

   • Types & interfaces

     Getting real safety without fighting the compiler.

   • Generics & utility types

     Where TypeScript stops being annotation and starts being leverage.

   • TypeScript with React

     Typing props, state, refs, events and hooks without drowning in angle brackets.

6. 06React & Frameworks

   The component model that runs most of the modern web.

   • Components, props & state

     The mental model: UI as a function of state.

   • Hooks in depth

     Effects, refs, memoisation — and the discipline to use far fewer effects than you think you need.

   • Server Components & streaming

     The largest shift in React since hooks: components that render on the server and ship zero JavaScript.

   • State management

     Most apps need far less global state than they end up with. Learn the ladder before reaching for a library.

   • Meta-frameworks

     Routing, data fetching, rendering strategies and deployment, solved for you.

   • Beyond Reactoptional

     Knowing a second framework makes you better at the first.

7. 07Quality & Performance

   What turns a working site into a professional one.

   • Testing

     Test behaviour, not implementation. A small, trustworthy suite beats a large, brittle one.

   • Core Web Vitals

     LCP, INP and CLS are what Google measures and what users feel.

   • Images, fonts & assets

     Usually the single biggest performance win available on any real site.

   • Frontend security

     The browser-side half of application security.

   • DevTools mastery

     Fluency here compounds daily for the rest of your career.

8. 08Ship & Grow

   Code that lives on a laptop helps nobody.

   • Git & collaboration

     Version control is the shared language of every engineering team.

   • CI/CD & deployment

     Automated checks and one-command deploys.

   • Monitoring & analytics

     You cannot improve what you do not measure in production.

   • Portfolio & career

     Three deployed projects with real README files beat any certificate.