Skip to content
56

The most essential list of resources for Front-End beginners (๐Ÿ‡บ๐Ÿ‡ธ & ๐Ÿ‡ซ๐Ÿ‡ท)

๐Ÿ’ฏ The most essential list of resources for Front-End beginners (๐Ÿ‡บ๐Ÿ‡ธ & ๐Ÿ‡ซ๐Ÿ‡ท)

4.1k stars406 forks155 entriesLast push Dec 21, 2024 (1 year ago)License MIT

This page lists names, links and short descriptions. The original list on GitHub is the source and belongs to its authors.

Start here

How Does the Internet Actually Work?

๐Ÿ“น ๐Ÿ”

What is Internet?

๐Ÿ“น ๐Ÿ”

How does the internet work? - Part 1 (It's like a bad drawing.)

๐Ÿ“น

How Does the Internet Work?

๐Ÿ“น

How the Internet Works for Developers - Pt 1 - Overview & Frontend

๐Ÿ“น

Learn HTML

Learn HTML - CodeCademy

๐Ÿ’ฐ๐Ÿ†“ ๐Ÿ“น ๐Ÿ”

In 2 lists

HTML5 and CSS - FreeCodeCamp

๐Ÿ†“ ๐Ÿ”

MarkSheet - A free HTML & CSS tutorial

๐Ÿ†“ ๐Ÿ”

Intro to HTML/CSS: Making webpages - KhanAcademy

๐Ÿ†“

Learn the Web

๐Ÿ†“

HTML5 Introduction - EDX

๐Ÿ†“

HTML - Creating basic web pages

๐Ÿ†“

Learn to code HTML & CSS - Shay Howe

๐Ÿ†“

HTML Tutorials

๐Ÿ†“

Intro to HTML and CSS - Udacity

๐Ÿ†“

Learn HTML in 12 minutes - Youtube

๐Ÿ†“ ๐Ÿ“น

Learn HTML in 30 Minutes - Youtube

๐Ÿ†“ ๐Ÿ“น

HTML Fundamentals - SoloLearn

๐Ÿ’ฐ๐Ÿ†“

HTML Basics - TreeHouse

๐Ÿ’ฐ ๐Ÿ“น

HTML/CSS Path - Code School

๐Ÿ’ฐ ๐Ÿ“น

HTML Essential Training - Lynda

๐Ÿ’ฐ ๐Ÿ“น

Your First Day with HTML - Pluralsight

๐Ÿ’ฐ ๐Ÿ“น

HTML Fundamentals - Pluralsight

๐Ÿ’ฐ ๐Ÿ“น

Introduction to HTML and CSS - TreeHouse

๐Ÿ’ฐ

In 2 lists

Introduction to HTML5 and CSS3 - Frontend Masters

๐Ÿ’ฐ ๐Ÿ“น

HTML/CSS on Code Avengers

๐Ÿ’ฐ๐Ÿ†“

30 Days to Learn HTML & CSS

๐Ÿ’ฐ๐Ÿ†“ ๐Ÿ“น

Introduction to HTML

๐Ÿ†“ ๐Ÿ“น

HTML5 Tutorial - w3schools

๐Ÿ†“

AlgoExpert's Front-end Expert Course

๐Ÿ’ฐ

HTML Reference

๐Ÿ”

Introduction to HTML - MDN web docs

๐Ÿ”

HTML Cheat Sheet - Compilation

In 2 lists

HTML5 Tutorial PDF - Tutorialspoint

Getting to Know HTML - Shay Howe

The Elements of HTML

SEO, Speed and Security Best Practices - Checkbot

HTML Best Practices - Github

(cc0) - For writing maintainable and scalable HTML documents

In 2 lists

LearnYouHTML - NodeSchool

HTML Quiz beginner level - Skillvalue

Learn to Code HTML and CSS: Develop and Style Websites

HTML and CSS: Design and Build Websites

In 2 lists

Learn HTML >Learn CSS

Learn CSS - CodeCademy

๐Ÿ’ฐ๐Ÿ†“ ๐Ÿ”

In 2 lists

Learn CSS in 12 Minutes - Youtube

๐Ÿ†“ ๐Ÿ“น

CSS Basics - TreeHouse

๐Ÿ’ฐ ๐Ÿ“น

In 2 lists

Introduction to CSS

๐Ÿ’ฐ ๐Ÿ“น

CSS3 In-Depth

๐Ÿ’ฐ ๐Ÿ“น

CSS Essential Training 3 - Lynda

๐Ÿ’ฐ ๐Ÿ“น

Scalable Modular Architecture for CSS (SMACSS) - Frontend Masters

๐Ÿ’ฐ ๐Ÿ“น

CSS Tutorial - w3schools

๐Ÿ†“

Introduction to CSS

๐Ÿ†“ ๐Ÿ“น

In 2 lists

Learn CSS - Sololearn

Selectors; Flexbox; CSS Grid

CSS Diner

๐Ÿ†“ ๐Ÿ”

In 6 lists

Flexbox Froggy

๐Ÿ†“ ๐Ÿ”

In 3 lists

Flexbox Defense

๐Ÿ†“ ๐Ÿ”

In 4 lists

Grid Garden

๐Ÿ†“ ๐Ÿ”

In 3 lists

Learn CSS Grid with Wes Bos

๐Ÿ†“ ๐Ÿ”

In 5 listsDetails

CSS Reference

๐Ÿ”

CSS - MDN web docs

๐Ÿ”

In 4 lists

Open Web Reference - CSS

CSS Reference

An extensive CSS reference offering way more content than MDN.

In 4 lists

Getting to know CSS

In 2 lists

CSS Guidelin.es

๐Ÿ”

In 3 lists

Airbnb CSS / Sass Styleguide - Github

A mostly reasonable approach to CSS and Sass.

In 5 listsDetails

Scalable and Modular Architecture for CSS - SMACSS

๐Ÿ”

In 3 lists

Google HTML/CSS Style Guide - Github

by Google

In 7 listsDetails

Sensible CSS Guidelines - Github

Trello CSS Guide - Github

by Bobby Grace

In 4 lists

CSS Quiz beginner level - Skillvalue

CSS, The definitive guide - Eric Meyer

In 2 lists

Enduring CSS - Ben Frain

The CSS PocketGuide - Chris Casciano

In 2 lists

CSS Secrets: Better Solutions to Everyday Web Design Problems - Lea Verou

In 2 lists

Professional CSS3 - Piotr Sikora

Learn HTML >Learn JavaScript

HTML5 and CSS - FreeCodeCamp

๐Ÿ†“ ๐Ÿ”

Introduction To JavaScript - CodeCademy

๐Ÿ’ฐ๐Ÿ†“ ๐Ÿ”

In 5 listsDetails

Beau teaches JavaScript - Youtube

๐Ÿ†“ ๐Ÿ“น

JS 30 For 30 - 30 Projects for 30 Days

๐Ÿ†“ ๐Ÿ“น

In 6 listsDetails

Intro to JavaScript - Udacity

๐Ÿ†“

Learn JavaScript - Codementor

๐Ÿ†“

Introduction to JavaScript Programming - Frontend Masters

๐Ÿ’ฐ ๐Ÿ“น

LambdaSchool Javascript Mini Bootcamp

๐Ÿ’ฐ๐Ÿ†“ ๐Ÿ”

JavaScript Essential Training - Lynda

๐Ÿ’ฐ ๐Ÿ“น

JavaScript Fundamentals - Tuts+

๐Ÿ’ฐ๐Ÿ†“ ๐Ÿ“น

Getting Started with JavaScript for Web Development - Scotch

๐Ÿ’ฐ๐Ÿ†“

JavaScript Basics - TreeHouse

๐Ÿ’ฐ

JavaScript path - Code School

๐Ÿ’ฐ

In 3 lists

ES6 for everyone

๐Ÿ’ฐ ๐Ÿ“น

In 2 lists

JavaScript.Info

A modern tutorial from the basics to advanced topics with simple, but detailed explanations.

In 2 lists

JavaScript Tutorial - w3schools

๐Ÿ†“

In 2 lists

Javascript Tutorial - Watch and Code by Gordon Zhu

๐Ÿ†“๐Ÿ’ฐ

Learn Javascript

Introduction to Javascript

๐Ÿ†“

JavaScript reference

In 2 lists

Modern JavaScript Cheatsheet

ES6 Katas - Learn ES6 by doing it

Learn ES6 by solving unit test online.

In 4 lists

Clean Code concepts adapted for JavaScript - Github

Software engineering principles, from Robert C. Martin's book Clean Code, adapted for JavaScript.

In 7 listsDetails

Workshoppers - NodeSchool

๐Ÿ”

In 4 lists

JavaScript Quiz beginner level - Skillvalue

๐Ÿ”

Practical Modern JavaScript

๐Ÿ†“

You Don't Know JS (book series)

๐Ÿ†“

In 12 listsDetails

JavaScript, the definitive guide

Javascript: The Good Parts

Eloquent JavaScript: A Modern Introduction to Programming

JavaScript Allongรฉe

, the โ€œSixโ€ edition. Starts with as little as possible about functions โ€“ but no less! โ€“ and builds up towards powerful combinators and decorators. A foundational book. By Reginald Braithwaite (2016)

In 2 lists

Learning JavaScript

Understanding ECMAScript 6: The Definitive Guide for JavaScript Developers

JavaScript and JQuery: Interactive Front-End Web Development

Airbnb JavaScript Guide()

(MIT) - A mostly reasonable approach to JavaScript

In 11 listsDetails

Learn HTML >Learn TypeScript

The Concise TypeScript Book

๐Ÿ†“

In 5 listsDetails

Learn GIT

15 minutes to learn Git

๐Ÿ”

In 2 lists

Git-it (Desktop App) - NodeSchool

๐Ÿ†“ ๐Ÿ”

In 3 lists

Learn Git on CodeCademy

๐Ÿ’ฐ๐Ÿ†“ ๐Ÿ”

In 3 lists

Learn Git Branching โ€“ Educational challenges

๐Ÿ†“

In 9 listsDetails

Introduction to version control with Git - Microsoft Learn

๐Ÿ†“

Git-it โ€“ Learn Git in a real terminal

๐Ÿ†“

In 3 lists

Git CheatSheet

๐Ÿ†“

In 2 lists

Git Essential Training - Lynda

๐Ÿ’ฐ ๐Ÿ“น

Try Git

๐Ÿ†“

Learn Git - Git Tutorials, workflows and commands

๐Ÿ†“

Tools

Github

๐Ÿ’ฐ๐Ÿ†“ ๐Ÿ”

In 18 listsDetails

Checkbot

๐Ÿ’ฐ๐Ÿ†“ ๐Ÿ”

In 2 lists

Codepen

๐Ÿ’ฐ๐Ÿ†“ ๐Ÿ”

In 7 listsDetails

CodeSandbox

Run JavaScript with starting templates for React, Vue, Angular, Preact and more with full intellisense, lint error checking and live collaborative editing.

In 5 lists

SassMeister

JSFiddle

an online IDE service and online community for testing and showcasing user-created and collaborational HTML, CSS and JavaScript code snippets

In 6 listsDetails

JSBin

Run snippets in HTML/CSS/JS/TS, provides Codecasting.

In 4 listsDetails

Thimble

Free online code editor, web server, web browser & developer tools.

In 2 lists

Webflow

๐Ÿ†“๐Ÿ’ฐ

In 4 lists

Framer

๐Ÿ†“๐Ÿ’ฐ

In 11 listsDetails

Visual Studio Code

๐Ÿ†“ ๐Ÿ”

In 26 listsDetails

Sublime Text

๐Ÿ†“

In 14 listsDetails

Atom

๐Ÿ†“

In 11 listsDetails

Brackets

๐Ÿ†“

In 2 lists

NotePad++

๐Ÿ†“

In 8 listsDetails

Cloud9

๐Ÿ’ฐ๐Ÿ†“

In 4 lists

Chat / Slack channels

FEDs - Slack

Chat / Slack channels >Aggregators / News

Smashing Magazine

๐Ÿ”

In 5 lists

CSS-Tricks

๐Ÿ”

In 7 listsDetails

Front-End Stash

๐Ÿ”

Codrops

๐Ÿ”

In 7 listsDetails

Front-End Front - Basically, front-end news

In 2 lists

Echo JS - JavaScript News

A list Apart - Code

Scotch - Code Eat Sleep Loop

In 3 lists

Daily.dev

Personalized developer news feed aggregating from 1000+ tech sources with community discussion.

In 2 lists

Newsletters

Frontend Focus

. A onceโ€“weekly HTML5 and Web Platform technology roundup. CSS 3, Canvas, WebSockets, WebGL, Native Client, and more.

In 4 lists

CSS Weekly

In 2 lists

CSS-Tricks

In 2 lists

JavaScript Weekly

ๆไพ›ๅ„็งๅ„ๆ ทๅ…ณไบŽ Javascript ็š„่ต„่ฎฏๅ’ŒๆŠ€ๅทง

In 2 lists

WebTools Weekly

. Web Tools Weekly is a front-end development and web design newsletter with a focus on tools.

In 2 lists

Smashing Magazine

. Email newsletter twice a month with useful tips, tricks and resources for designers and developers.

In 3 lists

Sidebar

has been collecting the best links about UI design, typography, CSS, user research, and all other facets of design since 2012.

In 3 lists

Responsive Design Weekly

. A free, onceโ€“weekly round-up of responsive design articles, tools, tips, tutorials and inspirational links.

In 4 lists

JSK Weekly

. Curated list of the top-rated articles from the community of JavaScript developers sent weekly.

In 2 lists

WebRTC Weekly

. A weekly & brief newsletter with all the latest news and activities on WebRTC.

In 2 lists
See category
93

Awesome Vue

vuejs/awesome-vue

๐ŸŽ‰ A curated list of awesome things related to Vue.js

Freshโ˜… 74k1067 entriesPushed 5 days ago
93

Awesome DESIGN.md

VoltAgent/awesome-design-md

A collection of DESIGN.md files analysis by popular brand design systems. Drop one into your project and let coding agents generate a matching UI.

Freshโ˜… 119k74 entriesPushed 9 days ago
91

Awesome Angular

PatrickJS/awesome-angular

:page_facing_up: A curated list of awesome Angular resources

Freshโ˜… 10k1944 entriesPushed today
90

Awesome Blazor

AdrienTorris/awesome-blazor

Resources for Blazor, a .NET web framework using C#/Razor and HTML that runs in the browser with WebAssembly.

Freshโ˜… 9.4k375 entriesPushed today
88

Must-Watch CSS

AllThingsSmitty/must-watch-css

CSS talks you have to seeย covering CSS Grid, flexbox, custom variables, performance, frameworks, tooling, and more! ๐Ÿ“บ

Freshโ˜… 4.9k70 entriesPushed 6 days ago
87

Awesome React Native

jondot/awesome-react-native

Awesome React Native components, news, tools, and learning material!

Freshโ˜… 36k194 entriesPushed 1 month ago