πΊπΈ π¬π§ & π«π· )
The most essential list of resources for Front-End beginners (
If you want to learn how to become a Front-End developer, you are in the right place!
I will regularly update that list with new resources and links I found on the web. Don't hesitate to participate by sending a PR! Maybe your first on Github :)
I'm using some emoticons to give you more information on these links.
- All links without a flag are in English
πΊπΈ π¬π§ . The flagπ«π· means the resource is in French,π means the resource is multi-language. π° are paid tutorials,π are free tutorials. Sometimes you will have some free videos / articles and other paid on the same website.π indicate that the link is a referenceπΉ is present when video content is available
Table of Contents
- Start here
- Learn HTML
- Learn CSS
- Learn JavaScript
- Learn Git
- Tools
- Chat / Slack
- Aggregators / News
- Newsletters
From Web Developer Roadmap 2017
Start here
- Understand Internet
- 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
πΉ π«π· Benjamin Bayart : Qu'est ce qu'Internet (ConfΓ©rence Γ SciencesPo le 14 avril 2010, durΓ©e 5h30)πΉ π π«π· C'est pas sorcier -INTERNET : Les pirates tissent leur toileπΉ π«π· Comprendre Internet - histoireπΉ π«π· Comprendre comment marche InternetπΉ π«π· Comprendre Internet
- How Does the Internet Actually Work?
- Understand your journey β Web Developer Roadmap 2019 - Github
Learn HTML
-
Courses / Tutorials
π Learn HTML - CodeCademyπ° π πΉ π - 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
π° - Introduction to HTML5 and CSS3 - Frontend Masters
π° πΉ - HTML/CSS on Code Avengers
π° π - 30 Days to Learn HTML & CSS
π° π πΉ - Introduction to HTML
π πΉ π«π· Apprenez Γ crΓ©er votre site web avec HTML5 et CSS3 - OpenClassRoomsπ° π π«π· Tutoriels web HTML - AlsacrΓ©ationsπ π«π· HTML et CSS - Le Cours Complet - Udemyπ° - HTML5 Tutorial - w3schools
π
-
Documentation
-
Guidelines
-
Quiz / Challenges
-
Articles/Books
Learn CSS
-
Courses / Tutorials
π Learn CSS - CodeCademyπ° π π - Learn CSS in 12 Minutes - Youtube
π πΉ - CSS Basics - TreeHouse
π° πΉ - Introduction to CSS
π° πΉ - CSS3 In-Depth
π° πΉ - CSS Essential Training 3 - Lynda
π° πΉ - Scalable Modular Architecture for CSS (SMACSS) - Frontend Masters
π° πΉ π«π· Tutoriel HTML/CSS - Box Sizing - Grafikartπ πΉ π«π· Tutoriel CSS : Comment bien organiser son CSS - Grafikartπ πΉ π«π· Tutoriels web CSS - AlsacrΓ©ationsπ - CSS Tutorial - w3schools
π - Introduction to CSS
π πΉ - Learn CSS - Sololearn
- Selectors
- CSS Diner
π π
- CSS Diner
- Flexbox
π Flexbox Froggyπ π - Flexbox Defense
π π
- CSS Grid
π Grid Gardenπ π - Learn CSS Grid with Wes Bos
π π
- Selectors
-
Documentation
-
Guidelines
-
Quizz / challenges
-
Articles/Books
- CSS, The definitive guide - Eric Meyer
- Enduring CSS - Ben Frain
- The CSS PocketGuide - Chris Casciano
- CSS Secrets: Better Solutions to Everyday Web Design Problems - Lea Verou
- Professional CSS3 - Piotr Sikora
π«π· CSS3 - RaphaΓ«l Goetter, Hugo Giraudelπ«π· CSS avancΓ©es - RaphaΓ«l Goetterπ«π· CSS avancΓ©es, Vers HTML5 et CSS3 - Mathieu Nebraπ«π· Premier pas en CSS3 et HTML5
Learn JavaScript
-
Courses / Tutorials
- Basic JavaScript
π π - Introduction To JavaScript - CodeCademy
π° π π - Beau teaches JavaScript - Youtube
π πΉ - JS 30 For 30 - 30 Projects for 30 Days
π πΉ - 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
π° - ES6 for everyone
π° πΉ π«π· Tutoriels web JavaScript - AlsacrΓ©ationsπ - JavaScript.Info
- JavaScript Tutorial - w3schools
π - Javascript Tutorial - Watch and Code by Gordon Zhu
π π° - Learn Javascript
- Introduction to Javascript
π
- Basic JavaScript
-
Documentation
-
Guidelines
-
Quiz / challenges
-
Articles / Books
- Practical Modern JavaScript
π - You Don't Know JS (book series)
π - JavaScript, the definitive guide
- Javascript: The Good Parts
- Eloquent JavaScript: A Modern Introduction to Programming
- JavaScript AllongΓ©e
- Learning JavaScript
- Understanding ECMAScript 6: The Definitive Guide for JavaScript Developers
- JavaScript and JQuery: Interactive Front-End Web Development
π«π· JavaScript - DΓ©veloppez efficacement- Airbnb JavaScript Guide()
- Practical Modern JavaScript
Learn GIT
- 15 minutes to learn Git
π - Git-it (Desktop App) - NodeSchool
π π π Learn Git on CodeCademyπ° π π - Git-it is a (Mac, Win, Linux) Desktop App for Learning Git and GitHub
π π - Learn Git Branching β Educational challenges
π - Learn Git by Microsoft
π - Git-it β Learn Git in a real terminal
π - Git CheatSheet
π - Git Essential Training - Lynda
π° πΉ - Try Git
π
Tools
-
Essential
- Github
π° π π
- Github
-
Website auditors
- Checkbot
π° π π
- Checkbot
-
Playgrounds
- Codepen
π° π π - CodeSandbox
- SassMeister
- JSFiddle
- JSBin
- Thimble
- Codepen
-
Editors
- Visual Studio Code
π π - Sublime Text
π - Atom
π - Brackets
π - NotePad++
π - Cloud9
π° π
- Visual Studio Code
Chat / Slack channels
- FEDs - Slack
π«π· Front-end France - Slackπ«π· DevFr - Telegram
Aggregators / News
- Smashing Magazine
π - CSS-Tricks
π - Front-End Stash
π - Codrops
π - Front-End Front - Basically, front-end news
- Echo JS - JavaScript News
- A list Apart - Code
- Scotch - Code Eat Sleep Loop
Newsletters
- Frontend Focus
- CSS Weekly
- CSS-Tricks
- JavaScript Weekly
- WebTools Weekly
- Smashing Magazine
- Sidebar
- Responsive Design Weekly
- JSK Weekly
- WebRTC Weekly
Contributing
Open an issue or a pull request to suggest changes or additions.
Contributors
Check out all the super awesome contributors.