A curated list of frontend resources from very basic to advance. Feel free to add new resources!
- Code Editor
- Code Hosting Platforms
- Version Control Tool
- HTML
- CSS
- JavaScript
- APIs
- React
- Next.js
- Firebase
- Frontend Development (Complete)
- Jobs
| Name | Description | Status |
|---|---|---|
| Visual Studio Code | A free and open source code editor for the cloud. | free |
| Sublime Text | A sophisticated, open source text editor for code, markup and prose. | free |
| Atom | A hackable text editor for the 21st Century | free |
| Vim | Vim is a highly configurable text editor built to make creating and changing any kind of text very efficient. | free |
| Notepad++ | Notepad++ is a text and source code editor for use with Microsoft Windows. | free |
| Brackets | With focused visual tools and preprocessor support, Brackets is a modern text editor that makes it easy to design in the browser. | free |
| Name | Description | Status |
|---|---|---|
| Visual Studio Code Crash Course | In this course you will learn how to use this popular code editor. You will also learn tips and tricks to make it even easier to use. | Free |
The following are some useful extensions for Visual Studio Code:
| Name | Description | Status |
|---|---|---|
| RapidAPI Client | RapidAPI Client is a full-featured HTTP client that lets you test and describes the APIs you build or consume. Designed to work with your VS Code themes, RapidAPI Client makes composing requests, inspecting responses, generating code, and types for application development simple and intuitive. | free |
| Material Icon Theme | Material Design Icons for Visual Studio Code | free |
| Shades of Purple | 🦄 A professional theme suite with hand-picked & bold shades of purple for your VS Code editor and terminal apps. One of the excellent, most downloaded, and top-rated VSCode Themes on the marketplace. Part of VSCode.pro course. | free |
| Project Manager | Easily switch between projects | free |
| Simple React Snippets | Dead simple React snippets you will actually use | free |
| Auto Rename Tag | Auto rename paired HTML/XML tag | free |
| Code Runner | Run C, C++, Java, JS, PHP, Python, Perl, Ruby, Go, Lua, Groovy, PowerShell, CMD, BASH, F#, C#, VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml, R, AppleScript, Elixir, VB.NET, Clojure, Haxe, Obj-C, Rust, Racket, Scheme, AutoHotkey, AutoIt, Kotlin, Dart, Pascal, Haskell, Nim | free |
| ES7+ React/Redux/React-Native snippets | Extensions for React, React-Native and Redux in JS/TS with ES7+ syntax. Customizable. Built-in integration with prettier. | free |
| ESLint | Integrates ESLint JavaScript into VS Code. | free |
| JavaScript (ES6) code snippets - Visual Studio Marketplace | Code snippets for JavaScript in ES6 syntax | free |
| Live Server | Launch a development local Server with live reload feature for static & dynamic pages | free |
| Better Comments | Improve your code commenting by annotating with alert, informational, TODOs, and more! | free |
| CSS Peek | Allow peeking to css ID and class strings as definitions from html files to respective CSS. Allows peek and goto definition. | free |
| GitLens | Supercharge Git within VS Code — Visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly navigate and explore Git repositories, gain valuable insights via rich visualizations and powerful comparison commands, and so much more | free |
| Prettier | An opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary. | free |
| Advanced New file | Create files anywhere in your workspace from the keyboard | free |
| Name | Description | Status |
|---|---|---|
| GitHub | GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere | free/paid |
| GitLab | GitLab is an open source code repository and collaborative software development platform for large DevOps and DevSecOps projects. | free/paid |
| BitBucket | BitBucket is a Git-based source code repository hosting service owned by Atlassian. It manages all your professional needs from code to deployment. | free/paid |
| Name | Description | Status |
|---|---|---|
| What is GitHub? | Ever wondered how GitHub works? Let's see how Eddie and his team use GitHub. | free |
| Learn Github in 20 Minutes | Learn how to use Git & Github to share code and collaborate with other developers. This video covers: creating github repos, pushing & pulling, cloning, forking, making pull requests, and open-source contribution workflows. | free |
| Name | Description | Status |
|---|---|---|
| Git | Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. | free |
| Name | Description | Status |
|---|---|---|
| Git & GitHub Crash Course For Beginners | In this Git tutorial we will talk about what exactly Git is and we will look at and work with all of the basic and most important commands such as add, commit, status, push and more. This tutorial is very beginner friendly. | free |
| Learn Git | A guided tour that walks through the fundamentals of Git, inspired by the premise that to know a thing is to do it. | free |
| Git Commands and Workflows | The git commands & workflows you need to know to work with git and automate your regular commands. | free |
| Git for Professionals Tutorial | Git has the power to make you a better software developer. But you'll have to go beyond the basic "commit, push, pull" to use it effectively! In this course, we'll look at some of the more advanced concepts and tools to make you more productive and confident with Git. | free |
| Name | Description | Status |
|---|---|---|
| What is HTML? | HTML Tutorial for Beginners - Learn HTML for a career in web development. This HTML tutorial teaches you everything you need to get started. | free |
| HTML Crash Course For Absolute Beginners | In this crash course I will cram as much about HTML that I can. This is meant for absolute beginners. If you are interested in learning HTML but know nothing, then you are in the right place. We will be creating a cheat sheet with all of the common HTML5 tags, attributes, semantic markup, etc. | free |
| Legacy Responsive Web Design | In this Responsive Web Design Certification, you'll learn the languages that developers use to build webpages: HTML (Hypertext Markup Language) for content, and CSS (Cascading Style Sheets) for design. | free |
| Learn HTML | You will learn all the common HTML tags used to structure HTML pages, the skeleton of all websites. You will also be able to create HTML tables to present tabular data efficiently. | free |
| HTML 5 Tutorial For Beginners(With Notes) | In this video, you'll learn how to create beautiful websites using Html. HTML is the language used for website design. This course on html will teach you everything you need to learn about html tags, lists, tables, seo etc. | free |
| HTML and CSS Tutorial for 2021 - COMPLETE Crash Course! | Complete crash course to learn HTML and CSS | free |
| HTML Crash Course | The foundational HTML knowledge you need to ace frontend interviews. | paid |
| Name | Description | Status |
|---|---|---|
| CSS Crash Course For Absolute Beginners | In this video I will cram as much as possible about CSS. We will be looking at styles, selectors, declarations, etc. We will build a CSS cheat sheet that you can keep as a resource and we will also create a basic website layout. We are using CSS3 but mostly the basics. | free |
| Learn Flexbox in 15 Minutes | In this video we will cover everything you need to know about CSS flexbox in only 15 minutes. We will cover what flexbox is, how flexbox works, and the different properties you can use to layout and style your flexbox containers. Flexbox is one of the most important and useful layout properties in all of CSS, and is luckily quite easy to understand once you wrap your head around the terminology. We will be covering all of the terminology, by going through live examples of all the different flexbox properties. | free |
| HTML and CSS Tutorial for 2021 - COMPLETE Crash Course! | Complete crash course to learn HTML and CSS | free |
| Learn CSS | You will learn many aspects of styling web pages! You’ll be able to set up the correct file structure, edit text and colors, and create attractive layouts. With these skills, you’ll be able to customize the appearance of your web pages to suit your every need! | free |
| Learn CSS Grid the easy way | It can be easy to get bogged down in how grid works, with a lot of new properties, values, and even units! So let's try and simplify things as much as possible, because to get started, you don't need to know everything about how Grid works. | free |
| Tailwind CSS | A utility-first CSS framework to Rapidly build modern websites without ever leaving your HTML. | free |
| Name | Description | Status |
|---|---|---|
| Node.js | Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. | free |
| Deno | A modern runtime for JavaScript and TypeScript | free |
| Name | Description | Status |
|---|---|---|
| Learn JavaScript - Full Course for Beginners | This complete 134-part JavaScript tutorial for beginners will teach you everything you need to know to get started with the JavaScript programming language. | free |
| JavaScript DOM Crash Course - Part 1 | This crash course focuses on the DOM WITHOUT JQUERY. In this part we will talk about what the JavaScript DOM (Document Object Model). We will also look at how to change content and styles via these selectors | free |
| JavaScript DOM Crash Course - Part 2 | In this video we will learn how to traverse and move around the DOM with properties like parentNode, parentElement, nextElementSibling and so on. We will also learn how to insert elements with createElement() and createTextNode(). | free |
| JavaScript DOM Crash Course - Part 3 | In this lesson in the JavaScript DOM, we will be looking at different events and how to attach them to DOM elements with addEventListener(). | free |
| JavaScript DOM Crash Course - Part 4 | In this video we will take what we learned in the last 3 videos and create a simple Item lister project where we can add list items with a form, delete them and filter through them all with vanilla JavaScript and DOM properties and methods. | free |
| Async Javascript Tutorial For Beginners (Callbacks, Promises, Async Await) | Asynchronous JavaScript crash course | free |
| Learn JavaScript | You will learn programming fundamentals and basic object-oriented concepts using the latest JavaScript syntax. The concepts covered in these lessons lay the foundation for using JavaScript in any environment. | free |
| JavaScript Algorithms and Data Structures | In the JavaScript Algorithm and Data Structures Certification, you'll learn the fundamentals of JavaScript including variables, arrays, objects, loops, and functions. | free |
| Learn JavaScript for free | Learn the basics of JavaScript by solving 140+ interactive coding challenges and building three fun projects. | free |
| JavaScript Info | Learn modern JavaScript topics from basics to advance with simple and detailed explanations. | free |
| Name | Description | Status |
|---|---|---|
| Introduction to APIs | The Application Programming Interface (API) is like a middle man, connecting two sides; a waiter takes your order and brings you food. It is a channel that applications utilize to talk with each other. You put some information at one end, the API takes that information and gets back with a result. | free |
| Carefully curated guides around APIs | Guides by RapidAPI offer short and long form API Development content with interactive examples and visuals to help you become a pro API Developer. | free |
| Carefully curated interactive API learn labs | RapidAPI Learn: API Development using fun challenges (with solutions!) and interactive examples. Learn REST APIs · Learn GraphQL APIs · Learn AsyncAPI. | free |
| Learn APIs but with Comics | Comics By RapidAPI to teach different API concepts | free |
| RapidAPI Hub | Browse, Test & Connect to 1000s of Public Rest APIs on RapidAPI's API Hub - the world's largest API directory. Sign up today for Free! | free/freemium/paid |
| RapidAPI Studio | All in one API management platform. | free/paid |
| RapidAPI Learn | RapidAPI Learn: API Development using fun challenges (with solutions!) and interactive examples. | free |
| Name | Description | Status |
|---|---|---|
| React Course - Beginner's Tutorial for React JavaScript Library 2022 | Learn React by building eight real-world projects and solving 140+ coding challenges. | free |
| Mastering React | Understand React inside out and boost your career prospects | paid |
| Tutorial: Intro to React | We will build a small game during this tutorial. The techniques you’ll learn in the tutorial are fundamental to building any React app, and mastering it will give you a deep understanding of React. | free |
| Learn React | You’ll develop a strong understanding of React’s most essential concepts: JSX, class and function components, props, state, lifecycle methods, and hooks. You’ll be able to combine these ideas in React’s modular programming style. | free |
| React Hooks Course - All React Hooks Explained | This course explains each react hook in detail. After this you'll developed a strong understanding of react hooks. | free |
| Name | Description | Status |
|---|---|---|
| Create a Next.js App | This free interactive course will guide you through how to get started with Next.js. | free |
| Next.js Crash Course for Beginners 2021 - Learn NextJS from Scratch in this 100% Free Tutorial! | Learn all about Next.js, React's most popular Production Framework! Get Started with NextJS and make build amazing websites with ReactJS even more fun! Full Project included, 100% free 3 hours long course! | free |
| Next.js for Beginners - Full Course | Learn how to get started and get proficient with Next.js. | free |
| Static Blog With Next.js and Markdown | Create a basic blog using Next.js and Markdown. | free |
| Name | Description | Status |
|---|---|---|
| Firebase CLI | The Firebase CLI provides a variety of tools for managing, viewing, and deploying to Firebase projects. | free |
| Name | Description | Status |
|---|---|---|
| Getting Started with Firebase v9 | A comprehensive firebase tutorial series to get started with firebase v9. This series cover firebase auth and firestore database. | free |
| Name | Description | Status |
|---|---|---|
| Meta Front-End Developer | Launch your career as a front-end developer. Build job-ready skills for an in-demand career and earn a credential from Meta. No degree or prior experience required to get started. | free |
| Frontend Masters Learning Paths | Guided paths to expand your abilities as a well-rounded web developer from beginner to expert levels! You can claim free 6-months access to all courses and workshops from GitHub Student Developer Pack. | paid |
| Name | Description | Status |
|---|---|---|
| Frontend Jobs | Remote frontend engineer jobs on LinkedIn | remote |
| Frontend Jobs at RemoteOk | remote 🎨 Frontend Jobs – work anywhere, live anywhere #OpenSalaries | remote |
| Frontend Jobs at flexjobs | Find Remote, Hybrid, & Flexible Frontend Jobs | remote |
| Frontend Jobs at We Work Remotely | Find your next career at one of the best remote companies in the world 🌎 | remote |
| Frontend Jobs at Turing.com | Remote frontend engineer jobs on Turing.com | remote |
- MIT © Saad Irfan
- Code of Conduct