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

Learn the basics 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
Understand your journey → Web Developer Roadmap 2019 - Github

⬆ back to top

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 🆓
- AlgoExpert’s Front-end Expert Course 💰
Documentation
Guidelines
- SEO, Speed and Security Best Practices - Checkbot
- HTML Best Practices - Github
Quiz / Challenges
- LearnYouHTML - NodeSchool
- HTML Quiz beginner level - Skillvalue
Articles/Books

⬆ back to top

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 🆓 🔝
  - Flexbox
    - 🌍 Flexbox Froggy 🆓 🔝
    - Flexbox Defense 🆓 🔝
  - CSS Grid
    - 🌍 Grid Garden 🆓 🔝
    - Learn CSS Grid with Wes Bos 🆓 🔝
Documentation
- CSS Reference 🔝
- CSS - MDN web docs 🔝
- Open Web Reference - CSS
- CSS Reference
- Getting to know CSS
Guidelines
Quizz / challenges
- CSS Quiz beginner level - Skillvalue
Articles/Books

⬆ back to top

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 🆓
Documentation
Guidelines
- Clean Code concepts adapted for JavaScript - Github
Quiz / challenges
- Workshoppers - NodeSchool 🔝
- JavaScript Quiz beginner level - Skillvalue 🔝
Articles / Books

⬆ back to top

Learn TypeScript

Articles / Books
- The Concise TypeScript Book 🆓

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 🆓
Introduction to version control with Git - Microsoft Learn 🆓
Git-it – Learn Git in a real terminal 🆓
Git CheatSheet 🆓
Git Essential Training - Lynda 💰 📹
Try Git 🆓
Learn Git - Git Tutorials, workflows and commands🆓

⬆ back to top

Tools

Essential
- Github 💰🆓 🔝
Website auditors
- Checkbot 💰🆓 🔝
Playgrounds
- Codepen 💰🆓 🔝
- CodeSandbox
- SassMeister
- JSFiddle
- JSBin
- Thimble
Web design Tools
- Webflow🆓💰
- Framer🆓💰
Editors
- Visual Studio Code 🆓 🔝
- Sublime Text 🆓
- Atom 🆓
- Brackets 🆓
- NotePad++ 🆓
- Cloud9 💰🆓

⬆ back to top

Chat / Slack channels

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
Daily.dev

⬆ back to top

Newsletters

Contributing

Open an issue or a pull request to suggest changes or additions.

Contributors

David Dias

_{David Dias}
🖋 🚧 👀

Simone Poggiali

_{Simone Poggiali}
🖋

Arunava (Aru)

_{Arunava (Aru)}
🖋

License

⬆ back to top