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

Add Readme and Change Tag Color (#1779)

Browse Source 
* 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>
pull/1787/head
Uma Das 2 years ago committed by GitHub
parent 4a5b349b8a
commit 9d304a0133
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
51 changed files with 107 additions and 105 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. 6
      content/roadmaps/100-frontend/content/102-css/100-learn-the-basics.md
  2. 6
      content/roadmaps/100-frontend/content/102-css/readme.md
  3. 2
      content/roadmaps/100-frontend/content/103-javascript/103-es6-and-modular-javascript.md
  4. 10
      content/roadmaps/100-frontend/content/105-repo-hosting-services/100-github.md
  5. 2
      content/roadmaps/100-frontend/content/105-repo-hosting-services/102-bitbucket.md
  6. 4
      content/roadmaps/100-frontend/content/105-repo-hosting-services/readme.md
  7. 2
      content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/101-eslint.md
  8. 2
      content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/102-standardjs.md
  9. 2
      content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/readme.md
  10. 8
      content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/readme.md
  11. 2
      content/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/100-rxjs.md
  12. 4
      content/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/101-ngrx.md
  13. 8
      content/roadmaps/100-frontend/content/111-pick-a-framework/102-vue-js/readme.md
  14. 4
      content/roadmaps/100-frontend/content/112-modern-css/100-styled-components.md
  15. 2
      content/roadmaps/100-frontend/content/112-modern-css/103-emotion.md
  16. 4
      content/roadmaps/100-frontend/content/112-modern-css/readme.md
  17. 2
      content/roadmaps/100-frontend/content/113-web-components/readme.md
  18. 6
      content/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/100-bootstrap.md
  19. 4
      content/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/101-bulma.md
  20. 10
      content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/100-tailwind-css.md
  21. 2
      content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/101-chakra-ui.md
  22. 4
      content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/102-material-ui.md
  23. 2
      content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/103-radix-ui.md
  24. 4
      content/roadmaps/100-frontend/content/114-css-frameworks/readme.md
  25. 2
      content/roadmaps/100-frontend/content/115-testing-your-apps/101-react-testing-library.md
  26. 6
      content/roadmaps/100-frontend/content/115-testing-your-apps/102-cypress.md
  27. 2
      content/roadmaps/100-frontend/content/115-testing-your-apps/105-mocha.md
  28. 2
      content/roadmaps/100-frontend/content/115-testing-your-apps/106-chai.md
  29. 4
      content/roadmaps/100-frontend/content/115-testing-your-apps/107-ava.md
  30. 8
      content/roadmaps/100-frontend/content/115-testing-your-apps/108-jasmine.md
  31. 8
      content/roadmaps/100-frontend/content/116-type-checkers/100-typescript.md
  32. 6
      content/roadmaps/100-frontend/content/116-type-checkers/101-flow.md
  33. 10
      content/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/100-next-js.md
  34. 4
      content/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/101-after-js.md
  35. 4
      content/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/readme.md
  36. 2
      content/roadmaps/100-frontend/content/118-server-side-rendering/101-angular/100-universal.md
  37. 2
      content/roadmaps/100-frontend/content/118-server-side-rendering/101-angular/readme.md
  38. 4
      content/roadmaps/100-frontend/content/118-server-side-rendering/102-vue-js/100-nuxt-js.md
  39. 6
      content/roadmaps/100-frontend/content/118-server-side-rendering/readme.md
  40. 4
      content/roadmaps/100-frontend/content/119-graphql/100-apollo.md
  41. 2
      content/roadmaps/100-frontend/content/119-graphql/readme.md
  42. 8
      content/roadmaps/100-frontend/content/120-static-site-generators/100-next-js.md
  43. 2
      content/roadmaps/100-frontend/content/120-static-site-generators/101-gatsbyjs.md
  44. 6
      content/roadmaps/100-frontend/content/120-static-site-generators/102-nuxt-js.md
  45. 4
      content/roadmaps/100-frontend/content/120-static-site-generators/103-vuepress.md
  46. 4
      content/roadmaps/100-frontend/content/120-static-site-generators/105-hugo.md
  47. 2
      content/roadmaps/100-frontend/content/120-static-site-generators/106-gridsome.md
  48. 2
      content/roadmaps/100-frontend/content/120-static-site-generators/107-eleventy.md
  49. 2
      content/roadmaps/100-frontend/content/122-desktop-applications/100-electron.md
  50. 2
      content/roadmaps/100-frontend/content/122-desktop-applications/101-carlo.md
  51. 2
      content/roadmaps/100-frontend/content/122-desktop-applications/101-tauri.md

6
content/roadmaps/100-frontend/content/102-css/100-learn-the-basics.md
Unescape View File

@ -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>

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

@ -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>

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

@ -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>

10
content/roadmaps/100-frontend/content/105-repo-hosting-services/100-github.md
Unescape View File

@ -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>

2
content/roadmaps/100-frontend/content/105-repo-hosting-services/102-bitbucket.md
Unescape View File

@ -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>

4
content/roadmaps/100-frontend/content/105-repo-hosting-services/readme.md
Unescape View File

@ -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>

2
content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/101-eslint.md
Unescape View File

@ -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>

2
content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/102-standardjs.md
Unescape View File

@ -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>

2
content/roadmaps/100-frontend/content/110-build-tools/102-linters-formatters/readme.md
Unescape View File

@ -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>

8
content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/readme.md
Unescape View File

@ -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>

2
content/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/100-rxjs.md
Unescape View File

@ -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>

4
content/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/101-ngrx.md
Unescape View File

@ -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>

8
content/roadmaps/100-frontend/content/111-pick-a-framework/102-vue-js/readme.md
Unescape View File

@ -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>

4
content/roadmaps/100-frontend/content/112-modern-css/100-styled-components.md
Unescape View File

@ -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>

2
content/roadmaps/100-frontend/content/112-modern-css/103-emotion.md
Unescape View File

@ -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>

4
content/roadmaps/100-frontend/content/112-modern-css/readme.md
Unescape View File

@ -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

2
content/roadmaps/100-frontend/content/113-web-components/readme.md
Unescape View File

@ -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>

6
content/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/100-bootstrap.md
Unescape View File

@ -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>

4
content/roadmaps/100-frontend/content/114-css-frameworks/114-css-first/101-bulma.md
Unescape View File

@ -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>

10
content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/100-tailwind-css.md
Unescape View File

@ -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>

2
content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/101-chakra-ui.md
Unescape View File

@ -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>

4
content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/102-material-ui.md
Unescape View File

@ -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>

2
content/roadmaps/100-frontend/content/114-css-frameworks/114-js-first/103-radix-ui.md
Unescape View File

@ -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>

4
content/roadmaps/100-frontend/content/114-css-frameworks/readme.md
Unescape View File

@ -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>

2
content/roadmaps/100-frontend/content/115-testing-your-apps/101-react-testing-library.md
Unescape View File

@ -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>

6
content/roadmaps/100-frontend/content/115-testing-your-apps/102-cypress.md
Unescape View File

@ -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>

2
content/roadmaps/100-frontend/content/115-testing-your-apps/105-mocha.md
Unescape View File

@ -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>

2
content/roadmaps/100-frontend/content/115-testing-your-apps/106-chai.md
Unescape View File

@ -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>

4
content/roadmaps/100-frontend/content/115-testing-your-apps/107-ava.md
Unescape View File

@ -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>

8
content/roadmaps/100-frontend/content/115-testing-your-apps/108-jasmine.md
Unescape View File

@ -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>

8
content/roadmaps/100-frontend/content/116-type-checkers/100-typescript.md
Unescape View File

@ -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>

6
content/roadmaps/100-frontend/content/116-type-checkers/101-flow.md
Unescape View File

@ -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>

10
content/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/100-next-js.md
Unescape View File

@ -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>

4
content/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/101-after-js.md
Unescape View File

@ -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>

4
content/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/readme.md
Unescape View File

@ -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>

2
content/roadmaps/100-frontend/content/118-server-side-rendering/101-angular/100-universal.md
Unescape View File

@ -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>

2
content/roadmaps/100-frontend/content/118-server-side-rendering/101-angular/readme.md
Unescape View File

@ -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>

4
content/roadmaps/100-frontend/content/118-server-side-rendering/102-vue-js/100-nuxt-js.md
Unescape View File

@ -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>

6
content/roadmaps/100-frontend/content/118-server-side-rendering/readme.md
Unescape View File

@ -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>

4
content/roadmaps/100-frontend/content/119-graphql/100-apollo.md
Unescape View File

@ -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>

2
content/roadmaps/100-frontend/content/119-graphql/readme.md
Unescape View File

@ -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>

8
content/roadmaps/100-frontend/content/120-static-site-generators/100-next-js.md
Unescape View File

@ -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>

2
content/roadmaps/100-frontend/content/120-static-site-generators/101-gatsbyjs.md
Unescape View File

@ -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>

6
content/roadmaps/100-frontend/content/120-static-site-generators/102-nuxt-js.md
Unescape View File

@ -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>

4
content/roadmaps/100-frontend/content/120-static-site-generators/103-vuepress.md
Unescape View File

@ -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>

4
content/roadmaps/100-frontend/content/120-static-site-generators/105-hugo.md
Unescape View File

@ -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>

2
content/roadmaps/100-frontend/content/120-static-site-generators/106-gridsome.md
Unescape View File

@ -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>

2
content/roadmaps/100-frontend/content/120-static-site-generators/107-eleventy.md
Unescape View File

@ -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>

2
content/roadmaps/100-frontend/content/122-desktop-applications/100-electron.md
Unescape View File

@ -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>

2
content/roadmaps/100-frontend/content/122-desktop-applications/101-carlo.md
Unescape View File

@ -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>

2
content/roadmaps/100-frontend/content/122-desktop-applications/101-tauri.md
Unescape View File

@ -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>

Write Preview
Loading…
Cancel
Save