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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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.
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
Follow along
New writing, resources and project ideas land here first.