From c0deb15e4328020d7a245e8e797f72d37c126912 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Wed, 8 Dec 2021 20:05:32 +0100
Subject: [PATCH 01/10] Fix link on the frontend roadmap

---
 public/project/frontend.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/project/frontend.json b/public/project/frontend.json
index 1d1620723..19d96b99c 100644
--- a/public/project/frontend.json
+++ b/public/project/frontend.json
@@ -3543,7 +3543,7 @@
           "x": "624",
           "y": "273",
           "properties": {
-            "controlName": "roadmap:frontend"
+            "controlName": "ext_link:roadmap.sh/frontend"
           },
           "children": {
             "controls": {

From 73ea7554ebe7ef41d3e3512bfd8cd9ef38906003 Mon Sep 17 00:00:00 2001
From: Eihab Khan <mastereihab@gmail.com>
Date: Thu, 9 Dec 2021 08:56:38 +0100
Subject: [PATCH 02/10] Added CSS Flexbox learning resource

---
 content/roadmaps/100-frontend/content/102-css/readme.md | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/content/roadmaps/100-frontend/content/102-css/readme.md b/content/roadmaps/100-frontend/content/102-css/readme.md
index 77d84371c..fd5077c78 100644
--- a/content/roadmaps/100-frontend/content/102-css/readme.md
+++ b/content/roadmaps/100-frontend/content/102-css/readme.md
@@ -1 +1,4 @@
-# Css
\ No newline at end of file
+# Css
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Watch' href='https://flexbox.io/'>What The Flexbox!</BadgeLink>

From 8875b383be744201f8d7e35c4d085d71c3782a72 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Thu, 9 Dec 2021 13:25:01 +0100
Subject: [PATCH 03/10] Update banner colors

---
 components/page-wrapper.tsx   |   2 +-
 components/updates-banner.tsx |  89 ++++++++++++++++++++++++----------
 public/bg.jpg                 | Bin 0 -> 14517 bytes
 styles/theme.ts               |   6 +--
 4 files changed, 67 insertions(+), 30 deletions(-)
 create mode 100644 public/bg.jpg

diff --git a/components/page-wrapper.tsx b/components/page-wrapper.tsx
index d3edc71f3..626e01471 100644
--- a/components/page-wrapper.tsx
+++ b/components/page-wrapper.tsx
@@ -9,7 +9,7 @@ export function PageWrapper(props: PageWrapperProps) {
   const { children } = props;
 
   return (
-    <Box bgColor='brand.hero' bgImage='url(/bg.png)' bgRepeat='no-repeat' bgSize='100%' w='100%' minH='100vh'>
+    <Box bgColor='brand.bg' bgImage='url(/bg.jpg)' bgRepeat='no-repeat' bgSize='100%' w='100%' minH='100vh'>
       { children }
     </Box>
   );
diff --git a/components/updates-banner.tsx b/components/updates-banner.tsx
index 0515fd73b..ca6309140 100644
--- a/components/updates-banner.tsx
+++ b/components/updates-banner.tsx
@@ -1,40 +1,77 @@
-import { Box, Button, Container, Flex, Heading, Link, Text } from '@chakra-ui/react';
+import {
+  Box,
+  Button,
+  Container,
+  Flex,
+  Heading,
+  Link,
+  Text,
+} from '@chakra-ui/react';
 import siteConfig from '../content/site.json';
 
 export function UpdatesBanner() {
   return (
-    <Box borderTopWidth={1}
-         pt={['40px', '40px', '70px']}
-         pb={['40px', '45px', '80px']}
-         textAlign='left'
-         bg='brand.footer'>
-      <Container maxW='container.md'>
-        <Heading color={'gray.100'} fontSize={['25px', '25px', '35px']} mb={['5px', '5px', '15px']}>Stay
-          Informed</Heading>
-        <Text color='gray.400' lineHeight='26px' fontSize={['15px', '15px', '16px']} mb='20px'>Subscribe yourself to get
-          updates, new
-          guides, videos and roadmaps in your inbox.</Text>
+    <Box
+      borderTopWidth={1}
+      pt={['40px', '40px', '70px']}
+      pb={['40px', '45px', '80px']}
+      textAlign="left"
+      bg="brand.footer"
+    >
+      <Container maxW="container.md">
+        <Heading
+          color={'gray.100'}
+          fontSize={['25px', '25px', '35px']}
+          mb={['5px', '5px', '15px']}
+        >
+          Stay Informed
+        </Heading>
+        <Text
+          color="gray.400"
+          lineHeight="26px"
+          fontSize={['15px', '15px', '16px']}
+          mb="20px"
+        >
+          Subscribe yourself to get updates, new guides, videos and roadmaps in
+          your inbox.
+        </Text>
 
         <Flex flexDirection={['column', 'column', 'row']}>
           <Box mr={['0', '0', '20px']} mb={['15px', '15px', 0]}>
-            <Button as={Link} href='/signup' width={['full', 'auto']} fontSize={['14px', '14px', '16px']}
-                    variant='outline' borderWidth={2}
-                    colorScheme='green' _hover={{ color: 'green.200', textDecoration: 'none' }}>
+            <Button
+              as={Link}
+              href="/signup"
+              width={['full', 'auto']}
+              fontSize={['14px', '14px', '16px']}
+              variant="outline"
+              borderWidth={2}
+              colorScheme="green"
+              _hover={{ color: 'green.200', textDecoration: 'none' }}
+            >
               Subscribe to Updates
             </Button>
-            <Text color='gray.500' fontSize='13px' mt='5px'>Free subscription for updates</Text>
+            <Text color="gray.500" fontSize="13px" mt="5px">
+              Free subscription for updates
+            </Text>
           </Box>
           <Box>
-            <Button as={Link}
-                    href={siteConfig.url.sponsor}
-                    target='_blank'
-                    width={['full', 'auto']}
-                    fontSize={['14px', '14px', '16px']}
-                    _hover={{ textDecoration: 'none', bg: 'yellow.500' }}
-                    colorScheme='yellow'>Updates & Paid Content</Button>
-            <Text color='gray.500' fontSize='13px' mt='5px'>Support the project by paying as little as <Text as='span'
-                                                                                                             fontWeight={600}>5$
-              per month</Text></Text>
+            <Button
+              as={Link}
+              href={siteConfig.url.sponsor}
+              target="_blank"
+              width={['full', 'auto']}
+              fontSize={['14px', '14px', '16px']}
+              _hover={{ textDecoration: 'none', bg: 'yellow.500' }}
+              colorScheme="yellow"
+            >
+              Updates & Paid Content
+            </Button>
+            <Text color="gray.500" fontSize="13px" mt="5px">
+              Support the project by paying as little as{' '}
+              <Text as="span" fontWeight={600}>
+                5$ per month
+              </Text>
+            </Text>
           </Box>
         </Flex>
       </Container>
diff --git a/public/bg.jpg b/public/bg.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..9c9345c21acbcb98f79a34634c2d55667effbeea
GIT binary patch
literal 14517
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

literal 0
HcmV?d00001

diff --git a/styles/theme.ts b/styles/theme.ts
index 4e31b6065..97f4b9df2 100644
--- a/styles/theme.ts
+++ b/styles/theme.ts
@@ -3,9 +3,9 @@ import { extendTheme } from '@chakra-ui/react';
 export const roadmapTheme = extendTheme({
   colors: {
     brand: {
-      bg: '#222222',
-      hero: '#161616',
-      footer: '#1c1c1c'
+      bg: '#06020d',
+      hero: '#06020d',
+      footer: '#0d041e'
     }
   }
 });

From a9b89edfc2eaf10806d0468a5c7e42f94f57dd8a Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Thu, 9 Dec 2021 13:30:55 +0100
Subject: [PATCH 04/10] Make edit page less attention grabbing

---
 components/roadmap/edit-content-page-link.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/roadmap/edit-content-page-link.tsx b/components/roadmap/edit-content-page-link.tsx
index a744d40de..ebdf30343 100644
--- a/components/roadmap/edit-content-page-link.tsx
+++ b/components/roadmap/edit-content-page-link.tsx
@@ -29,8 +29,8 @@ export function EditContentPageLink(props: EditContentPageLinkProps) {
         href={href}
         target="_blank"
         isFullWidth
-        colorScheme={'purple'}
-        _hover={{ textDecoration: 'none' }}
+        colorScheme={'gray'}
+        _hover={{ textDecoration: 'none', bg: 'gray.200' }}
       >
         Edit this Page
       </Button>

From 2b6432ebf6657fc6956505aa34fed0dc284a5f1d Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Thu, 9 Dec 2021 16:39:09 +0100
Subject: [PATCH 05/10] Marking progress on roadmap

---
 .../md-renderer/mdx-components/heading.tsx    | 12 ++--
 components/roadmap/content-drawer.tsx         | 67 +++++++++++++++++--
 pages/[roadmap]/interactive.tsx               | 17 +++--
 pages/_app.tsx                                |  5 ++
 4 files changed, 82 insertions(+), 19 deletions(-)

diff --git a/components/md-renderer/mdx-components/heading.tsx b/components/md-renderer/mdx-components/heading.tsx
index 1bda10f03..ea94a5e40 100644
--- a/components/md-renderer/mdx-components/heading.tsx
+++ b/components/md-renderer/mdx-components/heading.tsx
@@ -70,12 +70,12 @@ const H6 = styled(H1).attrs({ as: 'h6' })`
 `;
 
 const Headings = {
-  h1: linkify(H1),
-  h2: linkify(H2),
-  h3: linkify(H3),
-  h4: linkify(H4),
-  h5: linkify(H5),
-  h6: linkify(H6)
+  h1: H1,
+  h2: H2,
+  h3: H3,
+  h4: H4,
+  h5: H5,
+  h6: H6
 };
 
 export default Headings;
diff --git a/components/roadmap/content-drawer.tsx b/components/roadmap/content-drawer.tsx
index 9d179809d..42b5b6c65 100644
--- a/components/roadmap/content-drawer.tsx
+++ b/components/roadmap/content-drawer.tsx
@@ -1,7 +1,8 @@
-import { Box, CloseButton } from '@chakra-ui/react';
+import { Box, Button, Flex, Text } from '@chakra-ui/react';
 import { RemoveScroll } from 'react-remove-scroll';
 import { RoadmapType } from '../../lib/roadmap';
 import RoadmapGroup from '../../pages/[roadmap]/[group]';
+import { CheckIcon, CloseIcon, RepeatIcon } from '@chakra-ui/icons';
 
 type ContentDrawerProps = {
   roadmap: RoadmapType;
@@ -15,6 +16,8 @@ export function ContentDrawer(props: ContentDrawerProps) {
     return null;
   }
 
+  const isDone = localStorage.getItem(groupId) === 'done';
+
   return (
     <Box zIndex={99999} pos="relative">
       <Box
@@ -39,13 +42,63 @@ export function ContentDrawer(props: ContentDrawerProps) {
           borderLeftWidth={'1px'}
           overflowY="scroll"
         >
-          <CloseButton
-            onClick={onClose}
-            pos="absolute"
-            top={'20px'}
-            right={'20px'}
+          <Flex
+            mt="20px"
+            justifyContent="space-between"
+            alignItems="center"
             zIndex={1}
-          />
+          >
+            {!isDone && (
+              <Button
+                onClick={() => {
+                  localStorage.setItem(groupId, 'done');
+                  document
+                    .querySelector(`[data-group-id*="-${groupId}"]`)
+                    ?.classList?.add('done');
+                  onClose();
+                }}
+                colorScheme="green"
+                leftIcon={<CheckIcon />}
+                size="xs"
+                iconSpacing={0}
+              >
+                <Text as="span" d={['block', 'none', 'none', 'block']} ml="10px">
+                  Mark as Done
+                </Text>
+              </Button>
+            )}
+            {isDone && (
+              <Button
+                onClick={() => {
+                  localStorage.removeItem(groupId);
+                  document
+                    .querySelector(`[data-group-id*="-${groupId}"]`)
+                    ?.classList?.remove('done');
+                  onClose();
+                }}
+                colorScheme="purple"
+                leftIcon={<RepeatIcon />}
+                size="xs"
+                iconSpacing={0}
+              >
+                <Text as="span" d={['block', 'none', 'none', 'block']} ml="10px">
+                  Mark as Pending
+                </Text>
+              </Button>
+            )}
+            <Button
+              onClick={onClose}
+              colorScheme="yellow"
+              ml="5px"
+              leftIcon={<CloseIcon width="8px" />}
+              iconSpacing={0}
+              size="xs"
+            >
+              <Text as="span" d={['none', 'none', 'none', 'block']} ml="10px">
+                Close
+              </Text>
+            </Button>
+          </Flex>
           <RoadmapGroup isOutlet roadmap={roadmap} group={groupId} />
         </Box>
       </RemoveScroll>
diff --git a/pages/[roadmap]/interactive.tsx b/pages/[roadmap]/interactive.tsx
index 140c38b0c..c54a91b1e 100644
--- a/pages/[roadmap]/interactive.tsx
+++ b/pages/[roadmap]/interactive.tsx
@@ -12,6 +12,7 @@ import { RoadmapPageHeader } from '../../components/roadmap/roadmap-page-header'
 import { ContentDrawer } from '../../components/roadmap/content-drawer';
 import { RoadmapError } from '../../components/roadmap/roadmap-error';
 import { RoadmapLoader } from '../../components/roadmap/roadmap-loader';
+import { removeSortingInfo } from '../../lib/renderer/utils';
 
 type RoadmapProps = {
   roadmap: RoadmapType;
@@ -19,10 +20,6 @@ type RoadmapProps = {
 
 export function InteractiveRoadmapRenderer(props: RoadmapProps) {
   const { roadmap } = props;
-  if (!roadmap.jsonUrl) {
-    return null;
-  }
-
   const { loading: isLoading, error: hasErrorLoading, get } = useFetch();
 
   const roadmapRef = useRef(null);
@@ -33,6 +30,10 @@ export function InteractiveRoadmapRenderer(props: RoadmapProps) {
   const [hasErrorRendering, setHasErrorRendering] = useState(false);
 
   useEffect(() => {
+    if (!roadmap.jsonUrl) {
+      return;
+    }
+
     get(roadmap.jsonUrl)
       .then((roadmapJson) => {
         setRoadmapJson(roadmapJson);
@@ -65,7 +66,7 @@ export function InteractiveRoadmapRenderer(props: RoadmapProps) {
 
       // e.g. 100-internet:how-does-the-internet-work
       // will be translated to `internet:how-does-the-internet-work`
-      setGroupId(groupId.replace(/^\d+-/, ''));
+      setGroupId(removeSortingInfo(groupId));
     }
 
     window.addEventListener('keydown', keydownListener);
@@ -104,8 +105,12 @@ export function InteractiveRoadmapRenderer(props: RoadmapProps) {
       });
   }, [roadmapJson]);
 
+  if (!roadmap.jsonUrl) {
+    return null;
+  }
+
   if (hasErrorLoading || hasErrorRendering) {
-    return <RoadmapError roadmap={roadmap} />
+    return <RoadmapError roadmap={roadmap} />;
   }
 
   return (
diff --git a/pages/_app.tsx b/pages/_app.tsx
index fcd7ac9c8..245a60b87 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -43,6 +43,11 @@ const GlobalStyles = css`
     &:hover > [fill="rgb(153,153,153)"] { fill: #646464; }
     &:hover > [fill="rgb(255,255,255)"] { fill: #d7d7d7; }
   }
+  
+  svg .done {
+    & rect { fill: #cbcbcb; }
+    & text { text-decoration: line-through; }
+  }
 `;
 
 

From cd1b8ca94bc249b2220414dbf7ad7e02b66da541 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Thu, 9 Dec 2021 18:05:01 +0100
Subject: [PATCH 06/10] Change finished node marking

---
 pages/_app.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/_app.tsx b/pages/_app.tsx
index 245a60b87..8bfe5847c 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -45,7 +45,7 @@ const GlobalStyles = css`
   }
   
   svg .done {
-    & rect { fill: #cbcbcb; }
+    & rect { fill: #cbcbcb !important; }
     & text { text-decoration: line-through; }
   }
 `;

From 5561605285eca359b63161d2a7c93e5f98424ac9 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Thu, 9 Dec 2021 18:09:32 +0100
Subject: [PATCH 07/10] Change finished node marking

---
 components/roadmap/content-drawer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/roadmap/content-drawer.tsx b/components/roadmap/content-drawer.tsx
index 42b5b6c65..7aa276264 100644
--- a/components/roadmap/content-drawer.tsx
+++ b/components/roadmap/content-drawer.tsx
@@ -76,7 +76,7 @@ export function ContentDrawer(props: ContentDrawerProps) {
                     ?.classList?.remove('done');
                   onClose();
                 }}
-                colorScheme="purple"
+                colorScheme="red"
                 leftIcon={<RepeatIcon />}
                 size="xs"
                 iconSpacing={0}

From 5780a34f73727239b375b3e3bb18d7593e633f94 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Thu, 9 Dec 2021 18:17:02 +0100
Subject: [PATCH 08/10] Bump roadmap in GitHub ranking

---
 components/opensource-banner.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/opensource-banner.tsx b/components/opensource-banner.tsx
index 8327605cb..61cbdb054 100644
--- a/components/opensource-banner.tsx
+++ b/components/opensource-banner.tsx
@@ -12,7 +12,7 @@ export function OpensourceBanner() {
             target='_blank'
             borderBottomWidth={1}
             fontWeight={600}
-          >7th most starred project on GitHub</Link> and is visited by hundreds of thousands of
+          >6th most starred project on GitHub</Link> and is visited by hundreds of thousands of
           developers every month.</Text>
         <iframe
           src='https://ghbtns.com/github-btn.html?user=kamranahmedse&repo=developer-roadmap&type=star&count=true&size=large'

From 43ca6e669dc47d16abdae0586f19ac16b61c51b1 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Thu, 9 Dec 2021 18:56:55 +0100
Subject: [PATCH 09/10] Update style of resources

---
 .../100-internet/100-how-does-the-internet-work.md        | 4 ++--
 .../100-frontend/content/100-internet/101-what-is-http.md | 8 ++++----
 .../100-internet/102-browsers-and-how-they-work.md        | 6 +++---
 .../content/100-internet/103-dns-and-how-it-works.md      | 6 +++---
 .../content/100-internet/104-what-is-domain-name.md       | 6 +++---
 .../content/100-internet/105-what-is-hosting.md           | 6 +++---
 .../roadmaps/100-frontend/content/100-internet/readme.md  | 4 ++--
 content/roadmaps/100-frontend/content/102-css/readme.md   | 7 +++++--
 8 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/content/roadmaps/100-frontend/content/100-internet/100-how-does-the-internet-work.md b/content/roadmaps/100-frontend/content/100-internet/100-how-does-the-internet-work.md
index fdbfe9fba..ef14a4d6e 100644
--- a/content/roadmaps/100-frontend/content/100-internet/100-how-does-the-internet-work.md
+++ b/content/roadmaps/100-frontend/content/100-internet/100-how-does-the-internet-work.md
@@ -3,8 +3,8 @@
 The Internet is a global network of computers connected to each other which communicate through a standardized set of protocols.
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.vox.com/2014/6/16/18076282/the-internet'>The Internet Explained</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='http://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm'>How Does the Internet Work?</BadgeLink>
 <BadgeLink badgeText='Watch' href='/guides/what-is-internet'>Introduction to Internet</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=x3c1ih2NJEg'>How does the Internet work?</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=7_LPdttKXPc'>How the Internet Works in 5 Minutes</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.vox.com/2014/6/16/18076282/the-internet'>The Internet Explained</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='http://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm'>How Does the Internet Work?</BadgeLink>
diff --git a/content/roadmaps/100-frontend/content/100-internet/101-what-is-http.md b/content/roadmaps/100-frontend/content/100-internet/101-what-is-http.md
index e0ced83c0..17733babd 100644
--- a/content/roadmaps/100-frontend/content/100-internet/101-what-is-http.md
+++ b/content/roadmaps/100-frontend/content/100-internet/101-what-is-http.md
@@ -3,7 +3,7 @@
 HTTP is the `TCP/IP` based application layer communication protocol which standardizes how the client and server communicate with each other. It defines how the content is requested and transmitted across the internet.
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink badgeText='Read' href='https://www.cloudflare.com/en-gb/learning/ddos/glossary/hypertext-transfer-protocol-http/'>What is HTTP?</BadgeLink>
-<BadgeLink badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview'>An overview of HTTP</BadgeLink>
-<BadgeLink badgeText='Read' href='https://kamranahmed.info/blog/2016/08/13/http-in-depth/'>Journey to HTTP/2</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Watch' href='https://www.youtube.com/watch?v=iYM2zFP3Zn0'>HTTP Crash Course & Exploration</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.cloudflare.com/en-gb/learning/ddos/glossary/hypertext-transfer-protocol-http/'>What is HTTP?</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview'>An overview of HTTP</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://kamranahmed.info/blog/2016/08/13/http-in-depth/'>Journey to HTTP/2</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=iYM2zFP3Zn0'>HTTP Crash Course & Exploration</BadgeLink>
diff --git a/content/roadmaps/100-frontend/content/100-internet/102-browsers-and-how-they-work.md b/content/roadmaps/100-frontend/content/100-internet/102-browsers-and-how-they-work.md
index 4d21914ab..fa7d0aefc 100644
--- a/content/roadmaps/100-frontend/content/100-internet/102-browsers-and-how-they-work.md
+++ b/content/roadmaps/100-frontend/content/100-internet/102-browsers-and-how-they-work.md
@@ -3,6 +3,6 @@
 A web browser is a software application that enables a user to access and display web pages or other online content through its graphical user interface. 
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink badgeText='Read' href='https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/'>How Browsers Work</BadgeLink>
-<BadgeLink badgeText='Read' href='https://www.browserstack.com/guide/browser-rendering-engine'>Role of Rendering Engine in Browsers</BadgeLink>
-<BadgeLink badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work'>Populating the Page: How Browsers Work</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/'>How Browsers Work</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.browserstack.com/guide/browser-rendering-engine'>Role of Rendering Engine in Browsers</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work'>Populating the Page: How Browsers Work</BadgeLink>
diff --git a/content/roadmaps/100-frontend/content/100-internet/103-dns-and-how-it-works.md b/content/roadmaps/100-frontend/content/100-internet/103-dns-and-how-it-works.md
index 331e76de0..abcad0eb7 100644
--- a/content/roadmaps/100-frontend/content/100-internet/103-dns-and-how-it-works.md
+++ b/content/roadmaps/100-frontend/content/100-internet/103-dns-and-how-it-works.md
@@ -2,6 +2,6 @@
 The Domain Name System (DNS) is the phonebook of the Internet. Humans access information online through domain names, like nytimes.com or espn.com. Web browsers interact through Internet Protocol (IP) addresses. DNS translates domain names to IP addresses so browsers can load Internet resources.
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink badgeText='Read' href='https://www.cloudflare.com/en-gb/learning/dns/what-is-dns/'>What is DNS?</BadgeLink>
-<BadgeLink badgeText='Watch' colorScheme='yellow' href='https://www.youtube.com/watch?v=Wj0od2ag5sk'>DNS and How does it Work?</BadgeLink>
-<BadgeLink badgeText='Watch' colorScheme='yellow' href='https://www.youtube.com/watch?v=7lxgpKh_fRY'>DNS Records</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.cloudflare.com/en-gb/learning/dns/what-is-dns/'>What is DNS?</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=Wj0od2ag5sk'>DNS and How does it Work?</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=7lxgpKh_fRY'>DNS Records</BadgeLink>
diff --git a/content/roadmaps/100-frontend/content/100-internet/104-what-is-domain-name.md b/content/roadmaps/100-frontend/content/100-internet/104-what-is-domain-name.md
index fcd593a98..1fb0a759e 100644
--- a/content/roadmaps/100-frontend/content/100-internet/104-what-is-domain-name.md
+++ b/content/roadmaps/100-frontend/content/100-internet/104-what-is-domain-name.md
@@ -3,6 +3,6 @@
 A domain name is a unique, easy-to-remember address used to access websites, such as ‘google.com’, and ‘facebook.com’. Users can connect to websites using domain names thanks to the DNS system.
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_domain_name'>What is a Domain Name?</BadgeLink>
-<BadgeLink badgeText='Read' href='https://www.cloudflare.com/en-gb/learning/dns/glossary/what-is-a-domain-name/'>What is a Domain Name? | Domain name vs. URL</BadgeLink>
-<BadgeLink badgeText='Watch' colorScheme='yellow' href='https://www.youtube.com/watch?v=Y4cRx19nhJk'>A Beginners Guide to How Domain Names Work</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_domain_name'>What is a Domain Name?</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.cloudflare.com/en-gb/learning/dns/glossary/what-is-a-domain-name/'>What is a Domain Name? | Domain name vs. URL</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=Y4cRx19nhJk'>A Beginners Guide to How Domain Names Work</BadgeLink>
diff --git a/content/roadmaps/100-frontend/content/100-internet/105-what-is-hosting.md b/content/roadmaps/100-frontend/content/100-internet/105-what-is-hosting.md
index cb4638131..7ab9b4f76 100644
--- a/content/roadmaps/100-frontend/content/100-internet/105-what-is-hosting.md
+++ b/content/roadmaps/100-frontend/content/100-internet/105-what-is-hosting.md
@@ -3,6 +3,6 @@
 Web hosting is an online service that allows you to publish your website files onto the internet. So, anyone who has access to the internet has access to your website.
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=htbY9-yggB0' colorScheme='yellow'>What Is Web Hosting? Explained</BadgeLink>
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=AXVZYzw8geg' colorScheme='yellow'>Different Types of Web Hosting Explained</BadgeLink>
-<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=Kx_1NYYJS7Q' colorScheme='yellow'>Where to Host a Fullstack Project on a Budget</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=htbY9-yggB0'>What Is Web Hosting? Explained</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=AXVZYzw8geg'>Different Types of Web Hosting Explained</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=Kx_1NYYJS7Q'>Where to Host a Fullstack Project on a Budget</BadgeLink>
diff --git a/content/roadmaps/100-frontend/content/100-internet/readme.md b/content/roadmaps/100-frontend/content/100-internet/readme.md
index fdbfe9fba..ef14a4d6e 100644
--- a/content/roadmaps/100-frontend/content/100-internet/readme.md
+++ b/content/roadmaps/100-frontend/content/100-internet/readme.md
@@ -3,8 +3,8 @@
 The Internet is a global network of computers connected to each other which communicate through a standardized set of protocols.
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.vox.com/2014/6/16/18076282/the-internet'>The Internet Explained</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='http://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm'>How Does the Internet Work?</BadgeLink>
 <BadgeLink badgeText='Watch' href='/guides/what-is-internet'>Introduction to Internet</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=x3c1ih2NJEg'>How does the Internet work?</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=7_LPdttKXPc'>How the Internet Works in 5 Minutes</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.vox.com/2014/6/16/18076282/the-internet'>The Internet Explained</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='http://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm'>How Does the Internet Work?</BadgeLink>
diff --git a/content/roadmaps/100-frontend/content/102-css/readme.md b/content/roadmaps/100-frontend/content/102-css/readme.md
index fd5077c78..69321b41e 100644
--- a/content/roadmaps/100-frontend/content/102-css/readme.md
+++ b/content/roadmaps/100-frontend/content/102-css/readme.md
@@ -1,4 +1,7 @@
-# Css
+# CSS
+
+CSS or Cascading Style Sheets is the language used to style the frontend of any website. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink badgeText='Watch' href='https://flexbox.io/'>What The Flexbox!</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://flexboxfroggy.com/'>Learn and Practice Flexbox</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://flexboxfroggy.com/'>Learn and Practice Flexbox</BadgeLink>

From a3ed2f89e20eb621e6251ed11843fe99dd656194 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Thu, 9 Dec 2021 19:03:59 +0100
Subject: [PATCH 10/10] Add CSS resources

---
 .../100-frontend/content/102-css/101-making-layouts.md      | 6 +++++-
 content/roadmaps/100-frontend/content/102-css/readme.md     | 6 ++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/content/roadmaps/100-frontend/content/102-css/101-making-layouts.md b/content/roadmaps/100-frontend/content/102-css/101-making-layouts.md
index f9f691f09..f5a29eca9 100644
--- a/content/roadmaps/100-frontend/content/102-css/101-making-layouts.md
+++ b/content/roadmaps/100-frontend/content/102-css/101-making-layouts.md
@@ -1 +1,5 @@
-# Making layouts
\ No newline at end of file
+# Making layouts
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://flexboxfroggy.com/'>Learn and Practice Flexbox</BadgeLink>
diff --git a/content/roadmaps/100-frontend/content/102-css/readme.md b/content/roadmaps/100-frontend/content/102-css/readme.md
index 69321b41e..eef27cec6 100644
--- a/content/roadmaps/100-frontend/content/102-css/readme.md
+++ b/content/roadmaps/100-frontend/content/102-css/readme.md
@@ -3,5 +3,7 @@
 CSS or Cascading Style Sheets is the language used to style the frontend of any website. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://flexboxfroggy.com/'>Learn and Practice Flexbox</BadgeLink>
-<BadgeLink colorScheme='yellow' badgeText='Read' href='https://flexboxfroggy.com/'>Learn and Practice Flexbox</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.w3schools.com/css/'>W3Schools — Learn 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>