💯 The most essential list of resources for Front-End beginners (🇺🇸 🇬🇧 🇨🇦 & 🇫🇷)
# The most essential list of resources for Front-End beginners (🇺🇸 🇬🇧 & 🇫🇷)

[![Join the chat at https://gitter.im/sky-starter-kit/Lobby][gitter-image]][gitter-url] [![Contributors](https://img.shields.io/github/contributors/thedaviddias/Resources-Front-End-Beginner.svg)](https://github.com/thedaviddias/Resources-Front-End-Beginner/graphs/contributors)
[![CC0](https://img.shields.io/badge/license-CC0-green.svg)](https://creativecommons.org/publicdomain/zero/1.0/)

[gitter-image]: https://badges.gitter.im/Front-End-Checklist/Lobby.svg
[gitter-url]: https://gitter.im/Front-End-Checklist/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge

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.

1. All links without a flag are in English 🇺🇸 🇬🇧. The flag 🇫🇷 means the resource is in French, 🌍 means the resource is multi-language.
2. 💰 are paid tutorials, 🆓 are free tutorials. Sometimes you will have some free videos / articles and other paid on the same website.
3. 🔝 indicate that the link is a reference
4. 📹 is present when video content is available

---
## Table of Contents
1. **[Start here](#start-here)**
2. **[Learn HTML](#learn-html)**
3. **[Learn CSS](#learn-css)**
4. **[Learn JavaScript](#learn-javascript)**
5. **[Learn Git](#learn-git)**
6. **[Tools](#tools)**
7. **[Chat / Slack](#chat--slack-channels)**
8. **[Aggregators / News](#aggregators--news)**
9. **[Newsletters](#newsletters)**

![Learn the basics](https://res.cloudinary.com/djnyaloac/image/upload/v1507777230/front-end-know-basics.jpg)
***From Web Developer Roadmap 2017***

---
## Start here
* Understand Internet
  * [How Does the Internet Actually Work?](https://www.youtube.com/watch?v=5SXK__rm6DM) 📹 🔝
  * [What is Internet?](https://www.youtube.com/watch?v=Dxcc6ycZ73M) 📹 🔝
  * [How does the internet work? - Part 1 (It's like a bad drawing.)](https://www.youtube.com/watch?v=XZIMEoUhOA8) 📹
  * [How Does the Internet Work?](https://www.youtube.com/watch?v=7XoaoFjKqYM) 📹
  * [How the Internet Works for Developers - Pt 1 - Overview & Frontend](https://www.youtube.com/watch?v=e4S8zfLdLgQ) 📹
  * 🇫🇷 [Benjamin Bayart : Qu'est ce qu'Internet (Conférence à SciencesPo le 14 avril 2010, durée 5h30)](https://www.youtube.com/watch?v=pwT2egqlke4&list=PLU39vuHuXlJeER75D1GNJiK8-2i0yhRLX) 📹 🔝
  * 🇫🇷 [C'est pas sorcier -INTERNET : Les pirates tissent leur toile](https://www.youtube.com/watch?v=VB7vsaan8PM) 📹
  * 🇫🇷 [Comprendre Internet - histoire](https://www.youtube.com/watch?v=sLJ-QztAqNE) 📹
  * 🇫🇷 [Comprendre comment marche Internet](https://www.youtube.com/playlist?list=PL2972E0D013FE7DE7) 📹
  * 🇫🇷 [Comprendre Internet](http://www.comprendre-internet.com/)
* Understand your journey
  → [Web Developer Roadmap 2019 - Github](https://github.com/kamranahmedse/developer-roadmap)

**[⬆ back to top](#table-of-contents)**

---
## Learn HTML

* Courses / Tutorials
  * 🌍 [Learn HTML - CodeCademy](https://www.codecademy.com/learn/learn-html) 💰🆓 📹 🔝
  * [HTML5 and CSS - FreeCodeCamp](https://www.freecodecamp.org/map#nested-collapseHTML5andCSS) 🆓 🔝
  * [MarkSheet - A free HTML & CSS tutorial](http://marksheet.io/) 🆓 🔝
  * [Intro to HTML/CSS: Making webpages - KhanAcademy](https://www.khanacademy.org/computing/computer-programming/html-css) 🆓
  * [Learn the Web](https://learn-the-web.algonquindesign.ca/) 🆓
  * [HTML5 Introduction - EDX](https://www.edx.org/course/html5-introduction-w3cx-html5-0x-0) 🆓
  * [HTML - Creating basic web pages](https://bento.io/topic/html) 🆓
  * [Learn to code HTML & CSS - Shay Howe](http://learn.shayhowe.com/html-css/) 🆓
  * [HTML Tutorials](http://www.htmldog.com/) 🆓
  * [Intro to HTML and CSS - Udacity](https://www.udacity.com/course/intro-to-html-and-css--ud304) 🆓
  * [Learn HTML in 12 minutes - Youtube](https://www.youtube.com/watch?v=bWPMSSsVdPk) 🆓 📹
  * [Learn HTML in 30 Minutes - Youtube](https://www.youtube.com/watch?v=hrZqiCUx6kg) 🆓 📹
  * [HTML Fundamentals - SoloLearn](https://www.sololearn.com/Course/HTML/) 💰🆓
  * [HTML Basics - TreeHouse](https://teamtreehouse.com/library/html-basics-2) 💰 📹
  * [HTML/CSS Path - Code School](https://www.codeschool.com/learn/html-css) 💰 📹
  * [HTML Essential Training - Lynda](https://www.lynda.com/Web-Development-tutorials/HTML-Essential-Training/170427-2.html) 💰 📹
  * [Your First Day with HTML - Pluralsight](https://www.pluralsight.com/courses/your-first-day-html-1665) 💰 📹
  * [HTML Fundamentals - Pluralsight](https://www.pluralsight.com/courses/html-fundamentals) 💰 📹
  * [Introduction to HTML and CSS - TreeHouse](https://teamtreehouse.com/library/introduction-to-html-and-css) 💰
  * [Introduction to HTML5 and CSS3 - Frontend Masters](https://frontendmasters.com/courses/introduction-html5-css3/) 💰 📹
  * [HTML/CSS on Code Avengers](https://www.codeavengers.com/profile#html-css) 💰🆓
  * [30 Days to Learn HTML & CSS](https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css?_ga=2.133963854.1549833602.1507724443-1498690494.1505785599) 💰🆓 📹
  * [Introduction to HTML](https://scrimba.com/g/ghtml) 🆓 📹
  * 🇫🇷 [Apprenez à créer votre site web avec HTML5 et CSS3 - OpenClassRooms](https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3) 💰🆓
  * 🇫🇷 [Tutoriels web HTML - Alsacréations](https://www.alsacreations.com/tuto/liste/1-HTML) 🆓
  * 🇫🇷 [HTML et CSS - Le Cours Complet - Udemy](https://www.udemy.com/cours-html-css/) 💰
  * [HTML5 Tutorial - w3schools](https://www.w3schools.com/html/) 🆓
  * [AlgoExpert's Front-end Expert Course](https://www.algoexpert.io/content#fe) 💰

* Documentation
  * [HTML Reference](http://htmlreference.io/) 🔝
  * [Introduction to HTML - MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML) 🔝
  * [HTML Cheat Sheet - Compilation](https://websitesetup.org/html5-cheat-sheet/)
  * [HTML5 Tutorial PDF - Tutorialspoint](https://www.tutorialspoint.com/html5/html5_tutorial.pdf)
  * [Getting to Know HTML - Shay Howe](https://learn.shayhowe.com/html-css/getting-to-know-html/)
  * [The Elements of HTML](https://rawgit.com/w3c/elements-of-html/master/index.html)

* Guidelines
  * [SEO, Speed and Security Best Practices - Checkbot](https://www.checkbot.io/guide/)
  * [HTML Best Practices - Github](https://github.com/hail2u/html-best-practices)

* Quiz / Challenges
  * [LearnYouHTML - NodeSchool](https://github.com/denysdovhan/learnyouhtml)
  * [HTML Quiz beginner level - Skillvalue](https://skillvalue.com/en/quizzes/front-end/html5-beginner-level)

* Articles/Books
  * [Learn to Code HTML and CSS: Develop and Style Websites](https://www.amazon.com/Learn-Code-HTML-CSS-Websites/dp/0321940520)
  * [HTML and CSS: Design and Build Websites](https://www.amazon.com/HTML-CSS-Design-Build-Websites/dp/1118008189)
  * 🇫🇷 [Réalisez votre site web avec HTML 5 et CSS 3](http://www.eyrolles.com/Informatique/Livre/realisez-votre-site-web-avec-html-5-et-css-3-9782212674767)

**[⬆ back to top](#table-of-contents)**

---
### Learn CSS
* Courses / Tutorials

  * 🌍 [Learn CSS - CodeCademy](https://www.codecademy.com/learn/learn-css) 💰🆓 🔝
  * [Learn CSS in 12 Minutes - Youtube](https://www.youtube.com/watch?v=0afZj1G0BIE) 🆓 📹
  * [CSS Basics - TreeHouse](https://teamtreehouse.com/library/css-basics) 💰 📹
  * [Introduction to CSS](https://www.pluralsight.com/courses/css-intro) 💰 📹
  * [CSS3 In-Depth](https://frontendmasters.com/courses/css3-in-depth/) 💰 📹
  * [CSS Essential Training 3 - Lynda](https://www.lynda.com/CSS-tutorials/CSS-Essential-Training-3/609030-2.html) 💰 📹
  * [Scalable Modular Architecture for CSS (SMACSS) - Frontend Masters](https://frontendmasters.com/courses/smacss/) 💰 📹
  * 🇫🇷 [Tutoriel HTML/CSS - Box Sizing - Grafikart](https://www.youtube.com/watch?v=oFziQkOqKd0) 🆓 📹
  * 🇫🇷 [Tutoriel CSS : Comment bien organiser son CSS - Grafikart](https://www.youtube.com/watch?v=t8Up7GiNIoU) 🆓 📹
  * 🇫🇷 [Tutoriels web CSS - Alsacréations](https://www.alsacreations.com/tuto/liste/2-CSS) 🆓
  * [CSS Tutorial - w3schools](https://www.w3schools.com/css/) 🆓
  * [Introduction to CSS](https://scrimba.com/g/gintrotocss) 🆓 📹
  * [Learn CSS - Sololearn](https://www.sololearn.com/Course/CSS/)
    * Selectors
      * [CSS Diner](https://flukeout.github.io/) 🆓 🔝
    * Flexbox
      * 🌍 [Flexbox Froggy](http://flexboxfroggy.com/) 🆓 🔝
      * [Flexbox Defense](http://www.flexboxdefense.com/) 🆓 🔝
    * CSS Grid
      * 🌍 [Grid Garden](http://cssgridgarden.com/) 🆓 🔝
      * [Learn CSS Grid with Wes Bos](https://cssgrid.io/) 🆓 🔝

* Documentation
  * [CSS Reference](http://cssreference.io/) 🔝
  * [CSS - MDN web docs](https://developer.mozilla.org/en-US/docs/Web/CSS) 🔝
  * [Open Web Reference - CSS](http://ref.openweb.io/CSS/)
  * [CSS Reference](https://tympanus.net/codrops/css_reference/)
  * [Getting to know CSS](https://learn.shayhowe.com/html-css/getting-to-know-css/)

* Guidelines
  * 🌍 [CSS Guidelin.es](https://cssguidelin.es/) 🔝
  * [Airbnb CSS / Sass Styleguide - Github](https://github.com/airbnb/css)
  * [Scalable and Modular Architecture for CSS - SMACSS](https://smacss.com/) 🔝
  * [Google HTML/CSS Style Guide - Github](https://google.github.io/styleguide/htmlcssguide.html)
  * [Sensible CSS Guidelines - Github](https://github.com/chris-pearce/css-guidelines)
  * [Trello CSS Guide - Github](https://gist.github.com/bobbygrace/9e961e8982f42eb91b80)

* Quizz / challenges
  * [CSS Quiz beginner level - Skillvalue](https://skillvalue.com/en/quizzes/front-end/css-beginner-level-2)

* Articles/Books
  * [CSS, The definitive guide - Eric Meyer](https://www.amazon.com/CSS-Definitive-Guide-Eric-Meyer/dp/0596527330)
  * [Enduring CSS - Ben Frain](https://www.amazon.com/Enduring-CSS-Ben-Frain/dp/1787282805)
  * [The CSS PocketGuide - Chris Casciano](https://www.amazon.com/CSS-Pocket-Guide-Peachpit/dp/0321732278)
  * [CSS Secrets: Better Solutions to Everyday Web Design Problems - Lea Verou](https://www.amazon.com/CSS-Secrets-Solutions-Everyday-Problems/dp/1449372635)
  * [Professional CSS3 - Piotr Sikora](https://www.packtpub.com/web-development/professional-css3)
  * 🇫🇷 [CSS3 - Raphaël Goetter, Hugo Giraudel](http://www.eyrolles.com/Informatique/Livre/css3-9782212140231)
  * 🇫🇷 [CSS avancées - Raphaël Goetter](http://www.eyrolles.com/Informatique/Livre/css-avancees-9782212134056)
  * 🇫🇷 [CSS avancées, Vers HTML5 et CSS3 - Mathieu Nebra](%>)
  * 🇫🇷 [Premier pas en CSS3 et HTML5](http://www.eyrolles.com/Informatique/Livre/premiers-pas-en-css3-et-html5-9782212674309)

**[⬆ back to top](#table-of-contents)**

---
### Learn JavaScript
* Courses / Tutorials

  * [Basic JavaScript](https://www.freecodecamp.org/map#nested-collapseBasicJavaScript) 🆓 🔝
  * [Introduction To JavaScript - CodeCademy](https://www.codecademy.com/learn/introduction-to-javascript) 💰🆓 🔝
  * [Beau teaches JavaScript - Youtube](https://www.youtube.com/playlist?list=PLWKjhJtqVAbmoiNlqLJg1gxEjEuKHHcn_) 🆓 📹
  * [JS 30 For 30 - 30 Projects for 30 Days](https://javascript30.com/) 🆓 📹
  * [Intro to JavaScript - Udacity](https://www.udacity.com/course/intro-to-javascript--ud803) 🆓
  * [Learn JavaScript - Codementor](https://www.codementor.io/javascript) 🆓
  * [Introduction to JavaScript Programming - Frontend Masters](https://frontendmasters.com/courses/javascript-basics/) 💰 📹
  * [LambdaSchool Javascript Mini Bootcamp](https://lambdaschool.com/free-course-web/)💰🆓 🔝
  * [JavaScript Essential Training - Lynda](https://www.lynda.com/JavaScript-tutorials/JavaScript-Essential-Training/574716-2.html) 💰 📹
  * [JavaScript Fundamentals - Tuts+](https://code.tutsplus.com/courses/javascript-fundamentals) 💰🆓 📹
  * [Getting Started with JavaScript for Web Development - Scotch](https://scotch.io/courses/getting-started-with-javascript) 💰🆓
  * [JavaScript Basics - TreeHouse](https://teamtreehouse.com/library/javascript-basics) 💰
  * [JavaScript path - Code School](https://www.codeschool.com/learn/javascript) 💰
  * [ES6 for everyone](https://es6.io/) 💰 📹
  * 🇫🇷 [Tutoriels web JavaScript - Alsacréations](https://www.alsacreations.com/tuto/liste/5-Javascript) 🆓
  * [JavaScript.Info](http://javascript.info/)
  * [JavaScript Tutorial - w3schools](https://www.w3schools.com/js/) 🆓
  * [Javascript Tutorial - Watch and Code by Gordon Zhu](https://watchandcode.com/) 🆓💰
  * [Learn Javascript](https://www.sololearn.com/Course/JavaScript/)
  * [Introduction to Javascript](https://scrimba.com/g/gintrotojavascript) 🆓

* Documentation
  * [JavaScript reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference)
  * [Modern JavaScript Cheatsheet](https://mbeaudru.github.io/modern-js-cheatsheet/)
  * [ES6 Katas - Learn ES6 by doing it](http://es6katas.org/)

* Guidelines
    * [Clean Code concepts adapted for JavaScript - Github](https://github.com/ryanmcdermott/clean-code-javascript)

* Quiz / challenges
  * [Workshoppers - NodeSchool](https://nodeschool.io/) 🔝
  * [JavaScript Quiz beginner level - Skillvalue](https://skillvalue.com/en/quizzes/front-end/javascript-beginner-level-2) 🔝

* Articles / Books
  * [Practical Modern JavaScript](https://github.com/mjavascript/practical-modern-javascript) 🆓
  * [You Don't Know JS (book series)](https://github.com/getify/You-Dont-Know-JS) 🆓
  * [JavaScript, the definitive guide](https://www.amazon.fr/JavaScript-Definitive-Guide-David-Flanagan/dp/0596805527)
  * [Javascript: The Good Parts](https://www.amazon.fr/Javascript-Good-Parts-D-Crockford/dp/0596517742)
  * [Eloquent JavaScript: A Modern Introduction to Programming](https://www.amazon.com/Eloquent-JavaScript-2nd-Ed-Introduction/dp/1593275846)
  * [JavaScript Allongée](https://leanpub.com/javascriptallongesix)
  * [Learning JavaScript](https://www.amazon.com/Learning-JavaScript-Essentials-Application-Development/dp/1491914912)
  * [Understanding ECMAScript 6: The Definitive Guide for JavaScript Developers](https://www.amazon.fr/Understanding-ECMAScript-Definitive-JavaScript-Developers/dp/1593277571)
  * [JavaScript and JQuery: Interactive Front-End Web Development](https://www.amazon.com/JavaScript-JQuery-Interactive-Front-End-Development/dp/1118531647)
  * 🇫🇷 [JavaScript - Développez efficacement](https://www.amazon.fr/JavaScript-Développez-efficacement-2e-édition/dp/2409009727)
  * [Airbnb JavaScript Guide()](https://github.com/airbnb/javascript)

**[⬆ back to top](#table-of-contents)**

---
## Learn GIT

* [15 minutes to learn Git](https://try.github.io) 🔝
* [Git-it (Desktop App) - NodeSchool](https://github.com/jlord/git-it-electron) 🆓 🔝
* 🌍 [Learn Git on CodeCademy](https://www.codecademy.com/learn/learn-git) 💰🆓 🔝
* [Git-it is a (Mac, Win, Linux) Desktop App for Learning Git and GitHub](https://github.com/jlord/git-it-electron) 🆓 🔝
* [Learn Git Branching – Educational challenges](https://learngitbranching.js.org/) 🆓
* [Introduction to version control with Git - Microsoft Learn](https://docs.microsoft.com/en-gb/learn/paths/intro-to-vc-git/) 🆓
* [Git-it – Learn Git in a real terminal](http://jlord.us/git-it/) 🆓
* [Git CheatSheet](http://www.ndpsoftware.com/git-cheatsheet.html) 🆓
* [Git Essential Training - Lynda](https://www.lynda.com/Git-tutorials/Git-Essential-Training/100222-2.html) 💰 📹
* [Try Git](https://www.codeschool.com/courses/try-git) 🆓
* [Learn Git - Git Tutorials, workflows and commands](https://www.atlassian.com/git)🆓

**[⬆ back to top](#table-of-contents)**

---
## Tools
* Essential
  * [Github](https://github.com/) 💰🆓 🔝
* Website auditors
  * [Checkbot](https://www.checkbot.io/) 💰🆓 🔝
* Playgrounds
  * [Codepen](https://codepen.io/) 💰🆓 🔝
  * [CodeSandbox](https://codesandbox.io/)
  * [SassMeister](https://www.sassmeister.com/)
  * [JSFiddle](https://jsfiddle.net/)
  * [JSBin](https://jsbin.com/)
  * [Thimble](https://thimble.mozilla.org/en-US/)

* Web design Tools
  * [Webflow](https://webflow.com/)🆓💰
  
* Editors
  * [Visual Studio Code](https://code.visualstudio.com/) 🆓 🔝
  * [Sublime Text](https://www.sublimetext.com/) 🆓
  * [Atom](https://atom.io/) 🆓
  * [Brackets](http://brackets.io/) 🆓
  * [NotePad++](https://notepad-plus-plus.org/) 🆓
  * [Cloud9](https://c9.io/) 💰🆓

**[⬆ back to top](#table-of-contents)**

---
## Chat / Slack channels
* [FEDs - Slack](https://feds.slack.com)
* 🇫🇷 [Front-end France - Slack](https://frontendfr.slack.com)
* 🇫🇷 [DevFr - Telegram](https://t.me/DevFr)

---
### Aggregators / News

* [Smashing Magazine](https://www.smashingmagazine.com/) 🔝
* [CSS-Tricks](https://css-tricks.com/) 🔝
* [Front-End Stash](https://frontendstash.top/) 🔝
* [Codrops](https://tympanus.net/codrops/) 🔝
* [Front-End Front - Basically, front-end news](https://frontendfront.com/)
* [Echo JS - JavaScript News](http://www.echojs.com/)
* [A list Apart - Code](https://alistapart.com/topic/code)
* [Scotch - Code Eat Sleep Loop](https://scotch.io/)

**[⬆ back to top](#table-of-contents)**

---
## Newsletters
* [Frontend Focus](https://frontendfoc.us/)
* [CSS Weekly](http://css-weekly.com/)
* [CSS-Tricks](https://css-tricks.com/newsletters/)
* [JavaScript Weekly](http://javascriptweekly.com/)
* [WebTools Weekly](https://webtoolsweekly.com/)
* [Smashing Magazine](https://www.smashingmagazine.com/the-smashing-newsletter/)
* [Sidebar](https://sidebar.io/)
* [Responsive Design Weekly](http://responsivedesignweekly.com/)
* [JSK Weekly](https://javascriptkicks.com/)
* [WebRTC Weekly](https://webrtcweekly.com/)

## Contributing

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

### Contributors

Check out all the super awesome [contributors](https://github.com/thedaviddias/Resources-Front-End-Beginner/graphs/contributors).

## Authors

**[David Dias](https://twitter.com/thedaviddias)**

## License

[![CC0](https://i.creativecommons.org/p/zero/1.0/88x31.png)](https://creativecommons.org/publicdomain/zero/1.0/)

**[⬆ back to top](#table-of-contents)**
