101-cluster-setup-and-configuration

* Update 100-beego.md

New official documentation website.

* Update src/roadmaps/golang/content/104-go-web-frameworks/100-beego.md

---------

Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>

readme.md

@@ -38,6 +38,7 @@ Here is the list of available roadmaps with more being actively worked upon.
 - [Software Architect Roadmap](https://roadmap.sh/software-architect)
 - [Software Design and Architecture Roadmap](https://roadmap.sh/software-design-architecture)
 - [JavaScript Roadmap](https://roadmap.sh/javascript)
+- [TypeScript Roadmap](https://roadmap.sh/typescript)
 - [React Roadmap](https://roadmap.sh/react)
 - [Vue Roadmap](https://roadmap.sh/vue)
 - [Angular Roadmap](https://roadmap.sh/angular)
@@ -54,6 +55,11 @@ Here is the list of available roadmaps with more being actively worked upon.
 - [Blockchain Roadmap](https://roadmap.sh/blockchain)
 - [ASP.NET Core Roadmap](https://roadmap.sh/aspnet-core)
 - [System Design Roadmap](https://roadmap.sh/system-design)
+- [Kubernetes Roadmap](https://roadmap.sh/kubernetes)
+
+We have also added a new form of visual content covering best practices:
+
+- [Frontend Performance Best Practices](https://roadmap.sh/best-practices/frontend-performance)
 
 ![](https://i.imgur.com/waxVImv.png)
 

src/best-practices/frontend-performance/frontend-performance.md

@@ -2,11 +2,11 @@
 jsonUrl: "/jsons/best-practices/frontend-performance.json"
 pdfUrl: "/pdfs/best-practices/frontend-performance.pdf"
 order: 1
-featuredTitle: "Frontend Performance"
-featuredDescription: "Frontend Performance Best Practices"
+briefTitle: "Frontend Performance"
+briefDescription: "Frontend Performance Best Practices"
 isNew: true
 isUpcoming: false
-title: "Frontend Performance"
+title: "Frontend Performance Best Practices"
 description: "Detailed list of best practices to improve your frontend performance"
 dimensions:
   width: 968

src/components/RoadmapBanner.astro

@@ -17,6 +17,6 @@ const { roadmap, roadmapId } = Astro.props;
     <span class='hidden sm:inline'>Click to visit the interactive version of</span>
     <span class='inline sm:hidden'>Visit complete</span>
 
-    <span class='sm:lowercase ml-0.5 font-medium underline underline-offset-1'>{roadmap.featuredTitle} roadmap</span>
+    <span class='sm:lowercase ml-0.5 font-medium underline underline-offset-1'>{roadmap.briefTitle} roadmap</span>
   </span>
 </a>

src/components/RoadmapHeader.astro

@@ -29,7 +29,7 @@ const isRoadmapReady = !isUpcoming;
   <div class='py-5 sm:py-12 container relative'>
     <YouTubeAlert />
 
-    <div class='mt-0 mb-3 sm:mb-6 sm:mt-4'>
+    <div class='mt-0 mb-3 sm:mb-4 sm:mt-4'>
       <h1 class='text-2xl sm:text-4xl mb-0.5 sm:mb-2 font-bold'>
         {title}
       </h1>

src/components/YouTubeBanner.astro

@@ -2,7 +2,8 @@
 import Icon from './Icon.astro';
 ---
 
-<div class='sticky top-0 border-b border-b-yellow-300 z-20 flex h-[37px]' youtube-banner>
+<!-- sticky top-0 -->
+<div class='border-b border-b-yellow-300 z-20 flex h-[37px]' youtube-banner>
   <a
     href='https://youtube.com/theroadmap?sub_confirmation=1'
     target='_blank'

src/lib/best-pratice.ts

@@ -5,8 +5,8 @@ export interface BestPracticeFrontmatter {
   jsonUrl: string;
   pdfUrl: string;
   order: number;
-  featuredTitle: string;
-  featuredDescription: string;
+  briefTitle: string;
+  briefDescription: string;
   title: string;
   description: string;
   isNew: boolean;

src/lib/roadmap-topic.ts

@@ -113,7 +113,7 @@ export async function getRoadmapTopicFiles(): Promise<Record<string, RoadmapTopi
         url: '/roadmaps',
       },
       {
-        title: currentRoadmap.featuredTitle,
+        title: currentRoadmap.briefTitle,
         url: `${roadmapUrl}`,
       },
       {

src/lib/roadmap.ts

@@ -5,8 +5,8 @@ export interface RoadmapFrontmatter {
   jsonUrl: string;
   pdfUrl: string;
   order: number;
-  featuredTitle: string;
-  featuredDescription: string;
+  briefTitle: string;
+  briefDescription: string;
   title: string;
   description: string;
   hasTopics: boolean;

src/pages/[roadmapId]/[...topicId].astro

@@ -28,9 +28,9 @@ const { file, breadcrumbs, roadmapId, roadmap, heading } = Astro.props as Roadma
 
 <BaseLayout
   title={`${heading} - roadmap.sh`}
-  description={`Free resources to learn ${heading} in ${roadmap.featuredTitle}. Everything you need to know about ${heading} and how it realtes to ${roadmap.featuredTitle}.`}
+  description={`Free resources to learn ${heading} in ${roadmap.briefTitle}. Everything you need to know about ${heading} and how it realtes to ${roadmap.briefTitle}.`}
   noIndex={true}
-  permalink={`/${topicId}`}
+  permalink={`/${roadmapId}/${topicId}`}
 >
   <RoadmapBanner roadmapId={roadmapId} roadmap={roadmap} />
   <div class='bg-gray-50'>

src/pages/[roadmapId]/index.astro

@@ -76,7 +76,7 @@ const contentContributionLink = `https://github.com/kamranahmedse/developer-road
     {
       !roadmapData.isUpcoming && roadmapData.jsonUrl && (
         <div class='max-w-[1000px] container relative'>
-          <ShareIcons description={roadmapData.featuredDescription} pageUrl={`https://roadmap.sh/${roadmapId}`} />
+          <ShareIcons description={roadmapData.briefDescription} pageUrl={`https://roadmap.sh/${roadmapId}`} />
           <TopicOverlay contentContributionLink={contentContributionLink} />
 
           <FrameRenderer

src/pages/[roadmapId]/topics.astro

@@ -30,7 +30,7 @@ const roadmapData = roadmapFile.frontmatter as RoadmapFrontmatter;
 >
   <RoadmapHeader
     description={roadmapData.description}
-    title={`${roadmapData.featuredTitle} Topics`}
+    title={`${roadmapData.briefTitle} Topics`}
     roadmapId={roadmapId}
     hasSearch={true}
     hasTopics={false}

src/pages/best-practices/[bestPracticeId]/[...topicId].astro

@@ -26,9 +26,9 @@ const { file, bestPracticeId, bestPractice, heading } = Astro.props as BestPract
 
 <BaseLayout
   title={`${heading} - roadmap.sh`}
-  description={`Free resources to learn ${heading} in ${bestPractice.featuredTitle}. Everything you need to know about ${heading} and how it realtes to ${bestPractice.featuredTitle}.`}
+  description={`Free resources to learn ${heading} in ${bestPractice.briefTitle}. Everything you need to know about ${heading} and how it realtes to ${bestPractice.briefTitle}.`}
   noIndex={true}
-  permalink={`/${topicId}`}
+  permalink={`/best-practices/${bestPracticeId}/${topicId}`}
 >
   <div class='bg-gray-50'>
     <div class='container py-16 prose prose-p:mt-0 prose-h1:mb-4 prose-h2:mb-3 prose-h2:mt-0'>

src/pages/best-practices/[bestPracticeId]/index.astro

@@ -69,7 +69,7 @@ const contentContributionLink = `https://github.com/kamranahmedse/developer-road
       !bestPracticeData.isUpcoming && bestPracticeData.jsonUrl && (
         <div class='max-w-[1000px] container relative'>
           <ShareIcons
-            description={bestPracticeData.featuredDescription}
+            description={bestPracticeData.briefDescription}
             pageUrl={`https://roadmap.sh/best-practices/${bestPracticeId}`}
           />
           <TopicOverlay contentContributionLink={contentContributionLink} />

src/pages/best-practices/index.astro

@@ -25,7 +25,7 @@ const bestPractices = await getAllBestPractices();
             <GridItem
               url={`/best-practices/${bestPractice.id}`}
               isNew={bestPractice.frontmatter.isNew}
-              title={bestPractice.frontmatter.title}
+              title={bestPractice.frontmatter.briefTitle}
               description={bestPractice.frontmatter.description}
             />
           ))

src/pages/index.astro

@@ -44,7 +44,7 @@ const videos = await getAllVideos();
     <FeaturedItems
       heading='Role based Roadmaps'
       featuredItems={roleRoadmaps.map((roadmapItem) => ({
-        text: roadmapItem.frontmatter.featuredTitle,
+        text: roadmapItem.frontmatter.briefTitle,
         url: `/${roadmapItem.id}`,
         isNew: roadmapItem.frontmatter.isNew,
         isUpcoming: roadmapItem.frontmatter.isUpcoming,
@@ -54,7 +54,7 @@ const videos = await getAllVideos();
     <FeaturedItems
       heading='Skill based Roadmaps'
       featuredItems={skillRoadmaps.map((roadmapItem) => ({
-        text: roadmapItem.frontmatter.featuredTitle === 'Go' ? 'Go Roadmap' : roadmapItem.frontmatter.featuredTitle,
+        text: roadmapItem.frontmatter.briefTitle === 'Go' ? 'Go Roadmap' : roadmapItem.frontmatter.briefTitle,
         url: `/${roadmapItem.id}`,
         isNew: roadmapItem.frontmatter.isNew,
         isUpcoming: roadmapItem.frontmatter.isUpcoming,
@@ -64,7 +64,7 @@ const videos = await getAllVideos();
     <FeaturedItems
       heading='Best Practices'
       featuredItems={bestPractices.map((bestPractice) => ({
-        text: bestPractice.frontmatter.featuredTitle,
+        text: bestPractice.frontmatter.briefTitle,
         url: `/best-practices/${bestPractice.id}`,
         isNew: bestPractice.frontmatter.isNew,
         isUpcoming: bestPractice.frontmatter.isUpcoming,

src/pages/pdfs.md

@@ -20,6 +20,7 @@ Here is the list of PDF links for each of the roadmaps.
 * **Software Design and Architecture Roadmap** - [Roadmap Link](https://roadmap.sh/software-design-architecture) / [PDF Link](https://roadmap.sh/pdfs/roadmaps/software-design-architecture.pdf)
 * **JavaScript Roadmap** - [Roadmap Link](https://roadmap.sh/javascript) / [PDF Link](https://roadmap.sh/pdfs/roadmaps/javascript.pdf)
 * **Node.js Roadmap** - [Roadmap Link](https://roadmap.sh/nodejs) / [PDF Link](https://roadmap.sh/pdfs/roadmaps/nodejs.pdf)
+* **TypeScript Roadmap** - [Roadmap Link](https://roadmap.sh/typescript) / [PDF Link](https://roadmap.sh/pdfs/roadmaps/typescript.pdf)
 * **GraphQL Roadmap** - [Roadmap Link](https://roadmap.sh/graphql) / [PDF Link](https://roadmap.sh/pdfs/roadmaps/graphql.pdf)
 * **Angular Roadmap** - [Roadmap Link](https://roadmap.sh/angular) / [PDF Link](https://roadmap.sh/pdfs/roadmaps/angular.pdf)
 * **React Roadmap** - [Roadmap Link](https://roadmap.sh/react) / [PDF Link](https://roadmap.sh/pdfs/roadmaps/react.pdf)
@@ -30,6 +31,7 @@ Here is the list of PDF links for each of the roadmaps.
 * **Spring Boot Roadmap** - [Roadmap Link](https://roadmap.sh/spring-boot) / [PDF Link](https://roadmap.sh/pdfs/roadmaps/spring-boot.pdf)
 * **Python Roadmap** - [Roadmap Link](https://roadmap.sh/python) / [PDF Link](https://roadmap.sh/pdfs/roadmaps/python.pdf)
 * **System Design** - [Roadmap Link](https://roadmap.sh/system-design) / [PDF Link](https://roadmap.sh/pdfs/roadmaps/system-design.pdf)
+* **Kubernetes** - [Roadmap Link](https://roadmap.sh/kubernetes) / [PDF Link](https://roadmap.sh/pdfs/roadmaps/kubernetes.pdf)
 
 Here is the list of PDF links for each of the best practices:
 

src/roadmaps/android/android.md

@@ -2,8 +2,8 @@
 # jsonUrl: "/jsons/roadmaps/android.json"
 pdfUrl: "/pdfs/roadmaps/android.pdf"
 order: 4
-featuredTitle: "Android"
-featuredDescription: "Step by step guide to becoming an Android Developer in 2023"
+briefTitle: "Android"
+briefDescription: "Step by step guide to becoming an Android Developer in 2023"
 title: "Android Developer"
 description: "Step by step guide to becoming an Android developer in 2023"
 hasTopics: false

src/roadmaps/angular/angular.md

@@ -2,8 +2,8 @@
 jsonUrl: "/jsons/roadmaps/angular.json"
 pdfUrl: "/pdfs/roadmaps/angular.pdf"
 order: 3
-featuredTitle: "Angular"
-featuredDescription: "Step by step guide to become a Angular Developer in 2023"
+briefTitle: "Angular"
+briefDescription: "Step by step guide to become a Angular Developer in 2023"
 title: "Angular Developer"
 description: "Everything that is there to learn about Angular and the ecosystem in 2023."
 hasTopics: true

src/roadmaps/angular/content/101-rxjs-basics/104-operators/103-combination.md

@@ -1 +1,29 @@
-# Combination
+# Combination
+
+Combination operators in RxJS are used to combine multiple observables into a single observable. There are several types of combination operators, including:
+
+ - Merge: merges multiple observables into a single observable that emits items from each source observable in a sequence.
+
+ - Concat: concatenates multiple observables into a single observable that emits the items from each source observable in sequence, one after the other.
+
+ - Zip: combines the items from multiple observables into a single observable by combining the items from each observable at a corresponding index.
+
+ - CombineLatest: combines the latest values from multiple observables into a single observable by emitting an item whenever any of the source observables emit an item.
+
+ - WithLatestFrom: combines the latest value from one observable with the latest values from multiple other observables.
+
+ - ForkJoin: combines the items from multiple observables into a single observable by emitting an item only after all of the source observables have emitted an item.
+
+Further documentation can be found in the official RxJS documentation:
+
+ - Merge: https://rxjs.dev/api/operators/merge
+
+ - Concat: https://rxjs.dev/api/operators/concat
+
+ - Zip: https://rxjs.dev/api/operators/zip
+
+ - CombineLatest: https://rxjs.dev/api/operators/combineLatest
+
+ - WithLatestFrom: https://rxjs.dev/api/operators/withLatestFrom
+
+ - ForkJoin: https://rxjs.dev/api/operators/forkJoin

src/roadmaps/aspnet-core/aspnet-core.md

@@ -2,8 +2,8 @@
 jsonUrl: "/jsons/roadmaps/aspnet-core.json"
 pdfUrl: "/pdfs/roadmaps/aspnet-core.pdf"
 order: 9
-featuredTitle: "ASP.NET Core"
-featuredDescription: "Step by step guide to becoming an ASP.NET Core Developer in 2023"
+briefTitle: "ASP.NET Core"
+briefDescription: "Step by step guide to becoming an ASP.NET Core Developer in 2023"
 title: "ASP.NET Core Developer"
 description: "Step by step guide to becoming an ASP.NET core developer in 2023"
 isNew: false

src/roadmaps/backend/backend.md

@@ -2,24 +2,24 @@
 jsonUrl: "/jsons/roadmaps/backend.json"
 pdfUrl: "/pdfs/roadmaps/backend.pdf"
 order: 2
-featuredTitle: "Backend"
-featuredDescription: "Step by step guide to becoming a backend developer in 2023"
+briefTitle: "Backend"
+briefDescription: "Step by step guide to becoming a backend developer in 2023"
 title: "Backend Developer"
 description: "Step by step guide to becoming a modern backend developer in 2023"
 hasTopics: true
 dimensions:
   width: 968
   height: 2840.4
-sponsor:
-  expiryDate: "2023-02-02"
-  url: "https://www.getambassador.io/api-gateway-to-success?utm_source=roadmap-sh&utm_medium=ebook&utm_campaign=edgestack-guide"
-  title: "API Gateways"
-  imageUrl: "/images/ambassador-img.png"
-  description: "Learn about the benefits and challenges of using API Gateway in cloud native environments."
-  event:
-    category: "SponsorClick"
-    action: "Ambassador Redirect"
-    label: "Clicked Ambassador Link"
+# sponsor:
+#   expiryDate: "2023-02-02"
+#   url: "https://www.getambassador.io/api-gateway-to-success?utm_source=roadmap-sh&utm_medium=ebook&utm_campaign=edgestack-guide"
+#   title: "API Gateways"
+#   imageUrl: "/images/ambassador-img.png"
+#   description: "Learn about the benefits and challenges of using API Gateway in cloud native environments."
+#   event:
+#     category: "SponsorClick"
+#     action: "Ambassador Redirect"
+#     label: "Clicked Ambassador Link"
 schema:
   headline: "Backend Developer Roadmap"
   description: "Learn how to become a Backend Developer with this interactive step by step guide in 2023. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place."

src/roadmaps/backend/content/111-web-security-knowledge/105-https.md

@@ -2,6 +2,10 @@
 
 HTTPS is a secure way to send data between a web server and a browser.
 
+A communication through HTTPS starts with the handshake phase during which the server and the client agree on how to encrypt the communication, in particular they choose an encryption algorithm and a secret key. After the handshake all the communication between the server and the client will be encrypted using the agreed upon algorithm and key.
+
+The handshake phase uses a particular kind of cryptography, called asymmetric cryptography, to communicate securely even though client and server have not yet agreed on a secret key. After the handshake phase the HTTPS communication is encrypted with symmetric cryptography, which is much more efficient but requires client and server to both have knowledge of the secret key.
+
 Visit the following resources to learn more:
 
 - [What is HTTPS?](https://www.cloudflare.com/en-gb/learning/ssl/what-is-https/)
@@ -10,3 +14,4 @@ Visit the following resources to learn more:
 - [How HTTPS works (comic)](https://howhttps.works/)
 - [SSL, TLS, HTTP, HTTPS Explained](https://www.youtube.com/watch?v=hExRDVZHhig)
 - [HTTPS — Stories from the field](https://www.youtube.com/watch?v=GoXgl9r0Kjk)
+- [HTTPS explained with carrier pigeons](https://baida.dev/articles/https-explained-with-carrier-pigeons)

src/roadmaps/blockchain/blockchain.md

@@ -2,8 +2,8 @@
 jsonUrl: "/jsons/roadmaps/blockchain.json"
 pdfUrl: "/pdfs/roadmaps/blockchain.pdf"
 order: 6
-featuredTitle: "Blockchain"
-featuredDescription: "Step by step guide to becoming a blockchain developer in 2023"
+briefTitle: "Blockchain"
+briefDescription: "Step by step guide to becoming a blockchain developer in 2023"
 title: "Blockchain Developer"
 description: "Step by step guide to becoming a blockchain developer in 2023."
 isNew: false

src/roadmaps/computer-science/computer-science.md

@@ -2,8 +2,8 @@
 jsonUrl: "/jsons/roadmaps/computer-science.json"
 pdfUrl: "/pdfs/roadmaps/computer-science.pdf"
 order: 1
-featuredTitle: "Computer Science"
-featuredDescription: "Curriculum with free resources for a self-taught developer."
+briefTitle: "Computer Science"
+briefDescription: "Curriculum with free resources for a self-taught developer."
 title: "Computer Science"
 description: "Computer Science curriculum with free resources for a self-taught developer."
 isNew: true

src/roadmaps/cyber-security/cyber-security.md

@@ -1,7 +1,7 @@
 ---
 order: 12
-featuredTitle: "Cyber Security"
-featuredDescription: "Step by step guide to becoming a Cyber Security Expert in 2023"
+briefTitle: "Cyber Security"
+briefDescription: "Step by step guide to becoming a Cyber Security Expert in 2023"
 title: "Cyber Security Expert"
 description: "Step by step guide to becoming a Cyber Security developer in 2023"
 isUpcoming: true

src/roadmaps/design-system/design-system.md

@@ -2,8 +2,8 @@
 jsonUrl: "/jsons/roadmaps/design-system.json"
 pdfUrl: "/pdfs/roadmaps/design-system.pdf"
 order: 13
-featuredTitle: "Design System"
-featuredDescription: "Step by step guide to building a modern Design System"
+briefTitle: "Design System"
+briefDescription: "Step by step guide to building a modern Design System"
 title: "Design System"
 description: "Learn how to create a design system with this step by step guide"
 isNew: false

src/roadmaps/devops/content/104-setting-up-x/103-load-balancer.md

@@ -1,8 +1,8 @@
 # Load Balancer
 
-Load Balancer acts as the **traffic cop** sitting in front of your servers and routing client requests across all servers capable of fulfilling those requests in a manner that maximizes speed and capacity utilization and ensures that no one server is overworked. If a one of the servers goes down, the load balancer redirects traffic to the remaining online servers.
+Load Balancer acts as the **traffic cop** sitting in front of your servers and routing client requests across all servers capable of fulfilling those requests in a manner that maximizes speed and capacity utilization and ensures that no one server is overworked. If one of the servers goes down, the load balancer redirects traffic to the remaining online servers.
 
 Visit the following resources to learn more:
 
 - [What is Load Balancing?](https://www.nginx.com/resources/glossary/load-balancing/)
-- [Load Balancing concepts and algorithms](https://www.cloudflare.com/en-gb/learning/performance/what-is-load-balancing/)
+- [Load Balancing concepts and algorithms](https://www.cloudflare.com/en-gb/learning/performance/what-is-load-balancing/)

src/roadmaps/devops/devops.md

@@ -2,8 +2,8 @@
 jsonUrl: "/jsons/roadmaps/devops.json"
 pdfUrl: "/pdfs/roadmaps/devops.pdf"
 order: 3
-featuredTitle: "DevOps"
-featuredDescription: "Step by step guide for DevOps or operations role in 2023"
+briefTitle: "DevOps"
+briefDescription: "Step by step guide for DevOps or operations role in 2023"
 title: "DevOps Roadmap"
 description: "Step by step guide for DevOps, SRE or any other Operations Role in 2023"
 hasTopics: true
@@ -17,14 +17,14 @@ schema:
   datePublished: "2023-01-05"
   dateModified: "2023-01-20"
 sponsor:
-  url: "https://www.tigera.io/lp/kubernetes-security-and-observability-ebook/?utm_campaign=O%27Reilly-book-final-release&utm_medium=web&utm_source=Insight-Partners-popup"
-  title: "Free eBook"
-  imageUrl: "/images/devops-ebook.png"
-  description: "Learn how to secure and troubleshoot your cloud-native applications with this free eBook."
+  url: "https://kubecampus.io/?utm_source=NewStack&utm_medium=email&utm_campaign=devops"
+  title: "Learn Kubernetes"
+  imageUrl: "/images/partners/kubecampus.png"
+  description: "Free Kubernetes courses to learn basic or advanced Kubernetes skills at your own pace."
   event:
     category: "SponsorClick"
-    action: "Tigera EBook Redirect"
-    label: "Clicked Tigera EBook Link"
+    action: "KubeCampus Courses Redirect"
+    label: "Clicked KubeCampus Courses Link"
 seo:
   title: "DevOps Roadmap: Learn to become a DevOps Engineer or SRE"
   description: "Community driven, articles, resources, guides, interview questions, quizzes for DevOps. Learn to become a modern DevOps engineer by following the steps, skills, resources and guides listed in this roadmap."

src/roadmaps/flutter/content/100-dart-basics/100-dart-pad.md

@@ -1,7 +1,8 @@
-# Dart pad
+# DartPad
 
-DartPad is an open source tool that lets you play with the Dart language in any modern browser.
+DartPad is an online tool that allows developers to write and run Dart code snippets. It can also be used to run Flutter code, making it a convenient way to try out Flutter apps and widgets without having to set up a full development environment.
 
 Visit the following resources to learn more:
 
 - [DartPad](https://dart.dev/tools/dartpad)
+- [DartPad in Tutorials](https://dart.dev/resources/dartpad-best-practices)

src/roadmaps/flutter/content/100-dart-basics/101-variables.md

@@ -1,5 +1,13 @@
 # Variables
 
+In Flutter, variables are used to store values. There are two types of variables in Flutter: 
+
+- local variables: These are declared within a function and are only accessible within that function
+- Instance variables: They are declared within a class and are accessible throughout the entire class. 
+
+Variables in Flutter can store values of different data types, such as numbers, strings, booleans, and more.
+
 Visit the following resources to learn more:
 
 - [Variables](https://dart.dev/guides/language/language-tour#variables)
+- [Dart - Variables](https://howtoflutter.dev/dart/variables/)

src/roadmaps/flutter/content/100-dart-basics/102-built-in-types.md

@@ -1,5 +1,17 @@
-# Built in types
+# Built-in Types
+
+There are several built-in data types, including:
+
+- int: used to store integers
+- double: used to store floating-point numbers
+- String: used to store text
+- bool: used to store true or false values
+- List: used to store ordered collections of objects
+- Map: used to store unordered collections of key-value pairs
+
+Additionally, there are other complex data types like dynamic, var, and Object in Dart programming language which is used in Flutter.
 
 Visit the following resources to learn more:
 
 - [Built-in types](https://dart.dev/guides/language/language-tour#built-in-types)
+- [Overview of Built-in Types](https://dart.dev/guides/language/coming-from/js-to-dart#built-in-types)

src/roadmaps/flutter/content/100-dart-basics/103-functions.md

@@ -5,3 +5,4 @@ Dart is a true object-oriented language, so even functions are objects and have
 Visit the following resources to learn more:
 
 - [Functions](https://dart.dev/guides/language/language-tour#functions)
+- [Dart Function](https://www.javatpoint.com/dart-function)

src/roadmaps/flutter/content/100-dart-basics/104-operators.md

@@ -1,5 +1,15 @@
 # Operators
 
+Operators are symbols or keywords used to perform operations on values. There are several types of operators available in Flutter:
+
+- Arithmetic operators: used to perform mathematical operations like addition (+), subtraction (-), multiplication (*), division (/), and more.
+- Relational operators: used to compare values and return a boolean result (==, !=, >, <, >=, <=).
+- Logical operators: used to perform logical operations like AND (&&), OR (||), and NOT (!).
+- Assignment operators: used to assign values to variables (=, +=, -=, *=, /=, %=).
+- Ternary operator: a shorthand way of writing simple if-else statements (condition ? if_true : if_false).
+
+These operators can be used to perform operations on values, variables, and expressions in Flutter.
+
 Visit the following resources to learn more:
 
-- [Operators](https://dart.dev/guides/language/language-tour#operators)
+- [Operators](https://dart.dev/guides/language/language-tour#operators)

src/roadmaps/flutter/content/100-dart-basics/105-control-flow-statements.md

@@ -1,5 +1,18 @@
-# Control flow statements
+# Control Flow Statements
+
+In Dart, control flow statements are used to control the flow of execution of a program. The following are the main types of control flow statements in Dart:
+
+- if-else: used to conditionally execute code based on a boolean expression.
+- for loop: used to repeat a block of code a specific number of times.
+- while loop: used to repeat a block of code as long as a given condition is true.
+- do-while loop: similar to the while loop, but the block of code is executed at least once before the condition is evaluated.
+- switch-case: used to select one of several code blocks to execute based on a value.
+- break: used to exit a loop early.
+- continue: used to skip the current iteration of a loop and continue with the next one.
+
+These control flow statements can be used to create complex logic and control the flow of execution in Dart programs.
 
 Visit the following resources to learn more:
 
 - [Control flow statements](https://dart.dev/guides/language/language-tour#control-flow-statements)
+- [Dart Control Flow Statements](https://www.w3adda.com/dart-tutorial/dart-control-flow-statements)

src/roadmaps/flutter/content/101-setup-development-environment/100-flutter-cli.md

@@ -1,7 +1,16 @@
-# Flutter cli
+# Flutter CLI
 
-The flutter command-line tool is how developers (or IDEs on behalf of developers) interact with Flutter.
+Flutter CLI (Command Line Interface) is a command-line tool that is used to develop, build, and run Flutter applications. It provides a set of commands and tools that developers can use to create, test, and deploy Flutter apps from the terminal. Some of the common tasks that can be performed using the Flutter CLI include:
 
+- Creating a new Flutter project
+- Running Flutter app on a connected device or emulator
+- Building and deploying Flutter app to app stores
+- Updating the Flutter framework and packages
+- Analyzing the performance of Flutter apps
+
+By using the Flutter CLI, developers can streamline the development process and automate repetitive tasks. The Flutter CLI is included in the Flutter SDK and is available for Windows, macOS, and Linux.
 Visit the following resources to learn more:
 
 - [The Flutter command-line tool](https://docs.flutter.dev/reference/flutter-cli)
+- [CLI Packages in Flutter](https://dart.dev/server/libraries#command-line-packages)
+- [Get started with Flutter CLI](https://dart.dev/tutorials/server/get-started)

src/roadmaps/flutter/content/101-setup-development-environment/101-ides/101-android-studio.md

@@ -1 +1,17 @@
-# Android studio
+# Android Studio
+
+Android Studio is an IDE that can be used for developing Flutter applications as well as Android apps. Flutter is a UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. In Android Studio, developers can use the Flutter plugin to access a suite of tools specifically designed for Flutter development, including:
+
+- Flutter widget inspector
+- Flutter outline
+- Flutter rendering tree
+- Flutter performance tool
+- Flutter layout explorer
+
+By providing a rich set of tools and features for Flutter development, Android Studio makes it easy for developers to build, test, and debug Flutter apps.
+
+Learn more from the following links:
+
+- [Android Studio Setup for Flutter Development](https://www.geeksforgeeks.org/android-studio-setup-for-flutter-development/)
+- [Android Studio for Flutter](https://docs.flutter.dev/development/tools/android-studio)
+- [Get started with Android Studio](https://dart.dev/tools/jetbrains-plugin)

src/roadmaps/flutter/content/101-setup-development-environment/101-ides/102-intellij-idea.md

@@ -1 +1,9 @@
-# Intellij idea
+# IntelliJ IDEA
+
+
+
+Learn more from the following:
+
+- [IntelliJ IDEA for Flutter](https://docs.flutter.dev/development/tools/android-studio)
+- [Get started with IntelliJ](https://dart.dev/tools/jetbrains-plugin)
+- [IntelliJ IDEA](https://www.jetbrains.com/idea/)

src/roadmaps/flutter/content/101-setup-development-environment/101-ides/index.md

@@ -1 +1,16 @@
-# Ides
+# IDEs
+
+An IDE (Integrated Development Environment) is a software application that provides a comprehensive environment for coding, debugging, testing, and deploying software. There are several IDEs that support Flutter development, including:
+
+- Android Studio: Google's official IDE for Android development, which also supports Flutter development.
+- Visual Studio Code: a popular, free, and open-source code editor that can be extended with plugins, including the Flutter extension.
+- IntelliJ IDEA: a commercial Java IDE that also supports Flutter development.
+- Xcode: Apple's official IDE for iOS development, which also supports Flutter development for macOS and iOS.
+
+These IDEs provide a variety of features and tools to assist in the development of Flutter apps, including code completion, debugging, testing, and more. Developers can choose the IDE that works best for their needs and preferences.
+
+Learn more from the following links:
+
+- [Setting up and Editor](https://docs.flutter.dev/get-started/editor)
+- [Android Studio and IntelliJ](https://docs.flutter.dev/development/tools/android-studio)
+- [IDEs and editors for Flutter](https://dart.dev/tools#ides-and-editors)

src/roadmaps/flutter/content/101-setup-development-environment/index.md

@@ -1 +1,16 @@
-# Setup development environment
+# Setup Development Environment
+
+To set up a development environment for Flutter, you need to install the following software:
+
+- Flutter SDK: Download and install the latest version of the Flutter SDK from the official website (https://flutter.dev/docs/get-started/install).
+- Integrated Development Environment (IDE): You can use Android Studio, Visual Studio Code, IntelliJ IDEA or any other IDE of your choice.
+- Emulator or a physical device: You can use an emulator or a physical device to run and test your Flutter apps. You can use the Android emulator provided by Android Studio or use a physical Android or iOS device.
+- Git: Git is used for version control and is recommended for Flutter development. You can download and install Git from https://git-scm.com/.
+- Dart SDK: Dart is the programming language used by Flutter, and the Dart SDK is required to develop Flutter apps. The Dart SDK is included in the Flutter SDK.
+
+Once you have installed all the required software, you can create a new Flutter project using the Flutter CLI or your IDE, and start building your app.
+
+Learn more from the following links:
+
+- [Get started with Flutter](https://docs.flutter.dev/get-started/install)
+- [Installing Dart SDK](https://dart.dev/get-dart)

src/roadmaps/flutter/content/102-widgets/100-stateless-widgets.md

@@ -1,7 +1,9 @@
-# Stateless widgets
+# Stateless Widgets
 
-A stateless widget never changes. Icon, IconButton, and Text are examples of stateless widgets.
+Stateless widgets in Flutter are widgets that don't maintain any mutable state. They are designed to be immutable and rebuild each time the framework needs to update the UI. They are suitable for static, unchanging views or simple animations. They can be created using the `StatelessWidget` class and have a single build method that returns a widget tree.
 
 Visit the following resources to learn more:
 
 - [StatelessWidget class](https://api.flutter.dev/flutter/widgets/StatelessWidget-class.html)
+- [Flutter – Stateful vs Stateless Widgets](https://www.geeksforgeeks.org/flutter-stateful-vs-stateless-widgets/)
+- [How to Create Stateless Widgets](https://medium.com/flutter/how-to-create-stateless-widgets-6f33931d859)

src/roadmaps/flutter/content/102-widgets/101-stateful-widgets.md

@@ -5,3 +5,5 @@ A stateful widget is dynamic: for example, it can change its appearance in respo
 Visit the following resources to learn more:
 
 - [StatefulWidget class](https://api.flutter.dev/flutter/widgets/StatefulWidget-class.html)
+- [Flutter – Stateful vs Stateless Widgets](https://www.geeksforgeeks.org/flutter-stateful-vs-stateless-widgets/)
+- [Flutter Tutorial - Stateful Widgets](https://www.youtube.com/watch?v=p5dkB3Mrxdo)

src/roadmaps/flutter/content/102-widgets/102-styled-widgets/100-material-widgets.md

@@ -1,7 +1,21 @@
-# Material widgets
+# Material Widgets
 
-Visual, behavioral, and motion-rich widgets implementing the Material Design guidelines.
+Material Widgets are a set of Flutter widgets that implement Material Design, Google's visual language for design. They are designed to provide a consistent look and feel on both Android and iOS devices. Some common Material Widgets include:
+
+- RaisedButton
+- Scaffold
+- AppBar
+- TextField
+- Drawer
+- SnackBar
+- BottomNavigationBar
+- IconButton
+
+These widgets are commonly used in Flutter apps to provide a familiar look and feel that follows Material Design guidelines.
 
 Visit the following resources to learn more:
 
 - [Material Components widgets](https://docs.flutter.dev/development/ui/widgets/material)
+- [Flutter – Material Design](https://www.geeksforgeeks.org/flutter-material-design/)
+- [Widget catalog in Flutter](https://docs.flutter.dev/development/ui/widgets)
+- [Material Designs Guidlines](https://m2.material.io/design/guidelines-overview)

src/roadmaps/flutter/content/102-widgets/102-styled-widgets/101-cupertino-widgets.md

@@ -1,7 +1,9 @@
 # Cupertino widgets
 
-Beautiful and high-fidelity widgets for current iOS design language.
+Cupertino widgets are a set of Flutter widgets that mimic the look and feel of Apple's iOS user interface. They are designed to provide a consistent look and feel on both iOS and Android devices, and include widgets such as CupertinoButton, CupertinoAlertDialog, and CupertinoSlider. These widgets are useful for building cross-platform apps that need to conform to the iOS design aesthetic.s
 
 Visit the following resources to learn more:
 
 - [Cupertino (iOS-style) widgets](https://docs.flutter.dev/development/ui/widgets/cupertino)
+- [Flutter Cupertino Tutorial](https://blog.logrocket.com/flutter-cupertino-tutorial-build-ios-apps-native/)
+- [Flutter Cupertino Widgets](https://www.youtube.com/watch?v=L-TY_5NZ7z4)

src/roadmaps/flutter/content/102-widgets/102-styled-widgets/index.md

@@ -1 +1,13 @@
-# Styled widgets
+# Styled Widgets
+
+Styled Widgets are Flutter widgets that are decorated with custom styles, such as colors, fonts, and shapes. They can be created by wrapping existing widgets with other widgets, such as Container, Theme, or BoxDecoration. For example:
+
+- Container widget can be used to set a fixed width, height, padding, and margin.
+- Theme widget can be used to specify a color scheme and typography for an entire app or a section of it.
+- BoxDecoration can be used to add a border, background color, and a border radius to a widget.
+- Styled Widgets allow developers to easily customize the look and feel of their Flutter app and create a consistent visual style.
+
+Learn more from the following links:
+
+- [Styling widgets in Flutter](https://docs.flutter.dev/development/ui/widgets/styling)
+- [Style Your Flutter Widgets](https://www.youtube.com/watch?v=kcq8AbVyMbk)

src/roadmaps/flutter/content/102-widgets/index.md

@@ -1,7 +1,21 @@
 # Widgets
 
-In Flutter, a widget is a piece of reusable user interface (UI) code that can be used to build complex and dynamic user interface designs.
+Widgets in Flutter are the basic building blocks of the user interface. They define how the UI looks and behaves. Widgets can be combined to create complex user interfaces and can be easily customized. Some common types of widgets include:
+
+- Text
+- Image
+- Button
+- Container
+- Card
+- Column & Row
+- ListView
+- AppBar
+- Scaffold
+
+Widgets in Flutter are also designed to be highly reusable, allowing developers to build complex UIs quickly and efficiently.
 
 Visit the following resources to learn more:
 
 - [Introduction to widgets](https://docs.flutter.dev/development/ui/widgets-intro)
+- [Widget catalog](https://docs.flutter.dev/development/ui/widgets)
+- [Flutter Widgets Explained](https://www.youtube.com/watch?v=FU2Eeizo95o)

src/roadmaps/flutter/content/103-working-with-assets/100-fonts.md

@@ -1,7 +1,13 @@
 # Fonts
 
-Flutter works with custom fonts and you can apply a custom font across an entire app or to individual widgets.
+You can use custom fonts in your app by including the font file in your app's assets and specifying the font in your app's styles. To use a custom font:
+
+- Add the font files to your app's assets folder.
+- In your pubspec.yaml file, specify the fonts under the flutter section
+- In your app's styles, specify the font family
+- Use the font in a Text widget
 
 Visit the following resources to learn more:
 
-- [Use a custom font](https://docs.flutter.dev/cookbook/design/fonts)
+- [Font - Flutter](https://docs.flutter.dev/cookbook/design/fonts)
+- [How to use custom fonts in Flutter](https://blog.logrocket.com/use-custom-fonts-flutter/)

src/roadmaps/flutter/content/103-working-with-assets/101-images.md

@@ -1,7 +1,14 @@
 # Images
 
-Apps can include both code and assets. Flutter uses the pubspec.yaml file, located at the root of your project, to identify assets required by an app.
+In Flutter, you can display images using the `Image` widget. There are several ways to add an image to your app:
+
+- Asset: Add the image to your app's assets and specify the asset path in the `Image` widget.
+- Network: Display an image from a URL by specifying the URL in the `Image` widget.
+- File: Display an image from a file by specifying the file path in the `Image` widget.
+
+The `Image` widget also accepts additional parameters such as `fit`, `width`, and `height` to control the size and scaling of the image.
 
 Visit the following resources to learn more:
 
 - [Adding assets and images](https://docs.flutter.dev/development/ui/assets-and-images)
+- [Images in Flutter](https://docs.flutter.dev/cookbook/images)

src/roadmaps/flutter/content/103-working-with-assets/102-other-file-types.md

@@ -1 +1,13 @@
-# Other file types
+# Other File Types
+
+In Flutter, you can work with different file types besides images. Some common file types that you can use in Flutter include:
+
+1. Text files: You can read or write text files using the dart:io library.
+2. JSON files: You can parse JSON data using the dart:convert library.
+javascript
+3. Audio and Video files: You can play audio and video files using the video_player and audioplayers packages.
+4. PDF files: You can display PDF files using the pdf package.
+
+Learn more from the following links:
+
+- [File class](https://docs.flutter.dev/cookbook/lists/mixed-list)

src/roadmaps/flutter/content/103-working-with-assets/index.md

@@ -1 +1,15 @@
-# Working with assets
+# Working with Assets
+
+Assets are resources such as images, fonts, and other files that are included in your app. To use assets in Flutter, you need to specify them in your app's `pubspec.yaml` file and then access them in your code.
+
+Here's how to work with assets in Flutter:
+
+1. Add assets to your app's `pubspec.yaml` file:
+2. Access assets in your code
+
+The `pubspec.yaml` file is used to manage dependencies, assets, and other settings in your Flutter app. The `flutter` section is used to specify assets that should be included with the app. The path specified in the `assets` section should be relative to the `pubspec.yaml` file.
+
+Learn more from the following links:
+
+- [Flutter Tutorial - Assets](https://www.youtube.com/watch?v=Hxh6nNHSUjo)
+- [Adding Assets in Flutter](https://docs.flutter.dev/development/ui/assets-and-images)

src/roadmaps/flutter/content/105-repo-hosting-services/100-github.md

@@ -1 +1,19 @@
-# Github
+# Github
+
+GitHub is a web-based platform that provides hosting for software development and version control using Git. It is widely used by developers and organizations around the world to manage and collaborate on software projects.
+
+With GitHub, you can:
+
+- Store your code in a repository (repo) and version it using Git.
+- Collaborate with other people on a project by sharing your repo and working together on code changes.
+- Share your projects with the world by making your repos public.
+- Use GitHub to discover new projects and contribute to existing ones by forking a repo, making changes, and submitting a pull request.
+- Track issues and bugs, and manage projects with features like project boards, milestones, and wikis.
+
+GitHub also provides a wide range of tools and services for developers, including GitHub Pages for hosting websites, GitHub Actions for automating workflows, and GitHub Marketplace for finding and integrating with third-party tools.
+
+Learn more from the following resources:
+
+- [Git and GitHub for Beginners - Crash Course](https://www.youtube.com/watch?v=RGOj5yH7evk)
+- [Get Started with Github](https://docs.github.com/en)
+- [GitHub Tutorial – for Beginners](https://www.freecodecamp.org/news/git-and-github-for-beginners/)

src/roadmaps/flutter/content/105-repo-hosting-services/index.md

@@ -1 +1,17 @@
-# Repo hosting services
+# Repo Hosting Services
+
+There are several repository hosting services that support Flutter development. Here are some popular options:
+
+- GitHub: One of the most widely used repository hosting services for Flutter projects. It provides hosting for Git repositories, issue tracking, collaboration, and many other features.
+- GitLab: A web-based Git repository manager that provides a wide range of features, including version control, issue tracking, continuous integration, and more.
+- Bitbucket: A Git and Mercurial repository hosting service that provides features such as pull requests, code reviews, and team management.
+- AWS CodeCommit: A fully managed Git repository service provided by Amazon Web Services. It integrates with other AWS services and provides features such as branch protection, code reviews, and continuous integration.
+- Azure DevOps: A set of development tools, services, and features provided by Microsoft, including version control (Git), continuous integration, and project management.
+
+When choosing a repository hosting service for your Flutter project, consider your specific needs and requirements, such as collaboration, scalability, and cost. You may also want to consider factors such as ease of use, integrations, and support for third-party tools.
+
+Learn more from the following links:
+
+- [Host Flutter Website On GitHub Pages](https://www.youtube.com/watch?v=z-yOqoQ2q6s)
+- [How to Deploy a Flutter Web App?](https://medium.com/solute-labs/flutter-for-web-how-to-deploy-a-flutter-web-app-c7d9db7ced2e)
+- [Deploying - Flutter](https://docs.flutter.dev/deployment/web#deploying-to-the-web)

src/roadmaps/flutter/content/106-design-principles/100-dependency-injection.md

@@ -1 +1,16 @@
-# Dependency injection
+# Dependency Injection
+
+Dependency Injection is a design pattern that allows objects to receive their dependencies from external sources instead of creating them internally. In Flutter, this can be useful for managing complex state, reducing coupling between components, and making testing easier.
+
+Here's how to use dependency injection in Flutter:
+
+- Create a dependency
+- Create a provider
+- Use the provider in your widget tree
+- Access the dependency in a widget
+
+
+Learn more from the following links:
+
+- [Dependency Injection In Flutter](https://medium.com/flutter-community/dependency-injection-in-flutter-f19fb66a0740)
+- [Flutter Dependency Injection For Beginners](https://www.youtube.com/watch?v=vBT-FhgMaWM)

src/roadmaps/flutter/content/106-design-principles/101-design-patterns.md

@@ -1 +1,20 @@
-# Design patterns
+# Design Patterns
+
+Design patterns are solutions to common problems in software development that can be used to improve the quality and maintainability of your code. Here are some popular design patterns that are commonly used in Flutter development:
+
+- Model-View-Controller (MVC)
+- Model-View-ViewModel (MVVM)
+- Provider Pattern
+- Bloc Pattern
+- Singleton Pattern
+- Factory Pattern
+- Builder Pattern
+- Composite Pattern
+
+When choosing a design pattern for your Flutter application, consider your specific requirements and use cases. You may also want to consider the trade-offs between different patterns, such as maintainability, scalability, and ease of use.
+
+Learn more from the following links:
+
+- [Flutter - Design](https://dart.dev/guides/language/effective-dart/design)
+- [Design Patterns Explained in 10 Minutes](https://www.youtube.com/watch?v=tv-_1er1mWI)
+- [Cookbook Designs in Flutter](https://docs.flutter.dev/cookbook/design)

src/roadmaps/flutter/content/106-design-principles/102-solid-principles.md

@@ -1 +1,8 @@
-# Solid principles
+# SOLID Principles
+
+
+
+Learn more from the following links:
+
+- [S.O.L.I.D Principles](https://www.youtube.com/watch?v=fvNTJang7l4)
+- [Overview of S.O.L.I.D Principles In Dart](https://medium.flutterdevs.com/s-o-l-i-d-principles-in-dart-e6c0c8d1f8f1)

src/roadmaps/flutter/content/106-design-principles/103-oop.md

@@ -1 +1,8 @@
-# Oop
+# OOP
+
+Object-oriented programming (OOP) is a programming paradigm that is based on the concept of "objects," which are instances of a class. In OOP, a class is a blueprint for creating objects, which have both data (attributes) and behavior (methods). The main idea behind OOP is to model real-world objects and their interactions, making it well-suited for creating complex and large-scale software systems.
+
+Learn more from the following links:
+
+- [Discover Object Oriented Programming](https://blog.hubspot.com/website/object-oriented-programming)
+- [Software Development Tutorial - What is object-oriented language?s](https://www.youtube.com/watch?app=desktop&v=SS-9y0H3Si8)

src/roadmaps/flutter/content/106-design-principles/index.md

@@ -1 +1,17 @@
-# Design principles
+# Design Principles
+
+Here are some common design principles that are often followed in Flutter development:
+
+- Material Design: A design system developed by Google that provides a consistent look and feel across all platforms and devices.
+- Responsiveness: Designing the user interface to work seamlessly on different screen sizes and aspect ratios.
+- User-centered Design: Designing the application with the user's needs and goals in mind.
+- Simplicity: Designing the user interface to be simple and intuitive, minimizing the number of steps needed to complete a task.
+- Consistency: Maintaining a consistent look and feel throughout the application, using consistent colors, typography, and layout.
+- Accessibility: Making the application usable by people with disabilities, including screen reader support, keyboard accessibility, and high-contrast mode.
+- Performance: Designing the application to be fast and responsive, even on low-end devices.
+
+By following these design principles, you can create a user-friendly and visually appealing application that provides a great user experience.
+
+Learn more from the following:
+
+- [Design - Principles](https://docs.flutter.dev/cookbook/design)

src/roadmaps/flutter/content/107-package-manager/100-pub-dev.md

@@ -1,6 +1,6 @@
 # Pub dev
 
-Flutter supports using shared packages contributed by other developers to the Flutter and Dart ecosystems.
+`pub.dev` is the official package repository for Dart and Flutter packages. It is a platform for hosting, managing, and distributing Dart packages and Flutter plugins. Developers can use `pub.dev` to search for packages, find information about packages, and install packages in their Flutter projects.
 
 Visit the following resources to learn more:
 

src/roadmaps/flutter/content/107-package-manager/101-flutter-pub-dart-pub.md

@@ -1 +1,19 @@
-# Flutter pub dart pub
+# Flutter pub dart pub
+
+`pub` is the package manager for Dart and Flutter, used for managing dependencies and publishing packages.
+
+With `pub`, developers can:
+
+- Search for and download packages from the `pub.dev` repository.
+- Manage dependencies in their projects, including adding, updating, and removing packages.
+- Publish their own packages to `pub.dev` for others to use.
+
+`pub` uses a `pubspec.yaml` file in each project to manage dependencies and define the package metadata. This file includes information such as the package name, version, and dependencies.
+
+In Flutter projects, `pub` is used to manage both Dart packages and Flutter plugins. This makes it easy to find and use packages that extend the functionality of your Flutter application.
+
+`pub` is an essential tool for Dart and Flutter development, providing a centralized repository for packages, making it easier to find, install, and manage dependencies in your projects.
+
+Learn more from the following links:
+
+- [Overview of Dart pub](https://dart.dev/tools/pub/cmd)

src/roadmaps/flutter/content/107-package-manager/index.md

@@ -5,3 +5,4 @@ The package manager for Flutter is called pub. It is used to manage Flutter proj
 Visit the following resources to learn more:
 
 - [Packages and Plugins](https://docs.flutter.dev/development/packages-and-plugins)
+- [Dart Package Manager (pub.dev) in Flutter](https://www.youtube.com/watch?v=F1VRO0_MKLs)

src/roadmaps/flutter/content/108-working-with-apis/100-json.md

@@ -1,7 +1,12 @@
-# Json
+# JSON
 
-JSON (JavaScript Object Notation) is a simple data interchange format used to communicate with server, store and retrieve data from it.
+JSON (JavaScript Object Notation) is a lightweight data interchange format that is easy for humans to read and write and easy for machines to parse and generate. In Flutter, JSON is used for transmitting data between the client and server, typically over an HTTP connection.
+
+Flutter provides a number of libraries for working with JSON data, including the `dart:convert` library, which provides support for encoding and decoding JSON data.
+
+To encode a Dart object to a JSON string, you can use the `jsonEncode` function from the `dart:convert` library. To decode a JSON string to a Dart object, you can use the jsonDecode function.
 
 Visit the following resources to learn more:
 
 - [JSON and serialization](https://docs.flutter.dev/development/data-and-backend/json)
+- [Using JSON](https://dart.dev/guides/json)

src/roadmaps/flutter/content/108-working-with-apis/101-web-sockets.md

@@ -2,7 +2,7 @@
 
 In addition to normal HTTP requests, you can connect to servers using WebSockets. Web sockets allows for bidirectional communication between a client (such as a web browser) and a server over a single, long-lived connection. They are a more efficient alternative to HTTP for providing real-time data, as they allow for the server to push data to the client as soon as it becomes available, rather than requiring the client to continuously poll the server for updates.
 
-
 Visit the following resources to learn more:
 
 - [Work with WebSockets](https://docs.flutter.dev/cookbook/networking/web-sockets)
+- [What is WebSocket and How It Works?](https://www.wallarm.com/what/a-simple-explanation-of-what-a-websocket-is)

src/roadmaps/flutter/content/108-working-with-apis/102-graphql.md

@@ -1,4 +1,4 @@
-# Graphql
+# GraphQL
 
 GraphQL is a query language for your API that allows clients to request exactly the data they need, and nothing more. It was developed by Facebook and released as open source in 2015.
 

src/roadmaps/flutter/content/108-working-with-apis/index.md

@@ -1 +1,10 @@
-# Working with apis
+# Working with APIs
+
+Working with APIs in Flutter involves making HTTP requests to a server and processing the responses. Flutter provides a number of libraries for making HTTP requests, including `dart:io` and `http`.
+
+The `http` library is a popular choice for making HTTP requests in Flutter, as it is easy to use and provides support for HTTP methods such as GET, POST, PUT, DELETE, and more.
+
+Learn more from the following resources:
+
+- [Using Google APIs](https://dart.dev/guides/google-apis)
+- [How to work with APIs in Flutter?](https://www.youtube.com/watch?v=uVo7HDWDUEQ)

src/roadmaps/flutter/content/109-storage/101-shared-preferences.md

@@ -5,3 +5,4 @@ In Flutter, SharedPreferences is a plugin allowing you to store data in key-valu
 Visit the following resources to learn more:
 
 - [shared_preferences - pub.dev package](https://pub.dev/packages/shared_preferences)
+- [How do I access Shared Preferences?](https://docs.flutter.dev/get-started/flutter-for/android-devs#how-do-i-access-shared-preferences)

src/roadmaps/flutter/content/109-storage/102-firebase/100-authentication.md

@@ -1 +1,9 @@
-# Authentication
+# Authentication
+
+Firebase Authentication is a service provided by Firebase that allows you to easily add user authentication to your Flutter app. With Firebase Authentication, you can authenticate users using email and password, phone number, or popular identity providers like Google, Facebook, and more.
+
+To integrate Firebase Authentication into your Flutter app, you need to first create a Firebase project in the Firebase Console and then add the Firebase Authentication package to your Flutter app.
+
+Learn more from the following links:
+
+- [Make Authenticated requests](https://docs.flutter.dev/cookbook/networking/authenticated-requests)

src/roadmaps/flutter/content/109-storage/102-firebase/101-storage.md

@@ -1 +1,9 @@
-# Storage
+# Storage
+
+In Flutter, you can use Firebase Storage to store and retrieve binary data, such as images, audio files, and videos. Firebase Storage is a cloud-based storage service provided by Firebase that makes it easy to store and serve large binary data, such as images and videos, in your Flutter app.
+
+To use Firebase Storage in your Flutter app, you need to first create a Firebase project in the Firebase Console and then add the Firebase Storage package to your Flutter app.
+
+Learn more from the following:
+
+- [How to Upload and Retrieve Images from Firebase Storage](https://www.youtube.com/watch?v=sM-WMcX66FI)

src/roadmaps/flutter/content/109-storage/102-firebase/102-firestore.md

@@ -1 +1,7 @@
-# Firestore
+# Firestore
+
+Firebase Firestore is a cloud-based NoSQL document database service provided by Firebase that makes it easy to store, manage, and retrieve data in your Flutter app. Firestore is a flexible, scalable, and easy-to-use database that allows you to store and retrieve data in the form of documents, collections, and fields.
+
+Learn more from the following links:
+
+- [Using Firestore - Flutter](https://www.youtube.com/watch?v=DqJ_KjFzL9I)

src/roadmaps/flutter/content/109-storage/102-firebase/103-push-notifications.md

@@ -1 +1,13 @@
-# Push notifications
+# Push Notifications
+
+To implement push notifications in Flutter using Firebase, follow these steps:
+
+- Create a Firebase project and set up a Flutter app.
+- Integrate the Firebase Cloud Messaging (FCM) plugin in your Flutter app.
+- Handle the incoming push notifications in your Flutter app and specify how they should be displayed.
+- Send test push notifications using the Firebase Console or other tools like Postman.
+- Customize your notifications by specifying the notification icon, sound, and vibration pattern.
+
+Learn more from the following links:
+
+- [How do I set up push notifications?](https://docs.flutter.dev/get-started/flutter-for/android-devs#how-do-i-set-up-push-notifications)

src/roadmaps/flutter/content/109-storage/102-firebase/104-remote-config.md

@@ -1 +1,18 @@
-# Remote config
+# Remote Config
+
+It is a cloud-based service that allows you to change the behavior and appearance of your app without requiring users to download an app update. In Flutter, you can use the firebase_remote_config plugin to access Firebase Remote Config.
+
+Here are the basic steps to implement Firebase Remote Config in a Flutter app:
+
+- Add the firebase_remote_config plugin to your pubspec.yaml file.
+- Initialize the Firebase Remote Config service in your main.dart file.
+- Define the default values for your remote parameters in the Firebase Console or by calling setDefaults method.
+- Fetch the remote parameters from Firebase by calling fetch method.
+- Get the values for the parameters by calling get method and use them in your app.
+- Update the remote parameters in the Firebase Console or by calling activateFetched method.
+
+You can use Remote Config to control the appearance of your app, change the behavior of features, and even A/B test different experiences for your users.
+
+Learn more from the following:
+
+- [Firebase Remote Config](https://www.youtube.com/watch?v=34ExOdNEMXI)

src/roadmaps/flutter/content/109-storage/102-firebase/index.md

@@ -5,3 +5,4 @@ Firebase is a Backend-as-a-Service (BaaS) app development platform that provides
 Visit the following resources to learn more:
 
 - [Firebase](https://docs.flutter.dev/development/data-and-backend/firebase)
+- [Flutter Firebase Tutorials](https://www.youtube.com/watch?v=agxDK0qmH88&list=PLFyjjoCMAPtxS6Cx1XSjCfxOxHQ4_e0sL)

src/roadmaps/flutter/content/109-storage/index.md

@@ -1 +1,15 @@
-# Storage
+# Storage
+
+Flutter provides several options for persistent storage, some of which are as follow:
+
+- SharedPreferences: A key-value store for small data.
+- SQLite database: A relational database for structured data.
+- File System: For storing large files and data.
+- Firebase: A real-time database and backend as a service.
+
+All of these storage options are supported through third-party packages, which are easily integrated into a Flutter app.
+
+Visit the following links to learn more:
+
+- [Storage - Flutter Tutorial](https://www.youtube.com/watch?v=UpKrhZ0Hppks)
+- [Cloud Storage in Flutter](https://firebase.flutter.dev/docs/storage/overview/)

src/roadmaps/flutter/content/110-advanced-dart/100-core-libraries.md

@@ -1,7 +1,8 @@
-# Core libraries
+# Core Libraries
 
 Dart has a rich set of core libraries that provide essentials for many everyday programming tasks such as working on collections of objects (dart:collection), making calculations (dart:math), and encoding/decoding data (dart:convert).
 
 Visit the following resources to learn more:
 
 - [Core libraries](https://dart.dev/guides/libraries)
+- [Libraries](https://api.flutter.dev/)

src/roadmaps/flutter/content/110-advanced-dart/101-lists.md

@@ -1 +1,16 @@
-# Lists
+# Lists
+
+Some common ways to display lists in Dart Flutter include:
+
+- ListView widget
+- ListTile widget
+- SingleChildScrollView with Column
+- GridView widget
+- CustomScrollView with Slivers
+
+These widgets allow you to display items in a scrolling list, a grid, or a combination of both. You can customize the appearance of each item using widgets, layouts, and styling.
+
+Learn more from the following:
+
+- [List Class](https://api.flutter.dev/flutter/dart-core/List-class.html)
+- [Dart Programming – List](https://www.geeksforgeeks.org/dart-programming-list/)

src/roadmaps/flutter/content/110-advanced-dart/102-collections.md

@@ -1 +1,16 @@
-# Collections
+# Collections
+
+In Dart, collections are used to store and manipulate groups of objects. There are several types of collections available, including:
+
+1. List (ordered and indexable)
+2. Set (unordered and unique elements)
+3. Map (key-value pairs)
+4. Queue (ordered and first-in-first-out)
+5. Stack (ordered and last-in-first-out)
+
+These collections are built-in data structures that can be used to store and manipulate data efficiently. They can be used in a variety of scenarios, such as storing user data, managing state, and organizing algorithms.
+
+Learn more from the following:
+
+- [Generic collections in Flutter](https://dart.dev/guides/language/language-tour#generic-collections-and-the-types-they-contain)
+- [Iterable collections](https://dart.dev/codelabs/iterables)

src/roadmaps/flutter/content/110-advanced-dart/103-lambdas.md

@@ -1 +1,17 @@
-# Lambdas
+# Lambdas
+
+Lambdas, also known as anonymous functions, are a fundamental concept in Dart and Flutter. They are a way to create short, inline functions that can be passed as arguments to other functions or assigned to variables.
+
+Here are some common use cases for lambdas in Dart Flutter:
+
+- Event Handlers: You can use lambdas as event handlers for widgets, such as buttons.
+- Callbacks: You can use lambdas as callbacks to pass into functions that execute later.
+- Streams: You can use lambdas to handle events in a Stream.
+- Filtering: You can use lambdas to filter data in a collection using functions like where and `firstWhere`.
+
+Lambdas are defined using the `=>` operator and can take zero or more arguments. They can also contain expressions, statements, and return values.
+
+Learn more from the following links:
+
+- [Lambda functions in Dart](https://medium.com/jay-tillu/lambda-functions-in-dart-7db8b759f07a)
+- [Anonymous Function in Dart | Lambda Function](https://www.youtube.com/watch?v=XTKKQdTAR0U)

src/roadmaps/flutter/content/110-advanced-dart/104-functional-programming.md

@@ -1 +1,14 @@
-# Functional programming
+# Functional Programming
+
+Functional programming is a programming paradigm that emphasizes immutability, statelessness, and the use of functions to transform data. Dart, being a modern programming language, supports functional programming concepts such as:
+
+- Higher-Order Functions: Dart supports functions that take other functions as arguments and/or return functions as output.
+- Immutable Data: Dart provides support for immutable data structures and encourages the use of these data structures in functional programming.
+- Lambdas/Closures: Dart has support for anonymous functions, also known as lambdas or closures, which can be used to create simple and concise functions.
+- Pure Functions: Dart encourages the use of pure functions, which are functions that have no side effects and always return the same output given the same inputs.
+
+Learn more from the following links:
+
+- [Brief Overview of Functional Programming](https://buildflutter.com/functional-programming-with-flutter/)
+- [Functional Programming in Dart & Flutter](https://yogi-6.medium.com/list/functional-programming-in-dart-flutter-2f3ac9d7fa39)
+- [Functional programming - Flutter](https://docs.flutter.dev/resources/faq)

src/roadmaps/flutter/content/110-advanced-dart/105-isolates.md

@@ -1 +1,15 @@
-# Isolates
+# Isolates
+
+Isolates in Flutter are separate execution contexts that run in parallel with each other. They are used to improve performance and concurrency in Flutter applications. Key benefits of using Isolates in Flutter include:
+
+- Improved Performance: Isolates allow you to run intensive computations or blocking operations in the background, without freezing the user interface.
+- Concurrent Execution: Isolates provide a way to run multiple tasks concurrently, allowing you to improve the overall performance of your app.
+- Isolation: Each Isolate runs in its own memory space and is isolated from other Isolates. This makes it easier to write reliable and secure code.
+- Communication: Flutter provides a mechanism for communicating between Isolates, allowing them to share data and coordinate their work.
+
+Isolates are created using the `Isolate` class and can be used for a variety of tasks, such as network operations, long-running computations, or background tasks. When using Isolates, it's important to be mindful of the cost of context-switching and communication between Isolates.
+
+Learn more from the following links:
+
+- [How isolates work](https://dart.dev/guides/language/concurrency#how-isolates-work)
+- [Dart - Isolates and event loops](https://medium.com/dartlang/dart-asynchronous-programming-isolates-and-event-loops-bffc3e296a6a)

src/roadmaps/flutter/content/110-advanced-dart/106-async-await.md

@@ -1 +1,13 @@
-# Async await
+# Async Await
+
+It is a programming pattern in Flutter that makes it easier to write asynchronous code. It allows you to write asynchronous code that looks and behaves like synchronous code.
+
+- **async**: The async keyword is used to mark a function as asynchronous, which means that the function can run asynchronously and not block the main thread.
+- **await**: The await keyword is used inside an async function to wait for the result of an asynchronous operation before continuing the execution of the function.
+
+With `async`/`await`, you can write asynchronous code that is easy to read, write, and maintain. 
+
+Learn more from the following resources:
+
+- [Asynchronous programming: async, await](https://dart.dev/codelabs/async-await)
+- [Async widgets](https://docs.flutter.dev/development/ui/widgets/async)

src/roadmaps/flutter/content/110-advanced-dart/107-streams.md

@@ -1 +1,7 @@
-# Streams
+# Streams
+
+Streams in Flutter are a way to receive data over time as it becomes available. They are similar to observables in other languages and frameworks. Streams can be used for things like getting real-time updates from a server, or listening for changes in user input. In Flutter, streams are represented by the `Stream` class and can be listened to using the `StreamBuilder` widget.
+
+Learn more from the following resources:
+
+- [Creating streams in Dart](https://dart.dev/articles/libraries/creating-streams)

src/roadmaps/flutter/content/110-advanced-dart/108-futures.md

@@ -1 +1,13 @@
-# Futures
+# Futures
+
+Futures in Flutter are a way of representing a potential value that will be available at some point in the future. Some key points about Futures in Flutter:
+
+- Futures are used for asynchronous programming in Flutter
+- Futures return a single value (or an error) and are often used with `async` and `await`.
+- The `then` method can be used to attach a callback to a Future that will be executed once the Future's value is available
+- Futures can be combined with other Futures using `Future.wait` or `Future.whenComplete` methods
+- Futures are often used with network requests, file I/O operations, and other long-running tasks in Flutter.
+
+Learn more from the following resources:
+
+- [Futures and Error handling](https://dart.dev/guides/libraries/futures-error-handling)

src/roadmaps/flutter/content/110-advanced-dart/index.md

@@ -1 +1,20 @@
-# Advanced dart
+# Advanced Dart
+
+Here are some advanced concepts in Dart that are commonly used in Flutter development:
+
+- Generics: allows creating reusable code by abstracting over types
+- Async/Await: simplifies asynchronous programming by allowing to wait for a Future to complete in a clean, readable way.
+- Mixins: lets classes inherit behaviors from multiple mixin classes
+- Abstract Classes: provide a base class that can be extended to create multiple concrete implementations.
+- Streams: provide a way to receive a continuous sequence of events, like data from a server or user events.
+- Isolates: allow running Dart code in separate threads with communication through message passing.
+- Futures: represent a value that will be available at some point in the future.
+- Null-aware operators (??, ?.): provide a concise way to handle null values.
+- Collection literals: provide concise syntax for creating collections.
+- Extension Methods: allow adding methods to existing classes, even if you don't have access to their source code.
+
+By mastering these concepts, you will be able to write more efficient and maintainable Dart code in your Flutter projects.
+
+Learn more from the following resources:
+
+- [Tutorials - Dart](https://dart.dev/tutorials)

src/roadmaps/flutter/content/111-state-management/101-bloc.md

@@ -1 +1,10 @@
-# Bloc
+# BloC
+
+Bloc (Business Logic Component) is a state management pattern used in Flutter to separate presentation logic from business logic. It helps to manage and maintain the app state, making it easier to test, debug, and reuse code. It uses streams to emit new states and reacts to changes in the state.
+
+Learn more from the following links:
+
+- [Get started with flutter_bloc](https://pub.dev/packages/flutter_bloc)
+- [BLoC in Flutter](https://docs.flutter.dev/development/data-and-backend/state-mgmt/options#bloc--rx)
+- [Flutter bloc for beginners](https://medium.com/flutter-community/flutter-bloc-for-beginners-839e22adb9f5)
+- [Flutter Bloc - Tutorial](https://www.youtube.com/watch?v=Ep6R7U9wa0U)

src/roadmaps/flutter/content/111-state-management/102-flutter-bloc.md

@@ -1,8 +1,8 @@
-# Flutter bloc
+# Flutter_bloc
 
-State management library exposing widgets which can help handle all possible states of the application.
+flutter_bloc is a Flutter package that implements the BLoC pattern and provides a set of tools for building BLoC-based apps. It provides a set of widgets, such as `BlocProvider` and `BlocBuilder`, that make it easier to implement the BLoC pattern in your app. It also provides utility classes, such as `Bloc` and `BlocEvent`, that help you to write reusable and testable business logic components.
 
 Visit the following resources to learn more:
 
 - [Core Concepts](https://bloclibrary.dev/#/flutterbloccoreconcepts)
-- [flutter_bloc](https://pub.dev/packages/flutter_bloc)
+- [flutter_bloc](https://pub.dev/packages/flutter_bloc)

src/roadmaps/flutter/content/111-state-management/103-velocity-x.md

@@ -1 +1,8 @@
-# Velocity x
+# VelocityX
+
+VelocityX is a Flutter UI toolkit for building high-performance, visually stunning, and easy-to-use mobile applications. It provides a set of pre-designed widgets, animations, and styles that can be combined to create beautiful and responsive apps quickly. VelocityX also includes features like dark mode, RTL support, and responsive design, making it a comprehensive solution for building modern mobile apps.
+
+Learn more from the following links:
+
+- [Get started with VelocityX](https://velocityx.dev/)
+- [Intro to velocity_x](https://pub.dev/packages/velocity_x)

src/roadmaps/flutter/content/111-state-management/104-get-x.md

@@ -1 +1,8 @@
-# Get x
+# GetX
+
+GetX is a lightweight and powerful solution for state management and navigation in Flutter. It provides a clean and simple API for managing app state and navigating between screens. GetX makes it easy to create scalable and maintainable apps, as it offers a central place to manage the app's state, reducing the amount of boilerplate code needed. It also provides out-of-the-box support for routing, making it easy to navigate between screens, and it supports hot reloading, which allows developers to see changes in real-time.
+
+Learn more from the following links:
+
+- [GetX in Flutter](https://docs.flutter.dev/development/data-and-backend/state-mgmt/options#getx)
+- [Complete GetX State Management | Flutter](https://www.youtube.com/watch?v=CNpXbeI_slw)

src/roadmaps/flutter/content/111-state-management/105-redux.md

@@ -1,7 +1,9 @@
-# Redux
+# ReduX
 
-A set of utilities that allow you to easily consume a Redux Store to build Flutter Widgets.
+Redux is a state management library for Flutter, commonly used with the Flutter framework to manage the application's state. It helps to maintain a single source of truth for the state of the application, making it easier to understand, test and maintain the code. In Redux, the state is stored in a store and can only be updated through dispatching actions. The actions trigger the update of the state via reducers, which are pure functions that determine the next state based on the current state and the dispatched action.
 
 Visit the following resources to learn more:
 
 - [flutter_redux](https://pub.dev/packages/flutter_redux)
+- [Redux - Tutorial](https://docs.flutter.dev/development/data-and-backend/state-mgmt/options#redux)
+- [Building a Flutter app with Redux](https://hillel.dev/2018/06/01/building-a-large-flutter-app-with-redux/)

src/roadmaps/flutter/content/111-state-management/index.md

@@ -1 +1,16 @@
-# State management
+# State Management
+
+State management in Flutter refers to the process of managing and updating the data or state of a Flutter application. In Flutter, the state of the widgets can change dynamically, for example, when a user interacts with the application. The state management techniques in Flutter include:
+
+- ScopedModel: a third-party state management solution that uses a centralized model to manage the state.
+- Provider: a lightweight solution that allows widgets to access the state with minimal boilerplate code.
+- BLoC (Business Logic Component): a state management technique that uses streams and reactive programming to manage the state.
+- Redux: a state management solution inspired by the Redux library in React.
+- InheritedWidget: a built-in widget that allows the state to be passed down the widget tree.
+
+The choice of state management technique depends on the complexity and size of the project. For smaller projects, Provider or InheritedWidget may be sufficient, while larger projects may require a more robust solution like ScopedModel or Redux.
+
+Learn more from the following resources:
+
+- [State management in Flutter](https://docs.flutter.dev/development/data-and-backend/state-mgmt)
+- [Intro to State Management](https://docs.flutter.dev/development/data-and-backend/state-mgmt/intro)

src/roadmaps/flutter/content/112-animations/100-curved-animations.md

@@ -1 +1,12 @@
-# Curved animations
+# CurvedAnimations
+
+Curved animations in Flutter can be achieved using the "CurvedAnimation" class. This class takes in a "Curve" object that defines the rate of change of the animation over time. The most commonly used curve is the "Curves.easeInOut" curve, which starts slow, speeds up in the middle, and then slows down again towards the end. To create a curved animation in Flutter, use the following steps:
+
+1. Create a "AnimationController" object that controls the animation.
+2. Create a "CurvedAnimation" object, passing in the "AnimationController" and a "Curve" object.
+3. Use the "CurvedAnimation" object in the animation.
+
+Learn more from the following links:
+
+- [Curved­Animation](https://docs.flutter.dev/development/ui/animations/tutorial)
+- [CurvedAnimation Class](https://api.flutter.dev/flutter/animation/CurvedAnimation-class.html)

src/roadmaps/flutter/content/112-animations/101-animation-controller.md

@@ -1 +1,15 @@
-# Animation controller
+# AnimationController
+
+This class lets you perform tasks such as:
+
+- Play an animation forward or in reverse, or stop an animation.
+- Set the animation to a specific value.
+- Define the upperBound and lowerBound values of an animation.
+- Create a fling animation effect using a physics simulation.
+
+By default, an AnimationController linearly produces values that range from 0.0 to 1.0, during a given duration. 
+
+Learn more from the following links:
+
+- [AnimationController - Flutter](https://docs.flutter.dev/development/ui/animations/tutorial#animationcontroller)
+- [AnimationController class](https://api.flutter.dev/flutter/animation/AnimationController-class.html)