Frontend resources (#1552)

* copy blockchain-updates to master

* Add blockchain frontend resources

content/roadmaps/112-blockchain/content/109-dapps/100-frontend-frameworks/100-react.md

@@ -1 +1,17 @@
-# React
+<DedicatedRoadmap
+  href='/react'
+  title='React Roadmap'
+  description='Click to check the detailed React Roadmap.'
+/>
+
+# React
+
+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 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=i793Qm6kv3U'>Understanding React's UI Rendering Process</BadgeLink>

content/roadmaps/112-blockchain/content/109-dapps/100-frontend-frameworks/101-angular.md

@@ -1 +1,12 @@
-# Angular
+<DedicatedRoadmap
+  href='/angular'
+  title='Angular Roadmap'
+  description='Click to check the detailed Angular Roadmap.'
+/>
+
+# Angular
+
+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="yellow" href='https://angular.io/start'>Official - Getting started with Angular</BadgeLink>

content/roadmaps/112-blockchain/content/109-dapps/100-frontend-frameworks/102-vue.md

@@ -1 +1,15 @@
-# Vue
+<DedicatedRoadmap 
+  href='/vue'
+  title='Vue Roadmap'
+  description='Click to check the detailed Vue Roadmap.'
+/>
+
+# Vue.js
+
+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>

content/roadmaps/112-blockchain/content/109-dapps/100-frontend-frameworks/readme.md

@@ -1 +1,8 @@
-# Frontend frameworks
+# Frontend Frameworks
+
+Web frameworks are designed to write web applications. Frameworks are collections of libraries that aid in the development of a software product or website. Frameworks for web application development are collections of various tools. Frameworks vary in their capabilities and functions, depending on the tasks set. They define the structure, establish the rules, and provide the development tools required.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://moralis.io/web3-frontend-everything-you-need-to-learn-about-building-dapp-frontends/'>Web3 Frontend – Everything You Need to Learn About Building Dapp Frontends</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=D_MO9vIRBcA'>What is the difference between a framework and a library?</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=cuHDQhDhvPE'> Which JS Framework is best?</BadgeLink>