Sefism is free for learners. We are here to help you grow, one step at a time.Join for free
Sefism.

Frontend resources for developers

Frontend resources for developers, each with a researched write-up on what it covers and who it suits. Never an affiliate placement.

  • 1418 picks
  • 1240 free

115 resources ยท page 1 of 5

Video
Traversy Media (YouTube channel)

Brad Traversy's long-running channel of practical web development tutorials: HTML, CSS and JavaScript crash courses, React and Vue, Node.js, Python and PHP back ends, and many full project builds. The style is calm, project-first and easy to follow. It suits beginners and self-taught developers who learn best by building a complete app alongside the video.

  • Web
  • Backend
  • Programming
  • Frontend
Brad Traversy (Traversy Media) ยท Web Development ยท Self-paced ยท Beginner
Video
Fireship (YouTube channel)

Fast, dense, funny videos by Jeff Delaney on web development, programming languages, AI tools and tech news. Home of the 100 Seconds of Code explainers and The Code Report. It suits any developer who wants a quick, accurate picture of a tool or a trend before deciding whether to spend real time on it.

  • Web
  • Programming
  • Frontend
  • AI
Jeff Delaney (Fireship) ยท Web Development ยท Self-paced
Cheat sheet
Sefism Frontend Development Cheat Sheet

A quick-revision companion to the Sefism frontend roadmap in ten chapters: how the web works, semantic HTML and accessibility, CSS layout, JavaScript the language and in the browser, Git and build tooling, your framework, TypeScript and testing, performance and security, and shipping a real product. It comes in React with Next.js, Vue with Nuxt and Angular editions, each concept with a short example and the common mistake. Skim a chapter before a project or a technical conversation, and follow the links when a concept needs depth.

  • Web
  • Frontend
  • Programming
Sefism ยท Web Development ยท Reference
Roadmap
Sefism Full Stack Development Roadmap

A seven-stage plan for building and running a complete web product on your own, in Next.js, MERN, Django with React, or Spring Boot with React: web foundations, Git and React, the server side, data modelling in PostgreSQL or MongoDB, APIs with authentication and caching, deployment to Linux or AWS with CI/CD, and one shipped product with real users. It suits developers who want to own a product end to end. By the end you can model data, build a secure API and UI, deploy it and ship every change through a pipeline.

  • Web
  • Frontend
  • Backend
  • Databases
Sefism ยท Web Development ยท About 445 hours, 58 weeks at 8 hours a week ยท Intermediate
Video
Chai aur Code (YouTube channel)

Hitesh Choudhary's Hindi-language channel, popular with learners across India and Pakistan: JavaScript, TypeScript, full stack Next.js projects, Django, Java and Spring Boot, mobile development, Git and AI, taught in a relaxed chat-over-tea style. It suits beginners and students who learn more comfortably in Hindi or Urdu and want long, project-based series.

  • Web
  • Programming
  • Frontend
Hitesh Choudhary ยท Web Development ยท Self-paced ยท Beginner
Cheat sheet
The A11Y Project Checklist

A community-maintained, plain-language accessibility checklist organised by area: content, global code, keyboard, images, headings, lists, controls, tables, forms, media, appearance, animation, colour contrast and mobile and touch. A practical pre-release check for designers and developers.

  • Web
  • Frontend
The A11Y Project ยท Web Development ยท Beginner
GitHub repo
shadcn/ui

A set of well-designed, accessible components you copy into your own project rather than install as a locked package, so you own and edit the code. Popular with React developers who want a good-looking starting point for their own design system.

  • Web
  • Frontend
shadcn ยท Web Development ยท Intermediate
Roadmap
Sefism Frontend Development Roadmap

A seven-stage plan from how the web works to a shipped product: HTML and CSS, JavaScript and the browser, Git and build tooling, your framework (React with Next.js, Vue with Nuxt, or Angular), TypeScript and testing, performance, accessibility and security, then a real product with real users. It suits beginners, career switchers and backend developers filling in the browser side. By the end you can ship a typed, tested, accessible and fast app, deployed with CI and real people using it.

  • Web
  • Frontend
  • Programming
  • Testing
Sefism ยท Web Development ยท About 395 hours, 52 weeks at 8 hours a week ยท Beginner
Video
CodeWithHarry (YouTube channel)

One of the largest programming channels in South Asia, teaching in Hindi: the Sigma Web Development Course, a 100 Days of Code Python course, and series on JavaScript, React, Next.js, Tailwind CSS, Java, C, C++, PHP, Django and deployment on a VPS. Videos are quick, practical and beginner first. It suits students in India and Pakistan starting from zero who learn best in Hindi or Urdu.

  • Web
  • Programming
  • Frontend
CodeWithHarry ยท Web Development ยท Self-paced ยท Beginner
Guide
Patterns.dev

Patterns.dev is a free site and book by Lydia Hallie and Addy Osmani that explains design, rendering and performance patterns for modern web apps, with examples in vanilla JavaScript, React and Vue. It covers classic patterns such as Observer and Factory, plus server rendering, streaming, React Server Components, bundle splitting and prefetching. It suits developers who can build features but want to understand why an app is structured and loads the way it does.

  • Web
  • Frontend
  • Programming
Lydia Hallie and Addy Osmani ยท Web Development ยท Intermediate
Video
Kevin Powell (YouTube channel)

Kevin Powell's channel is one of the best known places on YouTube to learn CSS properly: layout, responsive design, the cascade and specificity, units, container queries, view transitions and new CSS features, plus semantic HTML and forms. Weekly videos and shorts. It suits anyone who can write CSS but still fights it, from beginners to experienced frontend developers.

  • Web
  • Frontend
Kevin Powell ยท Web Development ยท Self-paced
Guide
Tailwind CSS Documentation

The official documentation for Tailwind CSS v4, the utility-first CSS framework. It covers installation (a Vite plugin, PostCSS, the CLI and framework guides), core concepts such as states, responsive design, dark mode and theme variables, and a page for every utility showing exactly the CSS each class produces. It suits frontend developers using Tailwind, who should keep it open while building, and anyone moving a project from Tailwind v3 to v4.

  • Web
  • Frontend
Tailwind Labs ยท Web Development
Course
Grokking JavaScript Fundamentals

A beginner JavaScript course that starts at hello world and needs no prior programming. Across 10 chapters and 41 text lessons it covers variables, operators, conditionals, objects, functions, strings, arrays, every loop form, and Maps and Sets, with 114 in-browser playgrounds and 39 quiz questions. It suits someone who wants a structured first language for web development and prefers reading and running code to watching videos.

  • Web
  • Programming
  • Frontend
Design Gurus ยท Web Development ยท Beginner
Cheat sheet
Sefism Full Stack Development Cheat Sheet

A quick-revision companion to the Sefism full stack roadmap in seven chapters: web foundations, Git, npm and React, the server side, data modelling, APIs with authentication and caching, deployment with CI/CD, Linux and AWS, and shipping a complete product. It comes in Next.js, MERN, Django and React, and Spring Boot and React editions, so the server and database chapters match your stack. Skim a chapter before a project or a technical conversation, and use it as a checklist before you ship.

  • Web
  • Frontend
  • Backend
  • Databases
Sefism ยท Web Development ยท Reference ยท Intermediate
Guide
MDN Web Docs

MDN Web Docs is Mozilla's open, community-maintained reference for HTML, CSS, JavaScript, HTTP and browser APIs, with browser compatibility tables on every page and a structured Learn area for beginners. It is free, and a paid MDN Plus tier adds extras such as AI help and collections. It suits every web developer, from someone writing their first page to a senior engineer checking exactly how an API behaves across browsers.

  • Web
  • Frontend
  • Programming
Mozilla ยท Web Development ยท Ongoing reference
Course
The Odin Project

The Odin Project is a free, open source full stack web development curriculum. After a Foundations course, you choose a Full Stack JavaScript path (HTML and CSS, JavaScript, React, databases and Node.js with Express) or a Full Stack Ruby on Rails path. You set up your own environment, read real documentation and build specified projects rather than coding in a sandbox. It suits self-taught beginners and career changers who want a complete path and are prepared to work hard.

  • Web
  • Frontend
  • Programming
  • Backend
The Odin Project ยท Web Development ยท 6 to 12 months ยท Beginner
Course
Full Stack Open

Full Stack Open is the University of Helsinki's free online course in modern web development. Through a long sequence of exercises it covers React, Node.js with Express, MongoDB, testing, state management, GraphQL, TypeScript, React Native, CI/CD, containers and relational databases. A certificate and even official university credits are available free. It suits developers who can already program and want a rigorous, current full stack curriculum.

  • Web
  • Frontend
  • Backend
  • Programming
University of Helsinki ยท Web Development ยท 3 to 6 months ยท Intermediate
Platform
freeCodeCamp

freeCodeCamp is a nonprofit that offers a free, browser-based coding curriculum with certifications, covering responsive web design, JavaScript, front end libraries, Python, relational databases and back end development. Its new Certified Full Stack Developer path adds exams and a capstone. There is no cost, no local setup and immediate feedback on every step. It suits complete beginners and anyone unsure whether they will enjoy programming, as the lowest barrier way to start.

  • Web
  • Programming
  • Frontend
freeCodeCamp ยท Web Development ยท Self paced, hundreds of hours ยท Beginner
Guide
JavaScript.info

The Modern JavaScript Tutorial by Ilya Kantor is a free online course that teaches JavaScript from the basics through objects, prototypes, closures, classes, promises, async/await and modules, then covers the browser's document model and events. Most chapters end with tasks and solutions. It suits beginners who want a thorough written path and developers whose JavaScript came from framework tutorials and who keep hitting confusing bugs.

  • Web
  • Programming
  • Frontend
Ilya Kantor ยท Web Development ยท 2 to 3 months
GitHub repo
You Don't Know JS Yet

Kyle Simpson's book series on how JavaScript actually works, free to read on GitHub, covering scope, closures, the object system and types in real depth. It is for developers who already write JavaScript every day and keep hitting behaviour they cannot explain. Read it when you want to understand the rules behind closures, this and coercion instead of memorising workarounds.

  • Web
  • Programming
  • Frontend
Kyle Simpson ยท Web Development ยท 2 to 4 months ยท Advanced
Guide
React Documentation

The official React documentation at react.dev is a full course as well as a reference. Its Learn track moves from a quick start through describing the UI, adding interactivity, managing state and escape hatches, with interactive sandboxes and challenges on nearly every page. It suits anyone learning React and any React developer whose habits come from older class-based tutorials, and it should be read before paying for a React course.

  • Web
  • Frontend
  • Programming
Meta ยท Web Development ยท 1 to 2 weeks
Course
Next.js Learn

Next.js Learn is Vercel's free official course platform. Its main course builds a full-stack financial dashboard in 16 chapters, covering styling, fonts and images, layouts, navigation, a Postgres database, data fetching, static and dynamic rendering, streaming, search and pagination, mutations with server actions, error handling, accessibility, authentication and metadata. It suits React developers moving to Next.js and anyone confused about where server code ends and client code begins.

  • Web
  • Frontend
  • Programming
Vercel ยท Web Development ยท 1 to 2 weeks ยท Intermediate
Guide
web.dev

web.dev is written by members of Google's Chrome team and outside experts, and covers web performance, accessibility and modern browser features. It hosts free structured courses such as Learn HTML, Learn CSS, Learn JavaScript, Learn Performance and Learn Accessibility. It suits front end developers who need to understand Core Web Vitals, make pages faster and more accessible, or check whether a new platform feature is safe to use.

  • Web
  • Frontend
  • Programming
Google ยท Web Development ยท Ongoing reference ยท Intermediate
Platform
Frontend Mentor

Frontend Mentor gives you professional designs and a written brief for 120+ real world front end and full stack projects across five difficulty levels, then lets you submit your solution for community and AI code review. Free challenges come with design images and one AI review a month; Pro adds Figma files, premium challenges and unlimited AI reviews. It solves the problem of not knowing what to build once tutorials run out.

  • Web
  • Frontend
  • Programming
Frontend Mentor ยท Web Development ยท Ongoing ยท Beginner

Browse the library by topic and format

Every one of these is its own page: a roadmap shelf, an interview-prep shelf, the free-only view. The filters above do the same thing without a page load.

Work with me

Stuck on something specific?

Writing only gets you so far. If you want an answer to your situation rather than the general case, book a session and we will work through it together. Sessions are free for approved Sefism members, and a few slots open each week.

  • 1:1 Mentorship
  • Fresh Graduate Mentorship
  • Career Guidance

Brand deals, promos and partnerships: tauseeffayyaz@gmail.com