thedaviddias / resources-front-end-beginner

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

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.

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
2. Learn HTML
3. Learn CSS
4. Learn JavaScript
5. Learn Git
6. Tools
7. Chat / Slack
8. Aggregators / News
9. 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
• 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

  • HTML Reference 🔝
  • Introduction to HTML - MDN web docs 🔝
  • HTML Cheat Sheet - Compilation
  • HTML5 Tutorial PDF - Tutorialspoint
  • Getting to Know HTML - Shay Howe
  • The Elements of HTML

• Guidelines

  • SEO, Speed and Security Best Practices - Checkbot
  • HTML Best Practices - Github

• Quiz / Challenges

  • LearnYouHTML - NodeSchool
  • HTML Quiz beginner level - Skillvalue

• Articles/Books

  • Learn to Code HTML and CSS: Develop and Style Websites
  • HTML and CSS: Design and Build Websites
  • 🇫🇷 Réalisez votre site web avec HTML 5 et CSS 3

⬆ 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

  • 🌍 CSS Guidelin.es 🔝
  • Airbnb CSS / Sass Styleguide - Github
  • Scalable and Modular Architecture for CSS - SMACSS 🔝
  • Google HTML/CSS Style Guide - Github
  • Sensible CSS Guidelines - Github
  • Trello CSS Guide - Github

• Quizz / challenges

  • CSS Quiz beginner level - Skillvalue

• 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

⬆ 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

  • JavaScript reference
  • Modern JavaScript Cheatsheet
  • ES6 Katas - Learn ES6 by doing it

• Guidelines

  • Clean Code concepts adapted for JavaScript - Github

• Quiz / challenges

  • Workshoppers - NodeSchool 🔝
  • JavaScript Quiz beginner level - Skillvalue 🔝

• 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()

⬆ 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

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

⬆ back to top

---

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

David Dias 🖋 🚧 👀

Simone Poggiali 🖋

Arunava (Aru) 🖋

License

⬆ back to top