Merge branch 'kamranahmedse:master' into master

content/roadmaps/100-frontend/content/102-css/readme.md

@@ -10,6 +10,6 @@ CSS or Cascading Style Sheets is the language used to style the frontend of any
 <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 colorScheme='green' badgeText='Course' href='href=https://flexbox.io/'>What The Flexbox!</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>

content/roadmaps/100-frontend/content/112-modern-css/100-styled-components.md

@@ -1 +1,9 @@
-# Styled components
+# Styled components
+
+Styled-components is a CSS-in-JS library that enables you to write regular CSS and attach it to JavaScript components. With styled-components, you can use the CSS you’re already familiar with instead of having to learn a new styling structure.
+
+<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 badgeText='Watch' href='https://www.youtube.com/watch?v=02zO0hZmwnw'>Styled Components Crash Course & Project</BadgeLink>

content/roadmaps/101-backend/content/101-basic-frontend/101-css.md

@@ -9,6 +9,6 @@ CSS or Cascading Style Sheets is the language used to style the frontend of any
 <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 colorScheme='green' badgeText='Course' href='href=https://flexbox.io/'>What The Flexbox!</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>

content/roadmaps/101-backend/content/115-architectural-patterns/100-monolithic-apps.md

@@ -1 +1,7 @@
-# Monolithic apps
+# Monolithic Apps
+
+Monolithic architecture is a pattern in which an application handles requests, executes business logic, interacts with the database, and creates the HTML for the front end. In simpler terms, this one application does many things. It's inner components are highly coupled and deployed as one unit.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://microservices.io/patterns/monolithic.html'>Pattern: Monolithic Architecture</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://datamify.medium.com/monolithic-architecture-advantages-and-disadvantages-e71a603eec89'>Monolithic Architecture - Advantages & Disadvantages</BadgeLink>

content/roadmaps/101-backend/content/115-architectural-patterns/101-microservices.md

@@ -1 +1,7 @@
-# Microservices
+# Microservices
+
+Microservice architecture is a pattern in which highly cohesive, loosely coupled services are separately developed, maintained, and deployed. Each component handles an individual function, and when combined, the application handles an overall business function.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://microservices.io/patterns/microservices.html'>Pattern: Microservice Architecture</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://smartbear.com/solutions/microservices/'>What is Microservices?</BadgeLink>

content/roadmaps/101-backend/content/115-architectural-patterns/104-serverless.md

@@ -1 +1,8 @@
-# Serverless
+# Serverless
+
+Serverless is an architecture in which a developer builds and runs applications without provisioning or managing servers. With cloud computing/serverless, servers exist but are managed by the cloud provider. Resources are used as they are needed, on demand and often using auto scaling.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.ibm.com/cloud/learn/serverless'>Serverless</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://aws.amazon.com/serverless/'>AWS Services</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=W_VV2Fx32_Y&ab_channel=Fireship'>Serverless Computing in 100 Seconds</BadgeLink>