Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/thedaviddias/Resources-Front-End-Beginner

💯 The most essential list of resources for Front-End beginners (🇺🇸 & 🇫🇷)
https://github.com/thedaviddias/Resources-Front-End-Beginner

List: Resources-Front-End-Beginner

awesome-list beginner beginners-guide front-end front-end-developer list resources

Last synced: 2 months ago
JSON representation

💯 The most essential list of resources for Front-End beginners (🇺🇸 & 🇫🇷)

Lists

README 

        
# The most essential list of resources for Front-End beginners (🇺🇸 & 🇫🇷)



[![CC0](https://img.shields.io/badge/license-CC0-green.svg)](https://creativecommons.org/publicdomain/zero/1.0/)



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 TypeScript



* Articles / Books

  * [The Concise TypeScript Book](https://github.com/gibbok/typescript-book) 🆓



---

## 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/)🆓💰

  * [Framer](https://www.framer.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/)

* [Daily.dev](https://daily.dev/)



**[⬆ 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



  

    

      David Dias
David Dias
🖋 🚧 👀

      Simone Poggiali
Simone Poggiali
🖋

      Arunava  (Aru)
Arunava  (Aru)
🖋

    

  



## 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)**