github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add content to frontend roadmap (#2709)

Browse Source 
* Added resources in frontend and react roadmaps

* moved new resources below exiting ones && BadgeLink stick to one line

Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>
pull/2829/head
Adekola Olawale 2 years ago committed by GitHub
parent b77f2b2aef
commit 0effd71366
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 26 additions and 6 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      content/roadmaps/100-frontend/content/101-html/100-learn-the-basics.md
  2. 4
      content/roadmaps/100-frontend/content/101-html/101-writing-semantic-html.md
  3. 10
      content/roadmaps/100-frontend/content/101-html/104-accessibility.md
  4. 1
      content/roadmaps/100-frontend/content/101-html/readme.md
  5. 4
      content/roadmaps/100-frontend/content/102-css/101-making-layouts.md
  6. 2
      content/roadmaps/100-frontend/content/102-css/readme.md
  7. 1
      content/roadmaps/100-frontend/content/103-javascript/103-es6-and-modular-javascript.md
  8. 1
      content/roadmaps/100-frontend/content/103-javascript/104-concepts.md
  9. 1
      content/roadmaps/100-frontend/content/103-javascript/readme.md
  10. 1
      content/roadmaps/100-frontend/content/104-version-control-systems/100-basic-usage-of-git.md
  11. 2
      content/roadmaps/100-frontend/content/104-version-control-systems/readme.md
  12. 1
      content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/100-webpack.md
  13. 2
      content/roadmaps/103-react/content/102-react-ecosystem/107-state-management/101-redux.md

2
content/roadmaps/100-frontend/content/101-html/100-learn-the-basics.md
Unescape View File

@ -7,3 +7,5 @@ HTML stands for HyperText Markup Language. It is used on the frontend and gives
<BadgeLink badgeText='Read' colorScheme='yellow' href='https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started'>MDN Docs: Getting Started with HTML </BadgeLink>
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=pQN-pnXPaVg'>HTML Full Course - Build a Website Tutorial</BadgeLink>
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=qz0aGYrrlhU'>HTML Tutorial for Beginners: HTML Crash Course</BadgeLink>
<BadgeLink badgeText='Read' colorScheme='yellow' href='https://htmlcheatsheet.com'>HTML Cheatsheet</BadgeLink>
<BadgeLink badgeText='Course' colorScheme='green' href='https://www.scaler.com/topics/html'>Scaler: HTML</BadgeLink>

4
content/roadmaps/100-frontend/content/101-html/101-writing-semantic-html.md
Unescape View File

@ -7,4 +7,6 @@ Semantic element clearly describes its meaning to both the browser and the devel
<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.w3schools.com/html/html5_semantic_elements.asp'>W3Schools: Semantic HTML</BadgeLink>
<BadgeLink badgeText='Read' colorScheme='yellow' href='https://hackernoon.com/how-to-write-semantic-html-dkq3ulo'>How To Write Semantic HTML</BadgeLink>
<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.freecodecamp.org/news/html-best-practices/'>HTML Best Practices – How to Build a Better HTML-Based Website</BadgeLink>
<BadgeLink badgeText='Read' colorScheme='yellow' href='https://blog.hubspot.com/website/semantic-html'>Semantic HTML: What It Is and How It Improves Your Site</BadgeLink>
<BadgeLink badgeText='Read' colorScheme='yellow' href='https://blog.hubspot.com/website/semantic-html'>Semantic HTML: What It Is and How It Improves Your Site</BadgeLink>
<BadgeLink badgeText='Read' colorScheme='yellow' href='https://hackernoon.com/how-to-write-semantic-html-dkq3ulo'>How To Write Semantic HTML</BadgeLink>
<BadgeLink badgeText='Read' colorScheme='yellow' href='https://html.com/semantic-markup'>Semantic Markup</BadgeLink>

10
content/roadmaps/100-frontend/content/101-html/104-accessibility.md
Unescape View File

@ -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.
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.w3.org/WAI/tips/developing/'>Developing for Web Accessibility by W3C WAI
</BadgeLink>
<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.w3schools.com/accessibility/index.php'>Accessibility Tutorial
</BadgeLink>
<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.w3.org/WAI/tips/developing/'>Developing for Web Accessibility by W3C WAI</BadgeLink>
<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.w3schools.com/accessibility/index.php'>Accessibility Tutorial</BadgeLink>
<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components/'>A Complete Guide To Accessible Front-End Components</BadgeLink>
<BadgeLink badgeText='Watch' href='https://youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g'>Complete Playlist on Accessibility</BadgeLink>
<BadgeLink badgeText='Read' colorScheme='yellow' href='https://developer.mozilla.org/en-US/docs/Web/Accessibility'>MDN Accessibility</BadgeLink>
<BadgeLink badgeText='Read' colorScheme='yellow' href='https://web.dev/accessibility'>Accessibility for Developers by Google</BadgeLink>
<BadgeLink badgeText='Course' colorScheme='green' href='https://www.udacity.com/course/web-accessibility--ud891'>Web Accessibility by Udacity</BadgeLink>

1
content/roadmaps/100-frontend/content/101-html/readme.md
Unescape View File

@ -10,3 +10,4 @@ HTML stands for HyperText Markup Language. It is used on the frontend and gives
<BadgeLink badgeText='Course' colorScheme='green' href='https://github.com/denysdovhan/learnyouhtml'>Interactive HTML Course</BadgeLink>
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=pQN-pnXPaVg'>HTML Full Course - Build a Website Tutorial</BadgeLink>
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=qz0aGYrrlhU'>HTML Tutorial for Beginners: HTML Crash Course</BadgeLink>
<BadgeLink badgeText='Read' colorScheme='yellow' href='https://html.com'>HTML For Beginners The Easy Way</BadgeLink>

4
content/roadmaps/100-frontend/content/102-css/101-making-layouts.md
Unescape View File

@ -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:
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
@ -12,3 +12,5 @@ Float, grid, flexbox, positioning, display and box model are some of the key top
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/'>Positioning Types: How Do They Differ?</BadgeLink>
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model'>The Box Model</BadgeLink>
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/the-css-display-property-display-none-display-table-inline-block-and-more/'>The CSS Display Property</BadgeLink>
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://css-tricks.com/snippets/css/a-guide-to-flexbox'>A Complete Guide to Flexbox</BadgeLink>
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://css-tricks.com/snippets/css/complete-guide-grid'>A Complete Guide to Grid</BadgeLink>

2
content/roadmaps/100-frontend/content/102-css/readme.md
Unescape View File

@ -15,3 +15,5 @@ CSS or Cascading Style Sheets is the language used to style the frontend of any
<BadgeLink colorScheme='green' badgeText='Course' href='https://flexbox.io/'>What The Flexbox!</BadgeLink>
<BadgeLink colorScheme='green' badgeText='Course' href='https://www.codecademy.com/learn/learn-css'>Learn CSS | Codecademy</BadgeLink>
<BadgeLink colorScheme='green' badgeText='Course' href='https://www.codecademy.com/learn/learn-intermediate-css'>Learn Intermediate CSS | Codecademy</BadgeLink>
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://100dayscss.com'>100 Days CSS Challenge</BadgeLink>
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.scaler.com/topics/css'>CSS Tutorial | Scaler</BadgeLink>

1
content/roadmaps/100-frontend/content/103-javascript/103-es6-and-modular-javascript.md
Unescape View File

@ -8,3 +8,4 @@ ECMAScript 2015 or ES2015 is a significant update to the JavaScript programming
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=NCwa_xi0Uuc'>Learn Modern JavaScript in 1 Hour</BadgeLink>
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=nZ1DMMsyVyI'>JavaScript ES6, ES7, ES8</BadgeLink>
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=3PHXvlpOkf4'>Build 15 JavaScript Projects - Vanilla JavaScript</BadgeLink>
<BadgeLink badgeText='Read' colorScheme="yellow" href='https://codeloop.org/learn-modern-javascript-es6-es7-es8'>Modern JavaScript ES6, ES7 & ES8</BadgeLink>

1
content/roadmaps/100-frontend/content/103-javascript/104-concepts.md
Unescape View File

@ -11,3 +11,4 @@ Learn and understand the concepts such as Hoisting, Event Bubbling, Scope, Proto
<BadgeLink badgeText='Read' colorScheme="yellow" href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode'>JavaScript Strict Mode</BadgeLink>
<BadgeLink badgeText='Read' colorScheme="yellow" href='https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif'>JavaScript Visualized (7 Part Series)</BadgeLink>
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=7Tok22qxPzQ'>DOM vs Shadow DOM vs Virtual DOM</BadgeLink>
<BadgeLink badgeText='Read' colorScheme="yellow" href='https://blog.greenroots.info/series/javascript-promises'>Demystifying JavaScript Promises</BadgeLink>

1
content/roadmaps/100-frontend/content/103-javascript/readme.md
Unescape View File

@ -18,3 +18,4 @@ JavaScript allows you to add interactivity to your pages. Common examples that y
<BadgeLink badgeText='Watch' href='https://youtu.be/P7t13SGytRk?t=22'>Build a Netflix Landing Page Clone with HTML, CSS & JS</BadgeLink>
<BadgeLink badgeText='Watch' href='https://javascript30.com/'>Build 30 Javascript projects in 30 days</BadgeLink>
<BadgeLink badgeText='Course' colorScheme='green' href='https://github.com/workshopper/javascripting'>Learn the basics of JavaScript</BadgeLink>
<BadgeLink badgeText='Course' colorScheme="green" href='https://www.scaler.com/topics/course/javascript-beginners'>JavaScript for Beginners </BadgeLink>

1
content/roadmaps/100-frontend/content/104-version-control-systems/100-basic-usage-of-git.md
Unescape View File

@ -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.
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
<BadgeLink badgeText='Read' colorScheme='yellow' href='https://marklodato.github.io/visual-git-guide/index-en.html'>Visual Git Guide</BadgeLink>
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=zbKdDsNNOhg'>Version Control System Introduction</BadgeLink>
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=SWYqp7iY_Tc'>Git & GitHub Crash Course For Beginners</BadgeLink>
<BadgeLink badgeText='Watch' href='https://youtu.be/Y9XZQO1n_7c?t=21'>Learn Git in 20 Minutes</BadgeLink>

2
content/roadmaps/100-frontend/content/104-version-control-systems/readme.md
Unescape View File

@ -6,3 +6,5 @@ Version control systems allow you to track changes to your codebase/files over t
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=zbKdDsNNOhg'>Version Control System Introduction</BadgeLink>
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=SWYqp7iY_Tc'>Git & GitHub Crash Course For Beginners</BadgeLink>
<BadgeLink badgeText='Watch' href='https://youtu.be/Y9XZQO1n_7c?t=21'>Learn Git in 20 Minutes</BadgeLink>
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://git-scm.com/docs'>Git Documentation</BadgeLink>
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.atlassian.com/git'>Learn Git by Atlassian</BadgeLink>

1
content/roadmaps/100-frontend/content/110-build-tools/101-module-bundlers/100-webpack.md
Unescape View File

@ -6,3 +6,4 @@ Webpack is a module bundler. Its main purpose is to bundle JavaScript files for
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://webpack.js.org/'>Webpack Official Website</BadgeLink>
<BadgeLink colorScheme='blue' badgeText='Official Documentation' href='https://webpack.js.org/concepts/'>Webpack Documentation</BadgeLink>
<BadgeLink colorScheme='blue' badgeText='Official Documentation' href='https://www.valentinog.com/blog/webpack'>A Complete Guide to Webpack 5</BadgeLink>

2
content/roadmaps/103-react/content/102-react-ecosystem/107-state-management/101-redux.md
Unescape View File

@ -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).
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://redux.js.org/'>Official Website</BadgeLink>
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://redux.js.org/introduction/getting-started'>Official Getting Started to Redux</BadgeLink>
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://redux-toolkit.js.org'>Redux Toolkit Official Website</BadgeLink>
<BadgeLink colorScheme='green' badgeText='Course' href='https://redux.js.org/tutorials/essentials/part-1-overview-concepts'>Official Tutorial to Learn Redux</BadgeLink>
<BadgeLink colorScheme='green' badgeText='Course' href='https://egghead.io/courses/fundamentals-of-redux-course-from-dan-abramov-bd5cc867'>Fundamentals of Redux Course from Dan Abramov</BadgeLink>
<BadgeLink colorScheme='green' badgeText='Course' href='https://youtube.com/watch?v=zrs7u6bdbUw'>Redux Tutorial - Beginner to Advanced</BadgeLink>

Write Preview
Loading…
Cancel
Save