If you want to learn how to become a Front-End developer, you are on the right place!
Regularly I will update that list with new resources and links I found on the web. Don't hesitate to participate sending a PR! Maybe your first on Github :)
I'm using some emoticons to give you more information about 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
- Start here
- Learn HTML
- Learn CSS
- Learn JavaScript
- Learn Git
- Tools
- Chat / Slack
- Aggregators / News
- Newsletters
From Web Developer Roadmap 2017
- 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
- Understand your journey
-
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 π°π πΉ
- π«π· 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
-
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 π
- Selectors
- CSS Diner π π
- Flexbox
- Flexbox Froggy π π
- Flexbox Defense π π
- CSS Grid
- Grid Garden π π
- 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
-
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 π° πΉ
- 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 ππ°
-
Documentation
-
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
- 15 minutes to learn Git π
- Git-it (Desktop App) - NodeSchool π π
- π Learn Git on CodeCademy π°π π
- Learn Git Branching β Educational challenges π
- Learn Git by Microsoft π
- Git-it β Learn Git in a real terminal π
- Git CheatSheet π
- Git Essential Training - Lynda π° πΉ
- Essential
- Github π°π π
- Playgrounds
- Codepen π°π π
- SassMeister
- JSFiddle
- Editors
- Visual Studio Code π π
- Sublime Text π
- Atom π
- Brackets π
- NotePad++ π
- Cloud9 π°π
- FEDs - Slack
- π«π· Front-end France - Slack
- 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
Open an issue or a pull request to suggest changes or additions.
Check out all the super awesome contributors.