Frontend development

Steps

How the web works and HTML

1. 1 How browsers load a pageLearn how a browser requests, parses and renders a page, giving every later topic a mental model to attach to.

   • MDN Web Docs developer.mozilla.orgfree

     Comprehensive documentation repository and reference database for open web standards, HTML, CSS, and browser APIs.

   • High Performance Browser Networking hpbn.cofree

     Free online book by Ilya Grigorik detailing TCP, UDP, TLS, HTTP/2, and modern networking protocols vital for backend performance.

   I finished this step
2. 2 Semantic HTMLWrite well-structured documents with meaningful elements, because structure drives accessibility, search engines and later styling.

   • web.dev Learn web.devfree

     Guided courses created by Google covering modern HTML semantics, CSS layouts, responsive design, and web accessibility.

   • W3C Nu Html Checker validator.w3.orgfree

     Official validator maintained by the W3C to check HTML, XHTML, and SVG documents against living web standards and specifications.

   • WHATWG Standards whatwg.orgfree

     Community maintaining Living Standards for HTML and the DOM in collaboration with major browser vendors.

   I finished this step

Styling with CSS

1. 3 CSS fundamentalsUnderstand the cascade, specificity, the box model and units so styles behave predictably instead of by trial and error.

   • web.dev Learn web.devfree

     Guided courses created by Google covering modern HTML semantics, CSS layouts, responsive design, and web accessibility.

   • CSS-Tricks css-tricks.comfree

     Extensive archive of tutorials, guides, and articles exploring modern CSS layouts, web design patterns, and front-end code.

   I finished this step
2. 4 Layout with Flexbox and GridPractise the two modern layout systems, which replace old float hacks and handle most page and component layouts.

   • CSS-Tricks css-tricks.comfree

     Extensive archive of tutorials, guides, and articles exploring modern CSS layouts, web design patterns, and front-end code.

   • freeCodeCamp Responsive Web Design freecodecamp.orgfree

     Interactive online curriculum and project-based certification teaching HTML, CSS, Flexbox, CSS Grid, and responsive layout techniques.

   I finished this step
3. 5 Responsive designMake pages adapt to any screen with fluid layouts, media queries and responsive images, since most visitors browse on phones.

   • freeCodeCamp Responsive Web Design freecodecamp.orgfree

     Interactive online curriculum and project-based certification teaching HTML, CSS, Flexbox, CSS Grid, and responsive layout techniques.

   • Learning Web Design learningwebdesign.compaid

     Comprehensive beginner-to-intermediate guide by Jennifer Robbins explaining HTML, modern CSS styling, web graphics, and responsive design.

   I finished this step
4. 6 Experiment and find inspiration (optional)See how the same markup can take radically different looks, and try small ideas quickly in an online editor.

   • CSS Zen Garden csszengarden.comfree

     Classic educational demonstration illustrating the power and versatility of CSS by applying diverse visual stylesheets to a fixed HTML document.

   • CodePen codepen.iofreemium

     Online code editor and social development environment for designing, experimenting with, and showcasing HTML, CSS, and JavaScript front-end code.

   • Codrops tympanus.netfree

     Web design and development blog that publishes tutorials and experimental creative interaction concepts for web interfaces.

   I finished this step

Interactivity and quality

1. 7 JavaScript and the DOMUse JavaScript to read and change the page and respond to events, the basis of every interactive interface.

   • MDN Web Docs developer.mozilla.orgfree

     Comprehensive documentation repository and reference database for open web standards, HTML, CSS, and browser APIs.

   • The Odin Project Foundations theodinproject.comfree

     Open-source curriculum teaching the fundamentals of modern web design, HTML, CSS styling, and developer workflows.

   I finished this step
2. 8 AccessibilityApply WCAG principles and inclusive patterns so people using keyboards, screen readers or magnification can use what you build.

   • W3C Web Content Accessibility Guidelines (WCAG) w3.orgfree

     Official international web standards providing technical recommendations to make web content accessible to individuals with disabilities.

   • Inclusive Components inclusive-components.designfree

     Pattern library and book by Heydon Pickering detailing how to construct robust, accessible, and inclusive interface components.

   • WAVE Web Accessibility Evaluation Tool wave.webaim.orgfree

     Web accessibility suite providing visual feedback on WCAG compliance issues directly within rendered web pages.

   I finished this step
3. 9 Browser compatibilityCheck which features each browser supports before relying on them, and follow how the platform keeps evolving.

   • Can I use caniuse.comfree

     Up-to-date browser support tables and compatibility database for modern front-end web design technologies and CSS standards.

   • Mozilla Hacks hacks.mozilla.orgfree

     Mozilla's blog for web developers, covering new browser features, web standards, performance and tooling changes in Firefox and the wider web platform.

   I finished this step
4. 10 Web performanceMeasure loading and rendering speed with real tools, then fix the bottlenecks that most affect Core Web Vitals.

   • Google PageSpeed Insights pagespeed.web.devfree

     Diagnostic performance analysis tool reporting Core Web Vitals and actionable optimization recommendations for web pages.

   • WebPageTest webpagetest.orgfreemium

     Detailed website speed testing tool measuring load performance, network visual progress, and rendering waterfalls across diverse browsers.

   • Jank Busting for Better Rendering Performance web.devfree

     Article explaining why browser animations stutter and how to use requestAnimationFrame and related techniques to keep rendering smooth, aimed at front-end developers.

   I finished this step

Tooling and frameworks

1. 11 Version control with GitTrack changes, branch safely and collaborate through Git, a daily tool on every professional frontend team.

   • Git Documentation & Pro Git Book git-scm.comfree

     Official comprehensive documentation manual, tutorials, and full online text of the Pro Git book.

   • The Missing Semester of Your CS Education missing.csail.mit.edufree

     Free practical computer science course by MIT teaching shell tools, editors, version control, and computing environment mastery.

   I finished this step
2. 12 Packages and build toolsInstall dependencies from npm and use a fast dev server and bundler to organise larger projects.

   • npm Registry npmjs.comfree

     World's largest software registry database hosting over two million reusable JavaScript and TypeScript packages.

   • Vite vite.devfree

     Next-generation frontend tooling providing an ultrafast development server and optimized Rollup build bundling.

   I finished this step
3. 13 A component frameworkLearn one component-based library to build complex interfaces from small reusable pieces with predictable state.

   • React react.devfree

     The library for web and native user interfaces developed and maintained by Meta and the open-source community.

   • Vue.js vuejs.orgfree

     Progressive JavaScript framework for building user interfaces with an approachable, performant, and versatile core.

   I finished this step
4. 14 Utility-first CSS (optional)Try composing designs from small utility classes, a popular alternative to writing custom stylesheets for every component.

   • Tailwind CSS tailwindcss.comfree

     Utility-first CSS framework packed with classes that can be composed to build any design directly in markup.

   I finished this step