Light

thedaviddias / resources-front-end-beginner Goto Github PK

View Code? Open in Web Editor NEW

4.0K 157.0 406.0 100 KB

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

Home Page: https://thedaviddias.github.io/Resources-Front-End-Beginner/

License: MIT License

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

resources-front-end-beginner's Introduction

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

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

resources-front-end-beginner's People

Contributors

Stargazers

Watchers

Forkers

raknjarasoa cega umarmw gitter-badger jonathanbarthlm nibblecomm cogitovsmachina dub4ek cyberheartmi9 djprmf kalidindis jjgilreath devesh-shetty luannguyenqv pineontheway mehrdad-shokri yashandonia lyncolnms karthikraja34 ffadilaputra werockstar singhmohancs allanjaymonteclaro dprol nguyensach mariajackson1 chaojianhu truevalentine lyrl bettermonkey ayush9398 cargarg7 azrealy sriram20 badexception fengweijp wcspt gajulapramod ravinthranath nampham-nt laryssaferreiras manan057 davyyin hi-im-rahul dwij2812 ramaraju-1996 davgit damansingh864 prabz mypan ackcidentally nitinreddy3 dupli any28flo ionutblt longdanh golinikhitha alvinblack equistene sernalab shivajothi marcusberger stefanomonteiro rahul-sr john-karanja tuanluu-agilityio cipengxu itssid kathiravanraja tindt4869 elementwebdev mardianto yunchaotsai venkadesh16 a694750795 hoasung01 gonzaloreciog devenlu marcloupias nnamdei dsc-unilag worldrules ftolleson sidheshwar06 gourav-singhal arrolin belavadi nabilashraf chrisdaglas neloy-ahmed yudi-tan gauravmehla rava-dosa hien nssilva goryszewskig amiham-singh palfaro91 chrismuiruriz thelexmendoza

resources-front-end-beginner's Issues

What about tools about Front-End quality?

Thanks for the hard work compiling all the resources. Have you considered adding some audit tools?

Accessibility: tanaguru, asquatasun, …
Global quality: opquast
Performance: dareboost, gtmetrix, …
Security (yep, even on the front-end)

Reactjs is missing, quite popular now a days with Front End Developers

add CSS grid Courses

CSS Grid courses by scrimba

Add Codrops Collective to the Newsletters section?

https://tympanus.net/codrops/collective/

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.

Jobs