├── .all-contributorsrc
├── .github
├── ISSUE_TEMPLATE
│ ├── 01-suggest-changes.yml
│ ├── 02-bug-report.yml
│ ├── 03-feature-suggestion.yml
│ └── config.yml
├── funding.yml
├── stale.yml
└── workflows
│ └── check.yml
├── CONTRIBUTING.md
├── CONTRIBUTORS.md
├── LICENSE
├── README.md
└── _config.yml
/.all-contributorsrc:
--------------------------------------------------------------------------------
1 | {
2 | "projectName": "Resources-Front-End-Beginner",
3 | "projectOwner": "thedaviddias",
4 | "files": [
5 | "CONTRIBUTORS.md",
6 | "README.md"
7 | ],
8 | "imageSize": 120,
9 | "repoType": "github",
10 | "contributors": [
11 | {
12 | "login": "thedaviddias",
13 | "name": "David Dias",
14 | "avatar_url": "https://avatars.githubusercontent.com/u/237229?v=4",
15 | "profile": "https://thedaviddias.dev",
16 | "contributions": [
17 | "content",
18 | "maintenance",
19 | "review"
20 | ]
21 | },
22 | {
23 | "login": "gibbok",
24 | "name": "Simone Poggiali",
25 | "avatar_url": "https://avatars.githubusercontent.com/u/17195702?v=4",
26 | "profile": "https://github.com/gibbok",
27 | "contributions": [
28 | "content"
29 | ]
30 | },
31 | {
32 | "login": "liquid-O2",
33 | "name": "Arunava (Aru)",
34 | "avatar_url": "https://avatars.githubusercontent.com/u/83031120?v=4",
35 | "profile": "http://arunava.dev",
36 | "contributions": [
37 | "content"
38 | ]
39 | }
40 | ],
41 | "commitType": "docs",
42 | "commitConvention": "angular",
43 | "contributorsPerLine": 7
44 | }
45 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/01-suggest-changes.yml:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thedaviddias/Resources-Front-End-Beginner/8dd544c8f18bd7809f1cc2f8af9c6ad280947839/.github/ISSUE_TEMPLATE/01-suggest-changes.yml
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/02-bug-report.yml:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thedaviddias/Resources-Front-End-Beginner/8dd544c8f18bd7809f1cc2f8af9c6ad280947839/.github/ISSUE_TEMPLATE/02-bug-report.yml
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/03-feature-suggestion.yml:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thedaviddias/Resources-Front-End-Beginner/8dd544c8f18bd7809f1cc2f8af9c6ad280947839/.github/ISSUE_TEMPLATE/03-feature-suggestion.yml
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/config.yml:
--------------------------------------------------------------------------------
1 | blank_issues_enabled: false
2 | contact_links:
3 | - name: 📝 Typo or Grammatical Mistake
4 | url: https://github.com/thedaviddias/Resources-Front-End-Beginner/tree/main
5 | about: Please submit a pull request instead of reporting it as an issue.
6 |
--------------------------------------------------------------------------------
/.github/funding.yml:
--------------------------------------------------------------------------------
1 | github: thedaviddias
2 | ko_fi: thedaviddias
3 | open_collective: thedaviddias
4 |
--------------------------------------------------------------------------------
/.github/stale.yml:
--------------------------------------------------------------------------------
1 | # Number of days of inactivity before an issue becomes stale
2 | daysUntilStale: 60
3 | # Number of days of inactivity before a stale issue is closed
4 | daysUntilClose: 7
5 | # Issues with these labels will never be considered stale
6 | exemptLabels:
7 | - pinned
8 | - security
9 | # Label to use when marking an issue as stale
10 | staleLabel: wontfix
11 | # Comment to post when marking an issue as stale. Set to `false` to disable
12 | markComment: >
13 | This issue has been automatically marked as stale because it has not had
14 | recent activity. It will be closed if no further activity occurs. Thank you
15 | for your contributions.
16 | # Comment to post when closing a stale issue. Set to `false` to disable
17 | closeComment: false
18 |
--------------------------------------------------------------------------------
/.github/workflows/check.yml:
--------------------------------------------------------------------------------
1 | name: Check Markdown links
2 |
3 | on:
4 | pull_request:
5 | branches:
6 | - main
7 | push:
8 | branches:
9 | - main
10 | workflow_dispatch:
11 |
12 | jobs:
13 | markdown-link-check:
14 | runs-on: ubuntu-latest
15 |
16 | steps:
17 | - name: Checkout repo
18 | uses: actions/checkout@v3
19 |
20 | - name: Check broken links
21 | uses: gaurav-nelson/github-action-markdown-link-check@1.0.15
22 | with:
23 | base-branch: main
24 | file-path: './README.md'
25 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing guide
2 | Want to contribute to move.it project? Awesome!
3 | There are many ways you can contribute, see below.
4 |
5 | ## Opening issues
6 |
7 | Open an issue to report bugs or to propose new features.
8 |
9 | - Reporting bugs: describe the bug as clearly as you can, including steps to reproduce, what happened and what you were expecting to happen.
10 |
11 | - Proposing features: explain the proposed feature, what it should do, why it is useful, how users should use it. Give us as much info as possible so it will be easier to discuss, access and implement the proposed feature. When you're unsure about a certain aspect of the feature, feel free to leave it open for others to discuss and find an appropriate solution.
12 |
13 | ## Proposing pull requests
14 |
15 | Pull requests are very welcome. Note that if you are going to propose drastic changes, be sure to open an issue for discussion first, to make sure that your PR will be accepted before you spend effort coding it.
16 |
17 | Fork the move.it repository, clone it locally and create a branch for your proposed bug fix or new feature. Avoid working directly on the master branch.
18 |
19 | ### How to contribute 💪
20 |
21 |
22 | Create a new branch with your changes:
23 | ```bash
24 | git checkout -b <branch>
25 | ```
26 |
27 | Save your changes and create a commit message telling you what you did:
28 | ```bash
29 | git commit -m "<commit>"
30 | ```
31 |
32 | Submit your changes:
33 | ```bash
34 | git push origin <branch>
35 | ```
36 |
--------------------------------------------------------------------------------
/CONTRIBUTORS.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thedaviddias/Resources-Front-End-Beginner/8dd544c8f18bd7809f1cc2f8af9c6ad280947839/CONTRIBUTORS.md
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2023 David Dias
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # The most essential list of resources for Front-End beginners (🇺🇸 & 🇫🇷)
2 |
3 | [](https://creativecommons.org/publicdomain/zero/1.0/)
4 |
5 | If you want to learn how to become a Front-End developer, you are in the right place!
6 |
7 | 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 :)
8 |
9 | I'm using some emoticons to give you more information on these links.
10 |
11 | 1. All links without a flag are in English 🇺🇸 🇬🇧. The flag 🇫🇷 means the resource is in French, 🌍 means the resource is multi-language.
12 | 2. 💰 are paid tutorials, 🆓 are free tutorials. Sometimes you will have some free videos / articles and other paid on the same website.
13 | 3. 🔝 indicate that the link is a reference
14 | 4. 📹 is present when video content is available
15 |
16 | ---
17 | ## Table of Contents
18 | 1. **[Start here](#start-here)**
19 | 2. **[Learn HTML](#learn-html)**
20 | 3. **[Learn CSS](#learn-css)**
21 | 4. **[Learn JavaScript](#learn-javascript)**
22 | 5. **[Learn Git](#learn-git)**
23 | 6. **[Tools](#tools)**
24 | 7. **[Chat / Slack](#chat--slack-channels)**
25 | 8. **[Aggregators / News](#aggregators--news)**
26 | 9. **[Newsletters](#newsletters)**
27 |
28 | 
29 | ***From Web Developer Roadmap 2017***
30 |
31 | ---
32 | ## Start here
33 | * Understand Internet
34 | * [How Does the Internet Actually Work?](https://www.youtube.com/watch?v=5SXK__rm6DM) 📹 🔝
35 | * [What is Internet?](https://www.youtube.com/watch?v=Dxcc6ycZ73M) 📹 🔝
36 | * [How does the internet work? - Part 1 (It's like a bad drawing.)](https://www.youtube.com/watch?v=XZIMEoUhOA8) 📹
37 | * [How Does the Internet Work?](https://www.youtube.com/watch?v=7XoaoFjKqYM) 📹
38 | * [How the Internet Works for Developers - Pt 1 - Overview & Frontend](https://www.youtube.com/watch?v=e4S8zfLdLgQ) 📹
39 | * 🇫🇷 [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) 📹 🔝
40 | * 🇫🇷 [C'est pas sorcier -INTERNET : Les pirates tissent leur toile](https://www.youtube.com/watch?v=VB7vsaan8PM) 📹
41 | * 🇫🇷 [Comprendre Internet - histoire](https://www.youtube.com/watch?v=sLJ-QztAqNE) 📹
42 | * 🇫🇷 [Comprendre comment marche Internet](https://www.youtube.com/playlist?list=PL2972E0D013FE7DE7) 📹
43 | * 🇫🇷 [Comprendre Internet](http://www.comprendre-internet.com/)
44 | * Understand your journey
45 | → [Web Developer Roadmap 2019 - Github](https://github.com/kamranahmedse/developer-roadmap)
46 |
47 | **[⬆ back to top](#table-of-contents)**
48 |
49 | ---
50 | ## Learn HTML
51 |
52 | * Courses / Tutorials
53 | * 🌍 [Learn HTML - CodeCademy](https://www.codecademy.com/learn/learn-html) 💰🆓 📹 🔝
54 | * [HTML5 and CSS - FreeCodeCamp](https://www.freecodecamp.org/map#nested-collapseHTML5andCSS) 🆓 🔝
55 | * [MarkSheet - A free HTML & CSS tutorial](http://marksheet.io/) 🆓 🔝
56 | * [Intro to HTML/CSS: Making webpages - KhanAcademy](https://www.khanacademy.org/computing/computer-programming/html-css) 🆓
57 | * [Learn the Web](https://learn-the-web.algonquindesign.ca/) 🆓
58 | * [HTML5 Introduction - EDX](https://www.edx.org/course/html5-introduction-w3cx-html5-0x-0) 🆓
59 | * [HTML - Creating basic web pages](https://bento.io/topic/html) 🆓
60 | * [Learn to code HTML & CSS - Shay Howe](http://learn.shayhowe.com/html-css/) 🆓
61 | * [HTML Tutorials](http://www.htmldog.com/) 🆓
62 | * [Intro to HTML and CSS - Udacity](https://www.udacity.com/course/intro-to-html-and-css--ud304) 🆓
63 | * [Learn HTML in 12 minutes - Youtube](https://www.youtube.com/watch?v=bWPMSSsVdPk) 🆓 📹
64 | * [Learn HTML in 30 Minutes - Youtube](https://www.youtube.com/watch?v=hrZqiCUx6kg) 🆓 📹
65 | * [HTML Fundamentals - SoloLearn](https://www.sololearn.com/Course/HTML/) 💰🆓
66 | * [HTML Basics - TreeHouse](https://teamtreehouse.com/library/html-basics-2) 💰 📹
67 | * [HTML/CSS Path - Code School](https://www.codeschool.com/learn/html-css) 💰 📹
68 | * [HTML Essential Training - Lynda](https://www.lynda.com/Web-Development-tutorials/HTML-Essential-Training/170427-2.html) 💰 📹
69 | * [Your First Day with HTML - Pluralsight](https://www.pluralsight.com/courses/your-first-day-html-1665) 💰 📹
70 | * [HTML Fundamentals - Pluralsight](https://www.pluralsight.com/courses/html-fundamentals) 💰 📹
71 | * [Introduction to HTML and CSS - TreeHouse](https://teamtreehouse.com/library/introduction-to-html-and-css) 💰
72 | * [Introduction to HTML5 and CSS3 - Frontend Masters](https://frontendmasters.com/courses/introduction-html5-css3/) 💰 📹
73 | * [HTML/CSS on Code Avengers](https://www.codeavengers.com/profile#html-css) 💰🆓
74 | * [30 Days to Learn HTML & CSS](https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css?_ga=2.133963854.1549833602.1507724443-1498690494.1505785599) 💰🆓 📹
75 | * [Introduction to HTML](https://scrimba.com/g/ghtml) 🆓 📹
76 | * 🇫🇷 [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) 💰🆓
77 | * 🇫🇷 [Tutoriels web HTML - Alsacréations](https://www.alsacreations.com/tuto/liste/1-HTML) 🆓
78 | * 🇫🇷 [HTML et CSS - Le Cours Complet - Udemy](https://www.udemy.com/cours-html-css/) 💰
79 | * [HTML5 Tutorial - w3schools](https://www.w3schools.com/html/) 🆓
80 | * [AlgoExpert's Front-end Expert Course](https://www.algoexpert.io/content#fe) 💰
81 |
82 | * Documentation
83 | * [HTML Reference](http://htmlreference.io/) 🔝
84 | * [Introduction to HTML - MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML) 🔝
85 | * [HTML Cheat Sheet - Compilation](https://websitesetup.org/html5-cheat-sheet/)
86 | * [HTML5 Tutorial PDF - Tutorialspoint](https://www.tutorialspoint.com/html5/html5_tutorial.pdf)
87 | * [Getting to Know HTML - Shay Howe](https://learn.shayhowe.com/html-css/getting-to-know-html/)
88 | * [The Elements of HTML](https://rawgit.com/w3c/elements-of-html/master/index.html)
89 |
90 | * Guidelines
91 | * [SEO, Speed and Security Best Practices - Checkbot](https://www.checkbot.io/guide/)
92 | * [HTML Best Practices - Github](https://github.com/hail2u/html-best-practices)
93 |
94 | * Quiz / Challenges
95 | * [LearnYouHTML - NodeSchool](https://github.com/denysdovhan/learnyouhtml)
96 | * [HTML Quiz beginner level - Skillvalue](https://skillvalue.com/en/quizzes/front-end/html5-beginner-level)
97 |
98 | * Articles/Books
99 | * [Learn to Code HTML and CSS: Develop and Style Websites](https://www.amazon.com/Learn-Code-HTML-CSS-Websites/dp/0321940520)
100 | * [HTML and CSS: Design and Build Websites](https://www.amazon.com/HTML-CSS-Design-Build-Websites/dp/1118008189)
101 | * 🇫🇷 [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)
102 |
103 | **[⬆ back to top](#table-of-contents)**
104 |
105 | ---
106 | ### Learn CSS
107 | * Courses / Tutorials
108 |
109 | * 🌍 [Learn CSS - CodeCademy](https://www.codecademy.com/learn/learn-css) 💰🆓 🔝
110 | * [Learn CSS in 12 Minutes - Youtube](https://www.youtube.com/watch?v=0afZj1G0BIE) 🆓 📹
111 | * [CSS Basics - TreeHouse](https://teamtreehouse.com/library/css-basics) 💰 📹
112 | * [Introduction to CSS](https://www.pluralsight.com/courses/css-intro) 💰 📹
113 | * [CSS3 In-Depth](https://frontendmasters.com/courses/css3-in-depth/) 💰 📹
114 | * [CSS Essential Training 3 - Lynda](https://www.lynda.com/CSS-tutorials/CSS-Essential-Training-3/609030-2.html) 💰 📹
115 | * [Scalable Modular Architecture for CSS (SMACSS) - Frontend Masters](https://frontendmasters.com/courses/smacss/) 💰 📹
116 | * 🇫🇷 [Tutoriel HTML/CSS - Box Sizing - Grafikart](https://www.youtube.com/watch?v=oFziQkOqKd0) 🆓 📹
117 | * 🇫🇷 [Tutoriel CSS : Comment bien organiser son CSS - Grafikart](https://www.youtube.com/watch?v=t8Up7GiNIoU) 🆓 📹
118 | * 🇫🇷 [Tutoriels web CSS - Alsacréations](https://www.alsacreations.com/tuto/liste/2-CSS) 🆓
119 | * [CSS Tutorial - w3schools](https://www.w3schools.com/css/) 🆓
120 | * [Introduction to CSS](https://scrimba.com/g/gintrotocss) 🆓 📹
121 | * [Learn CSS - Sololearn](https://www.sololearn.com/Course/CSS/)
122 | * Selectors
123 | * [CSS Diner](https://flukeout.github.io/) 🆓 🔝
124 | * Flexbox
125 | * 🌍 [Flexbox Froggy](http://flexboxfroggy.com/) 🆓 🔝
126 | * [Flexbox Defense](http://www.flexboxdefense.com/) 🆓 🔝
127 | * CSS Grid
128 | * 🌍 [Grid Garden](http://cssgridgarden.com/) 🆓 🔝
129 | * [Learn CSS Grid with Wes Bos](https://cssgrid.io/) 🆓 🔝
130 |
131 | * Documentation
132 | * [CSS Reference](http://cssreference.io/) 🔝
133 | * [CSS - MDN web docs](https://developer.mozilla.org/en-US/docs/Web/CSS) 🔝
134 | * [Open Web Reference - CSS](http://ref.openweb.io/CSS/)
135 | * [CSS Reference](https://tympanus.net/codrops/css_reference/)
136 | * [Getting to know CSS](https://learn.shayhowe.com/html-css/getting-to-know-css/)
137 |
138 | * Guidelines
139 | * 🌍 [CSS Guidelin.es](https://cssguidelin.es/) 🔝
140 | * [Airbnb CSS / Sass Styleguide - Github](https://github.com/airbnb/css)
141 | * [Scalable and Modular Architecture for CSS - SMACSS](https://smacss.com/) 🔝
142 | * [Google HTML/CSS Style Guide - Github](https://google.github.io/styleguide/htmlcssguide.html)
143 | * [Sensible CSS Guidelines - Github](https://github.com/chris-pearce/css-guidelines)
144 | * [Trello CSS Guide - Github](https://gist.github.com/bobbygrace/9e961e8982f42eb91b80)
145 |
146 | * Quizz / challenges
147 | * [CSS Quiz beginner level - Skillvalue](https://skillvalue.com/en/quizzes/front-end/css-beginner-level-2)
148 |
149 | * Articles/Books
150 | * [CSS, The definitive guide - Eric Meyer](https://www.amazon.com/CSS-Definitive-Guide-Eric-Meyer/dp/0596527330)
151 | * [Enduring CSS - Ben Frain](https://www.amazon.com/Enduring-CSS-Ben-Frain/dp/1787282805)
152 | * [The CSS PocketGuide - Chris Casciano](https://www.amazon.com/CSS-Pocket-Guide-Peachpit/dp/0321732278)
153 | * [CSS Secrets: Better Solutions to Everyday Web Design Problems - Lea Verou](https://www.amazon.com/CSS-Secrets-Solutions-Everyday-Problems/dp/1449372635)
154 | * [Professional CSS3 - Piotr Sikora](https://www.packtpub.com/web-development/professional-css3)
155 | * 🇫🇷 [CSS3 - Raphaël Goetter, Hugo Giraudel](http://www.eyrolles.com/Informatique/Livre/css3-9782212140231)
156 | * 🇫🇷 [CSS avancées - Raphaël Goetter](http://www.eyrolles.com/Informatique/Livre/css-avancees-9782212134056)
157 | * 🇫🇷 [CSS avancées, Vers HTML5 et CSS3 - Mathieu Nebra](%>)
158 | * 🇫🇷 [Premier pas en CSS3 et HTML5](http://www.eyrolles.com/Informatique/Livre/premiers-pas-en-css3-et-html5-9782212674309)
159 |
160 | **[⬆ back to top](#table-of-contents)**
161 |
162 | ---
163 | ### Learn JavaScript
164 | * Courses / Tutorials
165 |
166 | * [Basic JavaScript](https://www.freecodecamp.org/map#nested-collapseBasicJavaScript) 🆓 🔝
167 | * [Introduction To JavaScript - CodeCademy](https://www.codecademy.com/learn/introduction-to-javascript) 💰🆓 🔝
168 | * [Beau teaches JavaScript - Youtube](https://www.youtube.com/playlist?list=PLWKjhJtqVAbmoiNlqLJg1gxEjEuKHHcn_) 🆓 📹
169 | * [JS 30 For 30 - 30 Projects for 30 Days](https://javascript30.com/) 🆓 📹
170 | * [Intro to JavaScript - Udacity](https://www.udacity.com/course/intro-to-javascript--ud803) 🆓
171 | * [Learn JavaScript - Codementor](https://www.codementor.io/javascript) 🆓
172 | * [Introduction to JavaScript Programming - Frontend Masters](https://frontendmasters.com/courses/javascript-basics/) 💰 📹
173 | * [LambdaSchool Javascript Mini Bootcamp](https://lambdaschool.com/free-course-web/)💰🆓 🔝
174 | * [JavaScript Essential Training - Lynda](https://www.lynda.com/JavaScript-tutorials/JavaScript-Essential-Training/574716-2.html) 💰 📹
175 | * [JavaScript Fundamentals - Tuts+](https://code.tutsplus.com/courses/javascript-fundamentals) 💰🆓 📹
176 | * [Getting Started with JavaScript for Web Development - Scotch](https://scotch.io/courses/getting-started-with-javascript) 💰🆓
177 | * [JavaScript Basics - TreeHouse](https://teamtreehouse.com/library/javascript-basics) 💰
178 | * [JavaScript path - Code School](https://www.codeschool.com/learn/javascript) 💰
179 | * [ES6 for everyone](https://es6.io/) 💰 📹
180 | * 🇫🇷 [Tutoriels web JavaScript - Alsacréations](https://www.alsacreations.com/tuto/liste/5-Javascript) 🆓
181 | * [JavaScript.Info](http://javascript.info/)
182 | * [JavaScript Tutorial - w3schools](https://www.w3schools.com/js/) 🆓
183 | * [Javascript Tutorial - Watch and Code by Gordon Zhu](https://watchandcode.com/) 🆓💰
184 | * [Learn Javascript](https://www.sololearn.com/Course/JavaScript/)
185 | * [Introduction to Javascript](https://scrimba.com/g/gintrotojavascript) 🆓
186 |
187 | * Documentation
188 | * [JavaScript reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference)
189 | * [Modern JavaScript Cheatsheet](https://mbeaudru.github.io/modern-js-cheatsheet/)
190 | * [ES6 Katas - Learn ES6 by doing it](http://es6katas.org/)
191 |
192 | * Guidelines
193 | * [Clean Code concepts adapted for JavaScript - Github](https://github.com/ryanmcdermott/clean-code-javascript)
194 |
195 | * Quiz / challenges
196 | * [Workshoppers - NodeSchool](https://nodeschool.io/) 🔝
197 | * [JavaScript Quiz beginner level - Skillvalue](https://skillvalue.com/en/quizzes/front-end/javascript-beginner-level-2) 🔝
198 |
199 | * Articles / Books
200 | * [Practical Modern JavaScript](https://github.com/mjavascript/practical-modern-javascript) 🆓
201 | * [You Don't Know JS (book series)](https://github.com/getify/You-Dont-Know-JS) 🆓
202 | * [JavaScript, the definitive guide](https://www.amazon.fr/JavaScript-Definitive-Guide-David-Flanagan/dp/0596805527)
203 | * [Javascript: The Good Parts](https://www.amazon.fr/Javascript-Good-Parts-D-Crockford/dp/0596517742)
204 | * [Eloquent JavaScript: A Modern Introduction to Programming](https://www.amazon.com/Eloquent-JavaScript-2nd-Ed-Introduction/dp/1593275846)
205 | * [JavaScript Allongée](https://leanpub.com/javascriptallongesix)
206 | * [Learning JavaScript](https://www.amazon.com/Learning-JavaScript-Essentials-Application-Development/dp/1491914912)
207 | * [Understanding ECMAScript 6: The Definitive Guide for JavaScript Developers](https://www.amazon.fr/Understanding-ECMAScript-Definitive-JavaScript-Developers/dp/1593277571)
208 | * [JavaScript and JQuery: Interactive Front-End Web Development](https://www.amazon.com/JavaScript-JQuery-Interactive-Front-End-Development/dp/1118531647)
209 | * 🇫🇷 [JavaScript - Développez efficacement](https://www.amazon.fr/JavaScript-Développez-efficacement-2e-édition/dp/2409009727)
210 | * [Airbnb JavaScript Guide()](https://github.com/airbnb/javascript)
211 |
212 | **[⬆ back to top](#table-of-contents)**
213 |
214 | ---
215 |
216 | ### Learn TypeScript
217 |
218 | * Articles / Books
219 | * [The Concise TypeScript Book](https://github.com/gibbok/typescript-book) 🆓
220 |
221 | ---
222 | ## Learn GIT
223 |
224 | * [15 minutes to learn Git](https://try.github.io) 🔝
225 | * [Git-it (Desktop App) - NodeSchool](https://github.com/jlord/git-it-electron) 🆓 🔝
226 | * 🌍 [Learn Git on CodeCademy](https://www.codecademy.com/learn/learn-git) 💰🆓 🔝
227 | * [Git-it is a (Mac, Win, Linux) Desktop App for Learning Git and GitHub](https://github.com/jlord/git-it-electron) 🆓 🔝
228 | * [Learn Git Branching – Educational challenges](https://learngitbranching.js.org/) 🆓
229 | * [Introduction to version control with Git - Microsoft Learn](https://docs.microsoft.com/en-gb/learn/paths/intro-to-vc-git/) 🆓
230 | * [Git-it – Learn Git in a real terminal](http://jlord.us/git-it/) 🆓
231 | * [Git CheatSheet](http://www.ndpsoftware.com/git-cheatsheet.html) 🆓
232 | * [Git Essential Training - Lynda](https://www.lynda.com/Git-tutorials/Git-Essential-Training/100222-2.html) 💰 📹
233 | * [Try Git](https://www.codeschool.com/courses/try-git) 🆓
234 | * [Learn Git - Git Tutorials, workflows and commands](https://www.atlassian.com/git)🆓
235 |
236 | **[⬆ back to top](#table-of-contents)**
237 |
238 | ---
239 | ## Tools
240 | * Essential
241 | * [Github](https://github.com/) 💰🆓 🔝
242 | * Website auditors
243 | * [Checkbot](https://www.checkbot.io/) 💰🆓 🔝
244 | * Playgrounds
245 | * [Codepen](https://codepen.io/) 💰🆓 🔝
246 | * [CodeSandbox](https://codesandbox.io/)
247 | * [SassMeister](https://www.sassmeister.com/)
248 | * [JSFiddle](https://jsfiddle.net/)
249 | * [JSBin](https://jsbin.com/)
250 | * [Thimble](https://thimble.mozilla.org/en-US/)
251 |
252 | * Web design Tools
253 | * [Webflow](https://webflow.com/)🆓💰
254 | * [Framer](https://www.framer.com/)🆓💰
255 |
256 | * Editors
257 | * [Visual Studio Code](https://code.visualstudio.com/) 🆓 🔝
258 | * [Sublime Text](https://www.sublimetext.com/) 🆓
259 | * [Atom](https://atom.io/) 🆓
260 | * [Brackets](http://brackets.io/) 🆓
261 | * [NotePad++](https://notepad-plus-plus.org/) 🆓
262 | * [Cloud9](https://c9.io/) 💰🆓
263 |
264 | **[⬆ back to top](#table-of-contents)**
265 |
266 | ---
267 | ## Chat / Slack channels
268 | * [FEDs - Slack](https://feds.slack.com)
269 | * 🇫🇷 [Front-end France - Slack](https://frontendfr.slack.com)
270 | * 🇫🇷 [DevFr - Telegram](https://t.me/DevFr)
271 |
272 | ---
273 | ### Aggregators / News
274 |
275 | * [Smashing Magazine](https://www.smashingmagazine.com/) 🔝
276 | * [CSS-Tricks](https://css-tricks.com/) 🔝
277 | * [Front-End Stash](https://frontendstash.top/) 🔝
278 | * [Codrops](https://tympanus.net/codrops/) 🔝
279 | * [Front-End Front - Basically, front-end news](https://frontendfront.com/)
280 | * [Echo JS - JavaScript News](http://www.echojs.com/)
281 | * [A list Apart - Code](https://alistapart.com/topic/code)
282 | * [Scotch - Code Eat Sleep Loop](https://scotch.io/)
283 | * [Daily.dev](https://daily.dev/)
284 |
285 | **[⬆ back to top](#table-of-contents)**
286 |
287 | ---
288 | ## Newsletters
289 | * [Frontend Focus](https://frontendfoc.us/)
290 | * [CSS Weekly](http://css-weekly.com/)
291 | * [CSS-Tricks](https://css-tricks.com/newsletters/)
292 | * [JavaScript Weekly](http://javascriptweekly.com/)
293 | * [WebTools Weekly](https://webtoolsweekly.com/)
294 | * [Smashing Magazine](https://www.smashingmagazine.com/the-smashing-newsletter/)
295 | * [Sidebar](https://sidebar.io/)
296 | * [Responsive Design Weekly](http://responsivedesignweekly.com/)
297 | * [JSK Weekly](https://javascriptkicks.com/)
298 | * [WebRTC Weekly](https://webrtcweekly.com/)
299 |
300 | ## Contributing
301 |
302 | **Open an issue or a pull request to suggest changes or additions.**
303 |
304 | ## Contributors
305 |
306 | <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
307 | <!-- prettier-ignore-start -->
308 | <!-- markdownlint-disable -->
309 | <table>
310 | <tbody>
311 | <tr>
312 | <td align="center" valign="top" width="14.28%"><a href="https://thedaviddias.com"><img src="https://avatars.githubusercontent.com/u/237229?v=4?s=120" width="120px;" alt="David Dias"/><br /><sub><b>David Dias</b></sub></a><br /><a href="#content-thedaviddias" title="Content">🖋</a> <a href="#maintenance-thedaviddias" title="Maintenance">🚧</a> <a href="https://github.com/thedaviddias/Resources-Front-End-Beginner/pulls?q=is%3Apr+reviewed-by%3Athedaviddias" title="Reviewed Pull Requests">👀</a></td>
313 | <td align="center" valign="top" width="14.28%"><a href="https://github.com/gibbok"><img src="https://avatars.githubusercontent.com/u/17195702?v=4?s=120" width="120px;" alt="Simone Poggiali"/><br /><sub><b>Simone Poggiali</b></sub></a><br /><a href="#content-gibbok" title="Content">🖋</a></td>
314 | <td align="center" valign="top" width="14.28%"><a href="http://arunava.dev"><img src="https://avatars.githubusercontent.com/u/83031120?v=4?s=120" width="120px;" alt="Arunava (Aru)"/><br /><sub><b>Arunava (Aru)</b></sub></a><br /><a href="#content-liquid-O2" title="Content">🖋</a></td>
315 | </tr>
316 | </tbody>
317 | </table>
318 |
319 | <!-- markdownlint-restore -->
320 | <!-- prettier-ignore-end -->
321 |
322 | <!-- ALL-CONTRIBUTORS-LIST:END -->
323 |
324 | ## License
325 |
326 | [](https://creativecommons.org/publicdomain/zero/1.0/)
327 |
328 | **[⬆ back to top](#table-of-contents)**
329 |
--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-cayman
--------------------------------------------------------------------------------