Add Readme and Change Tag Color (#1779)

* Add Readme and Add Tags * Add Readme and Add Tags * Update content/roadmaps/100-frontend/content/112-modern-css/readme.md Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>
2025-08-31 04:59:50 +02:00 · 2022-09-18 15:57:42 +05:30
parent 4a5b349b8a
commit 9d304a0133
51 changed files with 107 additions and 105 deletions
--- a/content/roadmaps/100-frontend/content/102-css/100-learn-the-basics.md
+++ b/content/roadmaps/100-frontend/content/102-css/100-learn-the-basics.md
@@ -6,6 +6,6 @@ CSS or Cascading Style Sheets is the language used to style the frontend of any
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.w3schools.com/css/'>W3Schools — Learn CSS</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/learn/responsive-web-design/'>freeCodeCamp — Responsive Web Design</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://learn.shayhowe.com/html-css/building-your-first-web-page/'>Learn to Code HTML & CSS</BadgeLink>
-<BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=yfoY53QXEnI'>CSS Crash Course For Absolute Beginners</BadgeLink>
-<BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=D-h8L5hgW-w'>HTML and CSS Tutorial</BadgeLink>
-<BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=FqmB-Zj2-PA'>CSS Masterclass - Tutorial & Course for Beginners</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=yfoY53QXEnI'>CSS Crash Course For Absolute Beginners</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=D-h8L5hgW-w'>HTML and CSS Tutorial</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=FqmB-Zj2-PA'>CSS Masterclass - Tutorial & Course for Beginners</BadgeLink>
--- a/content/roadmaps/100-frontend/content/102-css/readme.md
+++ b/content/roadmaps/100-frontend/content/102-css/readme.md
@@ -8,9 +8,9 @@ CSS or Cascading Style Sheets is the language used to style the frontend of any
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/learn/responsive-web-design/'>freeCodeCamp — Responsive Web Design</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://learn.shayhowe.com/html-css/building-your-first-web-page/'>Learn to Code HTML & CSS</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.joshwcomeau.com/'>Joshw Comeau's CSS Hack Blog Posts</BadgeLink>
-<BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=yfoY53QXEnI'>CSS Crash Course For Absolute Beginners</BadgeLink>
-<BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=D-h8L5hgW-w'>HTML and CSS Tutorial</BadgeLink>
-<BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=FqmB-Zj2-PA'>CSS Masterclass - Tutorial & Course for Beginners</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=yfoY53QXEnI'>CSS Crash Course For Absolute Beginners</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=D-h8L5hgW-w'>HTML and CSS Tutorial</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=FqmB-Zj2-PA'>CSS Masterclass - Tutorial & Course for Beginners</BadgeLink>
 <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>
--- 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
@@ -6,4 +6,4 @@ ECMAScript 2015 or ES2015 is a significant update to the JavaScript programming
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.javascripttutorial.net/es6/'>ES6 Tutorial</BadgeLink>
 <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='Course' colorScheme='green' href='https://www.youtube.com/watch?v=3PHXvlpOkf4'>Build 15 JavaScript Projects - Vanilla JavaScript</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=3PHXvlpOkf4'>Build 15 JavaScript Projects - Vanilla JavaScript</BadgeLink>
--- a/content/roadmaps/100-frontend/content/105-repo-hosting-services/100-github.md
+++ b/content/roadmaps/100-frontend/content/105-repo-hosting-services/100-github.md
@@ -4,8 +4,8 @@

 <ResourceGroupTitle>Free Content</ResourceGroupTitle>

-<BadgeLink badgeText='Read' href='https://docs.github.com/en/get-started/quickstart/hello-world'>GitHub: Quickstart</BadgeLink>
-<BadgeLink badgeText='Watch' colorScheme='yellow' href='https://www.youtube.com/watch?v=w3jLJU7DT5E'>What is GitHub?</BadgeLink>
-<BadgeLink badgeText='Watch' colorScheme='yellow' href='https://www.youtube.com/watch?v=wpISo9TNjfU'>Git vs. GitHub: What's the difference?</BadgeLink>
-<BadgeLink badgeText='Watch' colorScheme='yellow' href='https://www.youtube.com/watch?v=RGOj5yH7evk'>Git and GitHub for Beginners</BadgeLink>
-<BadgeLink badgeText='Watch' colorScheme='yellow' href='https://www.youtube.com/watch?v=eulnSXkhE7I'>Git and GitHub - CS50 Beyond 2019</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://docs.github.com/en/get-started/quickstart/hello-world'>GitHub: Quickstart</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=w3jLJU7DT5E'>What is GitHub?</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=wpISo9TNjfU'>Git vs. GitHub: What's the difference?</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=RGOj5yH7evk'>Git and GitHub for Beginners</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=eulnSXkhE7I'>Git and GitHub - CS50 Beyond 2019</BadgeLink>
--- a/content/roadmaps/100-frontend/content/105-repo-hosting-services/102-bitbucket.md
+++ b/content/roadmaps/100-frontend/content/105-repo-hosting-services/102-bitbucket.md
@@ -5,4 +5,4 @@
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>

 <BadgeLink badgeText='Visit' colorScheme="green" href='https://bitbucket.com/'>BitBucket Website</BadgeLink>
-<BadgeLink badgeText='Read' href='https://bitbucket.org/product/guides'>How to use BitBucket?</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://bitbucket.org/product/guides'>How to use BitBucket?</BadgeLink>
--- a/content/roadmaps/100-frontend/content/105-repo-hosting-services/readme.md
+++ b/content/roadmaps/100-frontend/content/105-repo-hosting-services/readme.md
@@ -4,5 +4,5 @@ There are different repository hosting services with the most famous one being G

 <ResourceGroupTitle>Services Links</ResourceGroupTitle>
 <BadgeLink badgeText='Visit' colorScheme="green" href='https://github.com'>GitHub: Where the world builds software</BadgeLink>
-<BadgeLink badgeText='Visit' href='https://gitlab.com'>GitLab: Iterate faster, innovate together</BadgeLink>
-<BadgeLink badgeText='Visit' href='https://bitbucket.com'>BitBucket: The Git solution for professional teams</BadgeLink>
+<BadgeLink badgeText='Visit' colorScheme="green" href='https://gitlab.com'>GitLab: Iterate faster, innovate together</BadgeLink>
+<BadgeLink badgeText='Visit' colorScheme="green" href='https://bitbucket.com'>BitBucket: The Git solution for professional teams</BadgeLink>
--- a/content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/101-eslint.md
+++ b/content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/101-eslint.md
@@ -5,4 +5,4 @@ With ESLint you can impose the coding standard using a certain set of standalone
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink badgeText='Official Website' colorScheme="blue" href='https://eslint.org/'>ESLint Official Website</BadgeLink>
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://dev.to/shivambmgupta/eslint-what-why-when-how-5f1d'>Introduction to ESLint</BadgeLink>
-<BadgeLink badgeText='Watch' colorScheme="red" href='https://www.youtube.com/watch?v=qhuFviJn-es'>ESLint Quickstart - find errors automatically</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=qhuFviJn-es'>ESLint Quickstart - find errors automatically</BadgeLink>
--- a/content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/102-standardjs.md
+++ b/content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/102-standardjs.md
@@ -4,6 +4,6 @@ Standardjs is a Style guide, with linter & automatic code fixer. It is a way to
 Standard JS is a tool in the Code Review category of a tech stack.

 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink badgeText='Read' colorScheme="blue" href='https://standardjs.com/'>Official Website</BadgeLink>
+<BadgeLink badgeText='Official Website' colorScheme="blue" href='https://standardjs.com/'>Official Website</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=bqho-uAnNJk'>Standard JS Tutorial with React, Prettier
 </BadgeLink>
--- a/content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/readme.md
+++ b/content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/readme.md
@@ -2,4 +2,4 @@

 A linter is a tool used to analyze code and discover bugs, syntax errors, stylistic inconsistencies, and suspicious constructs. Popular linters for JavaScript include ESLint, JSLint, and JSHint.

-<BadgeLink colorScheme='blue' badgeText='Read' href='https://www.testim.io/blog/what-is-a-linter-heres-a-definition-and-quick-start-guide/'>What Is a Linter?</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.testim.io/blog/what-is-a-linter-heres-a-definition-and-quick-start-guide/'>What Is a Linter?</BadgeLink>
--- a/content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/readme.md
+++ b/content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/readme.md
@@ -9,9 +9,9 @@
 React is the most popular front-end JavaScript library for building user interfaces. React can also render on the server using Node and power mobile apps using React Native.

 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Framework Website' href='https://reactjs.org/'>React Website</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Read' href='https://reactjs.org/tutorial/tutorial.html'>Official Getting Started</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://reactjs.org/'>React Website</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://reactjs.org/tutorial/tutorial.html'>Official Getting Started</BadgeLink>
 <BadgeLink badgeText='Course' colorScheme='green' href='https://egghead.io/courses/the-beginner-s-guide-to-react'>The Beginner's Guide to React</BadgeLink>
-<BadgeLink badgeText='Course' colorScheme='green' href='https://www.youtube.com/watch?v=nTeuhbP7wdE'>React JS Course for Beginners</BadgeLink>
-<BadgeLink badgeText='Course' colorScheme='green' href='https://www.youtube.com/watch?v=bMknfKXIFA8'>React Course - Beginner's Tutorial for React JavaScript Library [2022]</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=nTeuhbP7wdE'>React JS Course for Beginners</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=bMknfKXIFA8'>React Course - Beginner's Tutorial for React JavaScript Library [2022]</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=i793Qm6kv3U'>Understanding React's UI Rendering Process</BadgeLink>
--- a/content/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/100-rxjs.md
+++ b/content/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/100-rxjs.md
@@ -5,6 +5,6 @@ RxJS (Reactive Extensions for JavaScript) is a library for reactive programming
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>

 <BadgeLink colorScheme='blue' badgeText='Official Website' href='https://rxjs.dev/guide/overview'>RxJS Official Website</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Read' href='https://angular.io/guide/rx-library'>RxJS Angular Docs</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://angular.io/guide/rx-library'>RxJS Angular Docs</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=2LCo926NFLI'>RxJS Quick Start</BadgeLink>
 <BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=PhggNGsSQyg'>RxJS Crash Course</BadgeLink>
--- a/content/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/101-ngrx.md
+++ b/content/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/101-ngrx.md
@@ -4,6 +4,6 @@ NgRx is an open source library that provides reactive state management for your

 <ResourceGroupTitle>Free Content</ResourceGroupTitle>

-<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://ngrx.io/docs'>Official Documentation</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://ngrx.io/docs'>Official Documentation</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=2LCo926NFLI'>Angular NgRx Redux Quick Start Tutorial</BadgeLink>
-<BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=nuHBHD32iw8'>NgRx Course</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=nuHBHD32iw8'>NgRx Course</BadgeLink>
--- a/content/roadmaps/100-frontend/content/111-pick-a-framework/102-vue-js/readme.md
+++ b/content/roadmaps/100-frontend/content/111-pick-a-framework/102-vue-js/readme.md
@@ -9,7 +9,7 @@
 Vue.js is an open-source JavaScript framework for building user interfaces and single-page applications. It is mainly focused on front end development.

 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Framework Website' href='https://vuejs.org/'>Vue.js Website</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://vuejs.org/v2/guide/'>Official Getting Started</BadgeLink>
-<BadgeLink badgeText='Course' colorScheme='green' href='https://www.youtube.com/watch?v=FXpIoQ_rT_c'>Vue.js Course for Beginners</BadgeLink>
-<BadgeLink badgeText='Course' colorScheme='green' href='https://www.youtube.com/watch?v=qZXt1Aom3Cs'>Vue.js Crash Course</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://vuejs.org/'>Vue.js Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Guide' href='https://vuejs.org/v2/guide/'>Official Getting Started</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=FXpIoQ_rT_c'>Vue.js Course for Beginners</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=qZXt1Aom3Cs'>Vue.js Crash Course</BadgeLink>
--- a/content/roadmaps/100-frontend/content/112-modern-css/100-styled-components.md
+++ b/content/roadmaps/100-frontend/content/112-modern-css/100-styled-components.md
@@ -4,6 +4,6 @@ Styled-components is a CSS-in-JS library that enables you to write regular CSS a

 <ResourceGroupTitle>Free Content</ResourceGroupTitle>

-<BadgeLink colorScheme='blue' badgeText='Read' href='https://styled-components.com/'>Official Website</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Read' href='https://styled-components.com/docs'>Official Docs</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://styled-components.com/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://styled-components.com/docs'>Official Docs</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=02zO0hZmwnw'>Styled Components Crash Course & Project</BadgeLink>
--- a/content/roadmaps/100-frontend/content/112-modern-css/103-emotion.md
+++ b/content/roadmaps/100-frontend/content/112-modern-css/103-emotion.md
@@ -4,5 +4,5 @@ Emotion is a library designed for writing css styles with JavaScript. It provide

 <ResourceGroupTitle>Free Content</ResourceGroupTitle>

-<BadgeLink colorScheme='blue' badgeText='Read' href='https://emotion.sh/docs/introduction'>Official Website and Docs</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://emotion.sh/docs/introduction'>Official Website and Docs</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=yO3JU2bMLGA'>Styled components using emotion in React</BadgeLink>
--- a/content/roadmaps/100-frontend/content/112-modern-css/readme.md
+++ b/content/roadmaps/100-frontend/content/112-modern-css/readme.md
@@ -1 +1,3 @@
-# Modern css
+# Modern CSS
+
+The way we write CSS in our modern front-end applications is completely different from how we used to write CSS before. There are methods such as Styled Components, CSS Modules, Styled JSX,  Emotion, etc
--- a/content/roadmaps/100-frontend/content/113-web-components/readme.md
+++ b/content/roadmaps/100-frontend/content/113-web-components/readme.md
@@ -4,4 +4,4 @@ Web Components is a suite of different technologies allowing you to create reusa

 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/Web_Components'>Web Components | MDN</BadgeLink>
-<BadgeLink badgeText='Video' colorScheme='purple' href='https://www.youtube.com/watch?v=PCWaFLy3VUo'>Web Components Crash Course</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=PCWaFLy3VUo'>Web Components Crash Course</BadgeLink>
--- a/content/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/100-bootstrap.md
+++ b/content/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/100-bootstrap.md
@@ -3,6 +3,6 @@
 Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Framework Website' href='https://getbootstrap.com'>Bootstrap Website</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Docs' href='https://getbootstrap.com/docs/5.2/getting-started/introduction/'>Bootstrap Official Documentation</BadgeLink>
-<BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=-qfEOE4vtxE'>Bootstrap CSS Framework - Full Course for Beginners</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://getbootstrap.com'>Bootstrap Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Blog' href='https://blog.getbootstrap.com/2022/07/19/bootstrap-5-2-0/'>Bootstrap Official Blog</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=-qfEOE4vtxE'>Bootstrap CSS Framework - Full Course for Beginners</BadgeLink>
--- a/content/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/101-bulma.md
+++ b/content/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/101-bulma.md
@@ -3,7 +3,7 @@
 Bulma is a free, open source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces.

 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Framework Website' href='https://bulma.io/'>Bulma Website</BadgeLink>
-<BadgeLink colorScheme='green' badgeText='Course' href='https://youtube.com/playlist?list=PL4cUxeGkcC9iXItWKbaQxcyDT1u6E7a8a'>Bulma CSS Tutorial</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://bulma.io/'>Bulma Website</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://youtube.com/playlist?list=PL4cUxeGkcC9iXItWKbaQxcyDT1u6E7a8a'>Bulma CSS Tutorial</BadgeLink>
 <BadgeLink colorScheme='green' badgeText='Course' href='https://scrimba.com/learn/bulma'>Learn Bulma CSS</BadgeLink>
 <BadgeLink badgeText='Read' href='https://www.freecodecamp.org/news/how-to-build-a-responsive-blog-design-with-bulma-css-c2257a17c16b'>How To Build A ? Responsive Blog Design With Bulma CSS</BadgeLink>
--- a/content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/100-tailwind-css.md
+++ b/content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/100-tailwind-css.md
@@ -3,8 +3,8 @@
 CSS Framework that provides atomic CSS classes to help you style components e.g. `flex`, `pt-4`, `text-center` and `rotate-90` that can be composed to build any design, directly in your markup.

 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Framework Website' href='https://tailwindcss.com'>Tailwind Website</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='YouTube Channel' href='https://www.youtube.com/c/TailwindLabs/videos'>Official Screencasts</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Watch' href='https://www.youtube.com/watch?v=hdGsFpZ0J2E'>Should You Use Tailwind CSS?</BadgeLink>
-<BadgeLink badgeText='Read' href='https://www.codemag.com/Article/2105091/Tailwind-CSS-An-Introduction'>Tailwind CSS: An Introduction</BadgeLink>
-<BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=UBOj6rqRUME'>Tailwind CSS Crash Course</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://tailwindcss.com'>Tailwind Website</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.codemag.com/Article/2105091/Tailwind-CSS-An-Introduction'>Tailwind CSS: An Introduction</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/c/TailwindLabs/videos'>Official Screencasts</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=hdGsFpZ0J2E'>Should You Use Tailwind CSS?</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=UBOj6rqRUME'>Tailwind CSS Crash Course</BadgeLink>
--- a/content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/101-chakra-ui.md
+++ b/content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/101-chakra-ui.md
@@ -5,7 +5,7 @@ Chakra UI is a simple, modular and accessible component library that gives you t
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Website' href='https://chakra-ui.com/'>Chakra UI Website</BadgeLink>
 <BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://chakra-ui.com/docs/getting-started'>Chakra UI Official Getting Started</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/why-should-you-start-using-chakraui/'>Why You Should Start Using Chakra UI</BadgeLink>
 <BadgeLink badgeText='Course' colorScheme='green' href='https://egghead.io/courses/build-a-modern-user-interface-with-chakra-ui-fac68106'>Build a Modern User Interface with Chakra UI</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://youtu.be/wI2vqXsjsIo'>Official Getting Started Video</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://youtu.be/s-bIsz-NR3c'>Chakra UI Crash Course</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/why-should-you-start-using-chakraui/'>Why You Should Start Using Chakra UI</BadgeLink>
--- a/content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/102-material-ui.md
+++ b/content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/102-material-ui.md
@@ -3,6 +3,6 @@
 Material-UI is an open-source framework that features React components that implement Google’s Material Design.

 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Framework Website' href='https://mui.com/'>Official Website</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Docs' href='https://mui.com/getting-started/installation/'>Official Documentation</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://mui.com/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://mui.com/getting-started/installation/'>Official Documentation</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=vyJU9efvUtQ'>Material UI React Tutorial</BadgeLink>
--- a/content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/103-radix-ui.md
+++ b/content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/103-radix-ui.md
@@ -3,5 +3,5 @@
 An open-source UI component library for building high-quality, accessible design systems and web apps.

 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Framework Website' href='https://www.radix-ui.com/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://www.radix-ui.com/'>Official Website</BadgeLink>
 <BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://www.radix-ui.com/docs/primitives/overview/introduction'>Official Documentation</BadgeLink>
--- a/content/roadmaps/100-frontend/content/114-css-frameworks/readme.md
+++ b/content/roadmaps/100-frontend/content/114-css-frameworks/readme.md
@@ -3,5 +3,5 @@
 A CSS framework provides the user with a fully functional CSS stylesheet, allowing them to create a web page by simply coding the HTML with appropriate classes, structure, and IDs. Classes for popular website features like as the footer, slider, navigation bar, hamburger menu, column-based layouts, and so on are already included in the framework.

 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Docs' href='https://en.wikipedia.org/wiki/CSS_framework'>CSS Frameworks Introduction</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Benefits' href='https://css-tricks.com/what-are-the-benefits-of-using-a-css-framework/'>What are the benefits of using a css framework</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://en.wikipedia.org/wiki/CSS_framework'>CSS Frameworks Introduction</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://css-tricks.com/what-are-the-benefits-of-using-a-css-framework/'>What are the benefits of using a css framework</BadgeLink>
--- a/content/roadmaps/100-frontend/content/115-testing-your-apps/101-react-testing-library.md
+++ b/content/roadmaps/100-frontend/content/115-testing-your-apps/101-react-testing-library.md
@@ -3,4 +3,4 @@
 The React Testing Library is a very lightweight solution for testing React components. It provides light utility functions on top of react-dom and react-dom/test-utils, in a way that encourages better testing practices. Its primary guiding principle is: The more your tests resemble the way your software is used, the more confidence they can give you.

 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Official Getting Started' href='https://testing-library.com/docs/react-testing-library/intro/'>React Testing Library</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://testing-library.com/docs/react-testing-library/intro/'>React Testing Library</BadgeLink>
--- a/content/roadmaps/100-frontend/content/115-testing-your-apps/102-cypress.md
+++ b/content/roadmaps/100-frontend/content/115-testing-your-apps/102-cypress.md
@@ -3,6 +3,6 @@
 Cypress framework is a JavaScript-based end-to-end testing framework built on top of Mocha – a feature-rich JavaScript test framework running on and in the browser, making asynchronous testing simple and convenient. It also uses a BDD/TDD assertion library and a browser to pair with any JavaScript testing framework.

 <ResourceGroupTitle>Free Resources</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Website' href='https://www.cypress.io/'>Official Website</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Docs' href='https://docs.cypress.io/guides/overview/why-cypress#Other'>Official Documentation</BadgeLink>
-<BadgeLink colorScheme='purple' badgeText='Watch' href='https://www.youtube.com/watch?v=7N63cMKosIE'>Cypress End-to-End Testing</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://www.cypress.io/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://docs.cypress.io/guides/overview/why-cypress#Other'>Official Documentation</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=7N63cMKosIE'>Cypress End-to-End Testing</BadgeLink>
--- a/content/roadmaps/100-frontend/content/115-testing-your-apps/105-mocha.md
+++ b/content/roadmaps/100-frontend/content/115-testing-your-apps/105-mocha.md
@@ -4,4 +4,4 @@ Mocha is a feature-rich JavaScript test framework running on Node.js and in the

 <ResourceGroupTitle>Free Resources</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Website' href='https://mochajs.org/'>Official Website and Docs</BadgeLink>
-<BadgeLink colorScheme='purple' badgeText='Watch' href='https://www.youtube.com/watch?v=Bs68k6xfR3E'>Testing Node.js with Mocha</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=Bs68k6xfR3E'>Testing Node.js with Mocha</BadgeLink>
--- a/content/roadmaps/100-frontend/content/115-testing-your-apps/106-chai.md
+++ b/content/roadmaps/100-frontend/content/115-testing-your-apps/106-chai.md
@@ -5,4 +5,4 @@ Chai is a BDD / TDD assertion library for node and the browser that can be delig
 <ResourceGroupTitle>Free Resources</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Website' href='https://www.chaijs.com/'>Official Website and Docs</BadgeLink>
 <BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://www.chaijs.com/guide/'>Official Docs</BadgeLink>
-<BadgeLink colorScheme='purple' badgeText='Watch' href='https://www.youtube.com/watch?v=MLTRHc5dk6s'>Intro To JavaScript Unit Testing With Mocha JS & Chai</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=MLTRHc5dk6s'>Intro To JavaScript Unit Testing With Mocha JS & Chai</BadgeLink>
--- a/content/roadmaps/100-frontend/content/115-testing-your-apps/107-ava.md
+++ b/content/roadmaps/100-frontend/content/115-testing-your-apps/107-ava.md
@@ -3,6 +3,6 @@
 Ava is a JavaScript test runner. It utilizes the async I/O nature of Node and runs concurrent tests, thereby vastly decreasing your test times.

 <ResourceGroupTitle>Free Resources</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Official Rep' href='https://github.com/avajs/ava'>Official Repository</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Repository' href='https://github.com/avajs/ava'>Official Repository</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/testing-your-nodejs-applications-with-ava-js-99e806a226a7/'>Testing your Node.js applications with Ava.js</BadgeLink>
-<BadgeLink colorScheme='purple' badgeText='Watch' href='https://www.youtube.com/watch?v=RxLW6-3dk5A'>AVA Tutorial</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=RxLW6-3dk5A'>AVA Tutorial</BadgeLink>
--- a/content/roadmaps/100-frontend/content/115-testing-your-apps/108-jasmine.md
+++ b/content/roadmaps/100-frontend/content/115-testing-your-apps/108-jasmine.md
@@ -3,7 +3,7 @@
 Jasmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests. It provides utilities that can be used to run automated tests for both synchronous and asynchronous code.

 <ResourceGroupTitle>Free Resources</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Website' href='https://jasmine.github.io/'>Official Website</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Docs' href='https://jasmine.github.io/pages/docs_home.html'>Official Docs</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Official Rep' href='https://github.com/jasmine/jasmine'>Official Repository</BadgeLink>
-<BadgeLink colorScheme='purple' badgeText='Watch' href='https://www.youtube.com/watch?v=rw4KlxKEENQ'>Javascript Unit Testing with Jasmine</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://jasmine.github.io/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://jasmine.github.io/pages/docs_home.html'>Official Docs</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Repository' href='https://github.com/jasmine/jasmine'>Official Repository</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=rw4KlxKEENQ'>Javascript Unit Testing with Jasmine</BadgeLink>
--- a/content/roadmaps/100-frontend/content/116-type-checkers/100-typescript.md
+++ b/content/roadmaps/100-frontend/content/116-type-checkers/100-typescript.md
@@ -3,9 +3,9 @@
 TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.

 <ResourceGroupTitle>Free Resources</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Website' href='https://www.typescriptlang.org/'>Official Website</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Docs' href='https://www.typescriptlang.org/docs/'>Official Docs for Deep Dives</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Handbook' href='https://www.typescriptlang.org/docs/handbook/intro.html'>The TypeScript Handbook</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://www.typescriptlang.org/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://www.typescriptlang.org/docs/'>Official Docs for Deep Dives</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Handbook' href='https://www.typescriptlang.org/docs/handbook/intro.html'>The TypeScript Handbook</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.tutorialspoint.com/typescript/index.htm'>TypeScript Tutorial</BadgeLink>
 <BadgeLink colorScheme='green' badgeText='Course' href='https://scrimba.com/learn/typescript'>Scrimba — TypeScript Basics</BadgeLink>
-<BadgeLink colorScheme='purple' badgeText='Watch' href='https://www.youtube.com/watch?v=BwuLxPH8IDs'>TypeScript for Beginners</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=BwuLxPH8IDs'>TypeScript for Beginners</BadgeLink>
--- a/content/roadmaps/100-frontend/content/116-type-checkers/101-flow.md
+++ b/content/roadmaps/100-frontend/content/116-type-checkers/101-flow.md
@@ -3,6 +3,6 @@
 Flow is a static type checker, designed to find type errors in JavaScript programs.

 <ResourceGroupTitle>Free Resources</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Website' href='https://flow.org/'>Official Website</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Docs' href='https://flow.org/en/docs/'>Official Documentation</BadgeLink>
-<BadgeLink colorScheme='purple' badgeText='Watch' href='https://www.youtube.com/watch?v=0HlqX4lQZas'>Flow for Beginners</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://flow.org/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://flow.org/en/docs/'>Official Documentation</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=0HlqX4lQZas'>Flow for Beginners</BadgeLink>
--- a/content/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/100-next-js.md
+++ b/content/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/100-next-js.md
@@ -3,8 +3,8 @@
 Next.js is an open-source development framework built on top of Node.js enabling React based web applications functionalities such as server-side rendering and generating static websites.

 <ResourceGroupTitle>Free Resources</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Website' href='https://nextjs.org/'>Official Website</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Docs' href='https://nextjs.org/docs/getting-started'>Official Docs for Getting Started</BadgeLink>
-<BadgeLink colorScheme='purple' badgeText='Watch' href='https://masteringnextjs.com/'>Mastering Next.js</BadgeLink>
-<BadgeLink colorScheme='purple' badgeText='Watch' href='https://youtu.be/1WmNXEVia8I'>Next.js for Beginners - freeCodeCamp</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Handbook' href='https://www.freecodecamp.org/news/the-next-js-handbook/'>The Next.js Handbook — freeCodeCamp</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://nextjs.org/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://nextjs.org/docs/getting-started'>Official Docs for Getting Started</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://masteringnextjs.com/'>Mastering Next.js</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/the-next-js-handbook/'>The Next.js Handbook — freeCodeCamp</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://youtu.be/1WmNXEVia8I'>Next.js for Beginners - freeCodeCamp</BadgeLink>
--- a/content/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/101-after-js.md
+++ b/content/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/101-after-js.md
@@ -3,5 +3,5 @@
 After.js is an open-source JavaScript framework for developing SSR (Server Side Rendering) based applications. It is similar to the Next.js framework for server-rendered React apps but uses React Router instead of a folder structure based router like Next.js

 <ResourceGroupTitle>Free Resources</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='GitHub' href='https://github.com/jaredpalmer/after.js'>Official GitHub repository</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Docs' href='https://www.npmjs.com/package/@jaredpalmer/after'>Documetation</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Repository' href='https://github.com/jaredpalmer/after.js'>Official GitHub repository</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://www.npmjs.com/package/@jaredpalmer/after'>Documetation</BadgeLink>
--- a/content/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/readme.md
+++ b/content/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/readme.md
@@ -3,8 +3,8 @@
 React is the most popular front-end JavaScript library for building user interfaces. React can also render on the server using Node and power mobile apps using React Native.

 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Framework Website' href='https://reactjs.org/'>React Website</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Read' href='https://reactjs.org/tutorial/tutorial.html'>Official Getting Started</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Officialebsite' href='https://reactjs.org/'>React Website</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://reactjs.org/tutorial/tutorial.html'>Official Getting Started</BadgeLink>
 <BadgeLink badgeText='Course' colorScheme='green' href='https://egghead.io/courses/the-beginner-s-guide-to-react'>The Beginner's Guide to React</BadgeLink>
 <BadgeLink badgeText='Course' colorScheme='green' href='https://www.youtube.com/watch?v=nTeuhbP7wdE'>React JS Course for Beginners</BadgeLink>
 <BadgeLink badgeText='Course' colorScheme='green' href='https://www.youtube.com/watch?v=bMknfKXIFA8'>React Course - Beginner's Tutorial for React JavaScript Library [2022]</BadgeLink>
--- a/content/roadmaps/100-frontend/content/118-server-side-rendering/101-angular/100-universal.md
+++ b/content/roadmaps/100-frontend/content/118-server-side-rendering/101-angular/100-universal.md
@@ -3,4 +3,4 @@
 The Angular Universal project is a community driven project to expand on the core APIs from Angular (platform-server) to enable developers to do the server side rendering of Angular applications. It mainly uses express to render pages on pages on node.js server.

 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink badgeText='Read' colorScheme="blue" href='https://angular.io/guide/universal'>Server-side rendering (SSR) with Angular Universal</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://angular.io/guide/universal'>Server-side rendering (SSR) with Angular Universal</BadgeLink>
--- a/content/roadmaps/100-frontend/content/118-server-side-rendering/101-angular/readme.md
+++ b/content/roadmaps/100-frontend/content/118-server-side-rendering/101-angular/readme.md
@@ -3,4 +3,4 @@
 Angular is a component based front-end development framework built on TypeScript which includes a collection of well-integrated libraries that include features like routing, forms management, client-server communication, and more.

 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink badgeText='Read' colorScheme="blue" href='https://angular.io/start'>Official - Getting started with Angular</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://angular.io/start'>Official - Getting started with Angular</BadgeLink>
--- a/content/roadmaps/100-frontend/content/118-server-side-rendering/102-vue-js/100-nuxt-js.md
+++ b/content/roadmaps/100-frontend/content/118-server-side-rendering/102-vue-js/100-nuxt-js.md
@@ -4,7 +4,7 @@ Nuxt.js is a free and open source JavaScript library based on Vue.js, Node.js, W

 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Website' href='https://nuxtjs.org/'>Nuxt Website</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Docs' href='https://nuxtjs.org/docs/get-started/installation'>Nuxt Docs</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://nuxtjs.org/docs/get-started/installation'>Nuxt Docs</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://nuxtjs.org/tutorials'>Nuxt Tutorials</BadgeLink>
 <BadgeLink colorScheme='green' badgeText='Course' href='https://explorers.netlify.com/learn/get-started-with-nuxt'>Get Started with Nuxt</BadgeLink>
 <BadgeLink colorScheme='green' badgeText='Course' href='https://vueschool.io/courses/nuxtjs-fundamentals'>Nuxt.js Fundamentals</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://nuxtjs.org/tutorials'>Nuxt Tutorials</BadgeLink>
--- a/content/roadmaps/100-frontend/content/118-server-side-rendering/readme.md
+++ b/content/roadmaps/100-frontend/content/118-server-side-rendering/readme.md
@@ -4,8 +4,8 @@ Server-side rendering refers to the process that the service side completes the

 <ResourceGroupTitle>Free Content</ResourceGroupTitle>

-<BadgeLink colorScheme='blue' badgeText='Read' href='https://www.educative.io/answers/what-is-server-side-rendering'>what is server side rendering</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Read' href='https://medium.com/@mbleigh/when-should-i-server-side-render-c2a383ff2d0f'>When should I Server-Side Render?</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Read' href='https://vuejs.org/guide/scaling-up/ssr.html'>Server-Side Rendering (SSR)</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.educative.io/answers/what-is-server-side-rendering'>what is server side rendering</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://medium.com/@mbleigh/when-should-i-server-side-render-c2a383ff2d0f'>When should I Server-Side Render?</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://vuejs.org/guide/scaling-up/ssr.html'>Server-Side Rendering (SSR)</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=GQzn7XRdzxY'>what is server side rendering?</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=okvg3MRAPs0'>What is server-side rendering for web development?</BadgeLink>
--- a/content/roadmaps/100-frontend/content/119-graphql/100-apollo.md
+++ b/content/roadmaps/100-frontend/content/119-graphql/100-apollo.md
@@ -4,6 +4,6 @@ Apollo is a platform for building a unified graph, a communication layer that he

 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Website' href='https://www.apollographql.com'>Apollo Website</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Read' href='https://www.apollographql.com/docs/'>Official Docs</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Watch' href='https://www.youtube.com/c/ApolloGraphQL/'>Official YouTube Channel</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.apollographql.com/docs/'>Official Docs</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/c/ApolloGraphQL/'>Official YouTube Channel</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=YyUWW04HwKY'>GraphQL With React Tutorial - Apollo Client</BadgeLink>
--- a/content/roadmaps/100-frontend/content/119-graphql/readme.md
+++ b/content/roadmaps/100-frontend/content/119-graphql/readme.md
@@ -6,4 +6,4 @@ GraphQL is a query language for APIs and a runtime for fulfilling those queries
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://graphql.org/learn/'>Introduction to GraphQL</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.howtographql.com/'>The Fullstack Tutorial for GraphQL</BadgeLink>
 <BadgeLink colorScheme='green' badgeText='Course' href='https://odyssey.apollographql.com/'>GraphQL Tutorials</BadgeLink>
-<BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=ed8SzALpx1Q'>GraphQL Course for Beginners</BadgeLink>
+<BadgeLink  badgeText='Watch' href='https://www.youtube.com/watch?v=ed8SzALpx1Q'>GraphQL Course for Beginners</BadgeLink>
--- a/content/roadmaps/100-frontend/content/120-static-site-generators/100-next-js.md
+++ b/content/roadmaps/100-frontend/content/120-static-site-generators/100-next-js.md
@@ -5,8 +5,8 @@ enabling React based web applications functionalities such as server-side
 rendering and generating static websites.

 <ResourceGroupTitle>Free Resources</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Website' href='https://nextjs.org/'>Official Website</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Docs' href='https://nextjs.org/docs/getting-started'>Official Docs for Getting Started</BadgeLink>
-<BadgeLink colorScheme='purple' badgeText='Watch' href='https://masteringnextjs.com/'>Mastering Next.js</BadgeLink>
-<BadgeLink colorScheme='purple' badgeText='Watch' href='https://youtu.be/1WmNXEVia8I'>Next.js for Beginners - Full Course at freeCodeCamp YouTube Channel</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://nextjs.org/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://nextjs.org/docs/getting-started'>Official Docs for Getting Started</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Handbook' href='https://www.freecodecamp.org/news/the-next-js-handbook/'>The Next.js Handbook — FreeCodeCamp</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://masteringnextjs.com/'>Mastering Next.js</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://youtu.be/1WmNXEVia8I'>Next.js for Beginners - Full Course at freeCodeCamp YouTube Channel</BadgeLink>
--- a/content/roadmaps/100-frontend/content/120-static-site-generators/101-gatsbyjs.md
+++ b/content/roadmaps/100-frontend/content/120-static-site-generators/101-gatsbyjs.md
@@ -4,5 +4,5 @@ Gatsby is a React-based open source framework with performance, scalability and

 <ResourceGroupTitle>Free Resources</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Website' href='https://www.gatsbyjs.com/'>Gatsby Website</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Docs' href='https://www.gatsbyjs.com/docs'>Gatsby Docs</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://www.gatsbyjs.com/docs'>Gatsby Docs</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://youtube.com/playlist?list=PL4cUxeGkcC9hw1g77I35ZivVLe8k2nvjB'>Gatsby Tutorial</BadgeLink>
--- a/content/roadmaps/100-frontend/content/120-static-site-generators/102-nuxt-js.md
+++ b/content/roadmaps/100-frontend/content/120-static-site-generators/102-nuxt-js.md
@@ -5,7 +5,7 @@ enabling Vue based web applications functionalities such as server-side
 rendering and generating static websites.

 <ResourceGroupTitle>Free Resources</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Website' href='https://nuxtjs.org/'>Official Website</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Docs' href='https://nuxtjs.org/docs/get-started'>Official Docs for Getting Started</BadgeLink>
-<BadgeLink colorScheme='purple' badgeText='Watch' href='https://masteringnuxt.com/'>Mastering Nuxt.js</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://nuxtjs.org/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://nuxtjs.org/docs/get-started'>Official Docs for Getting Started</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://masteringnuxt.com/'>Mastering Nuxt.js</BadgeLink>
 <BadgeLink colorScheme='purple' badgeText='Watch' href='https://www.youtube.com/watch?v=FXpIoQ_rT_c'>Vue.js for Beginners - Full Course at freeCodeCamp YouTube Channel</BadgeLink>
--- a/content/roadmaps/100-frontend/content/120-static-site-generators/103-vuepress.md
+++ b/content/roadmaps/100-frontend/content/120-static-site-generators/103-vuepress.md
@@ -3,6 +3,6 @@
 VuePress is composed of two parts: a minimalistic static site generator (opens new window)with a Vue-powered theming system and Plugin API, and a default theme optimized for writing technical documentation. It was created to support the documentation needs of Vue’s own sub projects.

 <ResourceGroupTitle>Free Resources</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Website' href='https://vuepress.vuejs.org/'>Official Website</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Docs' href='https://vuepress.vuejs.org/guide/getting-started.html'>Official Docs for Getting Started</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://vuepress.vuejs.org/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://vuepress.vuejs.org/guide/getting-started.html'>Official Docs for Getting Started</BadgeLink>
 <BadgeLink colorScheme='purple' badgeText='Watch' href='https://www.youtube.com/watch?v=lIv1ItUzktc'>Introduction to VuePress</BadgeLink>
--- a/content/roadmaps/100-frontend/content/120-static-site-generators/105-hugo.md
+++ b/content/roadmaps/100-frontend/content/120-static-site-generators/105-hugo.md
@@ -3,6 +3,6 @@
 Hugo is the world’s fastest static website engine. It’s written in Go (aka Golang) and developed by bep, spf13 and friends.

 <ResourceGroupTitle>Free Resources</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Website' href='https://gohugo.io/'>Official Website</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Docs' href='https://gohugo.io/documentation/'>Official Docs for Getting Started</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://gohugo.io/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://gohugo.io/documentation/'>Official Docs for Getting Started</BadgeLink>
 <BadgeLink colorScheme='purple' badgeText='Watch' href='https://www.youtube.com/watch?v=qtIqKaDlqXo&list=PLLAZ4kZ9dFpOnyRlyS-liKL5ReHDcj4G3'>Introduction to Hugo - Static Site Generator </BadgeLink>
--- a/content/roadmaps/100-frontend/content/120-static-site-generators/106-gridsome.md
+++ b/content/roadmaps/100-frontend/content/120-static-site-generators/106-gridsome.md
@@ -4,4 +4,4 @@ Gridsome is a Vue.js powered Jamstack framework for building static generated we

 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Website' href='https://gridsome.org/'>Gridsome Website</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Docs' href='https://gridsome.org/docs/'>Gridsome Documentation</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://gridsome.org/docs/'>Gridsome Documentation</BadgeLink>
--- a/content/roadmaps/100-frontend/content/120-static-site-generators/107-eleventy.md
+++ b/content/roadmaps/100-frontend/content/120-static-site-generators/107-eleventy.md
@@ -4,6 +4,6 @@ Eleventy (11ty) is a simple to use, easy to customize, highly performant and pow

 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Website' href='https://www.11ty.dev/'>Official Website</BadgeLink>
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=-dM6AmNmMFA'>Introduction to Eleventy</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://11ty.rocks/'>A collection of 11ty starters, projects, plugins, and resources</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=-dM6AmNmMFA'>Introduction to Eleventy</BadgeLink>

--- a/content/roadmaps/100-frontend/content/122-desktop-applications/100-electron.md
+++ b/content/roadmaps/100-frontend/content/122-desktop-applications/100-electron.md
@@ -4,4 +4,4 @@ Electron allows you to build cross-platform desktop applications with HTML, CSS,

 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Website' href='https://www.electronjs.org/'>Electron Website</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Docs' href='https://www.electronjs.org/docs/latest/'>Electron Docs</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://www.electronjs.org/docs/latest/'>Electron Docs</BadgeLink>
--- a/content/roadmaps/100-frontend/content/122-desktop-applications/101-carlo.md
+++ b/content/roadmaps/100-frontend/content/122-desktop-applications/101-carlo.md
@@ -3,5 +3,5 @@
 Carlo is a headful Node app framework for building desktop applications.

 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='yellow' badgeText='Official Rep' href='https://github.com/GoogleChromeLabs/carlo'>Github Repository</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Repository' href='https://github.com/GoogleChromeLabs/carlo'>Github Repository</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://blog.agney.dev/carlo-on-web-server/'>Carlo development on a web server</BadgeLink>
--- a/content/roadmaps/100-frontend/content/122-desktop-applications/101-tauri.md
+++ b/content/roadmaps/100-frontend/content/122-desktop-applications/101-tauri.md
@@ -4,4 +4,4 @@ Tauri is a toolkit that helps developers make applications for the major desktop

 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Website' href='https://tauri.app/'>Tauri Website</BadgeLink>
-<BadgeLink colorScheme='blue' badgeText='Docs' href='https://tauri.app/v1/guides/'>Tauri Docs</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://tauri.app/v1/guides/'>Tauri Docs</BadgeLink>