Skip to content

A list of frontend resources from very basic to advance. Feel free to add new resources!

License

Notifications You must be signed in to change notification settings

msaaddev/frontend-resources

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

46 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

cover image

A curated list of frontend resources from very basic to advance. Feel free to add new resources!

separator

Code Editor

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

Resources

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

Extensions

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

Code Hosting Platforms

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

Resources

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

Version Control Tool

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

Resources

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

HTML

Resources

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

CSS

Resources

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

JavaScript

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

Resources

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

APIs

Resources

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

React

Resources

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

Next.js

Resources

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

Firebase

Name Description Status
Firebase CLI The Firebase CLI provides a variety of tools for managing, viewing, and deploying to Firebase projects. free

Resources

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

Frontend Development (Complete)

Resources

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

Jobs

Resources

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

Contributors

contributors

License & Conduct