From 0effd713661c4e46e92291304ce1c8183505ee43 Mon Sep 17 00:00:00 2001 From: Adekola Olawale Date: Mon, 31 Oct 2022 08:50:11 +0000 Subject: [PATCH] Add content to frontend roadmap (#2709) * Added resources in frontend and react roadmaps * moved new resources below exiting ones && BadgeLink stick to one line Co-authored-by: Kamran Ahmed --- .../content/101-html/100-learn-the-basics.md | 2 ++ .../content/101-html/101-writing-semantic-html.md | 4 +++- .../100-frontend/content/101-html/104-accessibility.md | 10 ++++++---- .../roadmaps/100-frontend/content/101-html/readme.md | 1 + .../100-frontend/content/102-css/101-making-layouts.md | 4 +++- .../roadmaps/100-frontend/content/102-css/readme.md | 2 ++ .../103-javascript/103-es6-and-modular-javascript.md | 1 + .../content/103-javascript/104-concepts.md | 1 + .../100-frontend/content/103-javascript/readme.md | 1 + .../100-basic-usage-of-git.md | 1 + .../content/104-version-control-systems/readme.md | 2 ++ .../110-build-tools/101-module-bundlers/100-webpack.md | 1 + .../107-state-management/101-redux.md | 2 ++ 13 files changed, 26 insertions(+), 6 deletions(-) diff --git a/content/roadmaps/100-frontend/content/101-html/100-learn-the-basics.md b/content/roadmaps/100-frontend/content/101-html/100-learn-the-basics.md index 60064a0bd..7ce3b9e02 100644 --- a/content/roadmaps/100-frontend/content/101-html/100-learn-the-basics.md +++ b/content/roadmaps/100-frontend/content/101-html/100-learn-the-basics.md @@ -7,3 +7,5 @@ HTML stands for HyperText Markup Language. It is used on the frontend and gives MDN Docs: Getting Started with HTML HTML Full Course - Build a Website Tutorial HTML Tutorial for Beginners: HTML Crash Course +HTML Cheatsheet +Scaler: HTML diff --git a/content/roadmaps/100-frontend/content/101-html/101-writing-semantic-html.md b/content/roadmaps/100-frontend/content/101-html/101-writing-semantic-html.md index 8e4f2ad43..2df5a81c4 100644 --- a/content/roadmaps/100-frontend/content/101-html/101-writing-semantic-html.md +++ b/content/roadmaps/100-frontend/content/101-html/101-writing-semantic-html.md @@ -7,4 +7,6 @@ Semantic element clearly describes its meaning to both the browser and the devel W3Schools: Semantic HTML How To Write Semantic HTML HTML Best Practices – How to Build a Better HTML-Based Website -Semantic HTML: What It Is and How It Improves Your Site \ No newline at end of file +Semantic HTML: What It Is and How It Improves Your Site +How To Write Semantic HTML +Semantic Markup diff --git a/content/roadmaps/100-frontend/content/101-html/104-accessibility.md b/content/roadmaps/100-frontend/content/101-html/104-accessibility.md index 98442ee25..f306b3e96 100644 --- a/content/roadmaps/100-frontend/content/101-html/104-accessibility.md +++ b/content/roadmaps/100-frontend/content/101-html/104-accessibility.md @@ -1,10 +1,12 @@ # Accessibility + Web accessibility means that websites, tools, and technologies are designed and developed in such a way that people with disabilities can use them easily. Free Content -Developing for Web Accessibility by W3C WAI - -Accessibility Tutorial - +Developing for Web Accessibility by W3C WAI +Accessibility Tutorial A Complete Guide To Accessible Front-End Components Complete Playlist on Accessibility +MDN Accessibility +Accessibility for Developers by Google +Web Accessibility by Udacity diff --git a/content/roadmaps/100-frontend/content/101-html/readme.md b/content/roadmaps/100-frontend/content/101-html/readme.md index 64ae6df30..da8048cfc 100644 --- a/content/roadmaps/100-frontend/content/101-html/readme.md +++ b/content/roadmaps/100-frontend/content/101-html/readme.md @@ -10,3 +10,4 @@ HTML stands for HyperText Markup Language. It is used on the frontend and gives Interactive HTML Course HTML Full Course - Build a Website Tutorial HTML Tutorial for Beginners: HTML Crash Course +HTML For Beginners The Easy Way \ No newline at end of file diff --git a/content/roadmaps/100-frontend/content/102-css/101-making-layouts.md b/content/roadmaps/100-frontend/content/102-css/101-making-layouts.md index 3051bacd4..10703b2ad 100644 --- a/content/roadmaps/100-frontend/content/102-css/101-making-layouts.md +++ b/content/roadmaps/100-frontend/content/102-css/101-making-layouts.md @@ -1,6 +1,6 @@ # Making layouts -Float, grid, flexbox, positioning, display and box model are some of the key topics that are used for making layouts. Use the resources below to learn about these topics: +Float, grid, flexbox, positioning, display and box model are some of the key topics that are used for making layouts. Use the resources below to learn about these topics: Free Content @@ -12,3 +12,5 @@ Float, grid, flexbox, positioning, display and box model are some of the key top Positioning Types: How Do They Differ? The Box Model The CSS Display Property +A Complete Guide to Flexbox +A Complete Guide to Grid \ No newline at end of file diff --git a/content/roadmaps/100-frontend/content/102-css/readme.md b/content/roadmaps/100-frontend/content/102-css/readme.md index 9047a893b..3ee29fea1 100644 --- a/content/roadmaps/100-frontend/content/102-css/readme.md +++ b/content/roadmaps/100-frontend/content/102-css/readme.md @@ -15,3 +15,5 @@ CSS or Cascading Style Sheets is the language used to style the frontend of any What The Flexbox! Learn CSS | Codecademy Learn Intermediate CSS | Codecademy +100 Days CSS Challenge +CSS Tutorial | Scaler \ No newline at end of file diff --git a/content/roadmaps/100-frontend/content/103-javascript/103-es6-and-modular-javascript.md b/content/roadmaps/100-frontend/content/103-javascript/103-es6-and-modular-javascript.md index 3f6bcdf72..f6f4ecf85 100644 --- a/content/roadmaps/100-frontend/content/103-javascript/103-es6-and-modular-javascript.md +++ b/content/roadmaps/100-frontend/content/103-javascript/103-es6-and-modular-javascript.md @@ -8,3 +8,4 @@ ECMAScript 2015 or ES2015 is a significant update to the JavaScript programming Learn Modern JavaScript in 1 Hour JavaScript ES6, ES7, ES8 Build 15 JavaScript Projects - Vanilla JavaScript +Modern JavaScript ES6, ES7 & ES8 \ No newline at end of file diff --git a/content/roadmaps/100-frontend/content/103-javascript/104-concepts.md b/content/roadmaps/100-frontend/content/103-javascript/104-concepts.md index d6cb0770d..12380cd33 100644 --- a/content/roadmaps/100-frontend/content/103-javascript/104-concepts.md +++ b/content/roadmaps/100-frontend/content/103-javascript/104-concepts.md @@ -11,3 +11,4 @@ Learn and understand the concepts such as Hoisting, Event Bubbling, Scope, Proto JavaScript Strict Mode JavaScript Visualized (7 Part Series) DOM vs Shadow DOM vs Virtual DOM +Demystifying JavaScript Promises \ No newline at end of file diff --git a/content/roadmaps/100-frontend/content/103-javascript/readme.md b/content/roadmaps/100-frontend/content/103-javascript/readme.md index ac8793d89..444252898 100644 --- a/content/roadmaps/100-frontend/content/103-javascript/readme.md +++ b/content/roadmaps/100-frontend/content/103-javascript/readme.md @@ -18,3 +18,4 @@ JavaScript allows you to add interactivity to your pages. Common examples that y Build a Netflix Landing Page Clone with HTML, CSS & JS Build 30 Javascript projects in 30 days Learn the basics of JavaScript +JavaScript for Beginners diff --git a/content/roadmaps/100-frontend/content/104-version-control-systems/100-basic-usage-of-git.md b/content/roadmaps/100-frontend/content/104-version-control-systems/100-basic-usage-of-git.md index dca611bbf..ede9b1564 100644 --- a/content/roadmaps/100-frontend/content/104-version-control-systems/100-basic-usage-of-git.md +++ b/content/roadmaps/100-frontend/content/104-version-control-systems/100-basic-usage-of-git.md @@ -3,6 +3,7 @@ [Git](https://git-scm.com/) is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. Free Content +Visual Git Guide Version Control System Introduction Git & GitHub Crash Course For Beginners Learn Git in 20 Minutes diff --git a/content/roadmaps/100-frontend/content/104-version-control-systems/readme.md b/content/roadmaps/100-frontend/content/104-version-control-systems/readme.md index d9d2d2bf4..31accb535 100644 --- a/content/roadmaps/100-frontend/content/104-version-control-systems/readme.md +++ b/content/roadmaps/100-frontend/content/104-version-control-systems/readme.md @@ -6,3 +6,5 @@ Version control systems allow you to track changes to your codebase/files over t Version Control System Introduction Git & GitHub Crash Course For Beginners Learn Git in 20 Minutes +Git Documentation +Learn Git by Atlassian diff --git a/content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/100-webpack.md b/content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/100-webpack.md index 9b6e10f12..01700d63b 100644 --- a/content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/100-webpack.md +++ b/content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/100-webpack.md @@ -6,3 +6,4 @@ Webpack is a module bundler. Its main purpose is to bundle JavaScript files for Webpack Official Website Webpack Documentation +A Complete Guide to Webpack 5 diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/107-state-management/101-redux.md b/content/roadmaps/103-react/content/102-react-ecosystem/107-state-management/101-redux.md index 0c83b8a6b..45bc23254 100644 --- a/content/roadmaps/103-react/content/102-react-ecosystem/107-state-management/101-redux.md +++ b/content/roadmaps/103-react/content/102-react-ecosystem/107-state-management/101-redux.md @@ -3,8 +3,10 @@ Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as [live code editing combined with a time traveling debugger](https://github.com/reduxjs/redux-devtools). Free Content + Official Website Official Getting Started to Redux +Redux Toolkit Official Website Official Tutorial to Learn Redux Fundamentals of Redux Course from Dan Abramov Redux Tutorial - Beginner to Advanced