Fix multiple group marking as done

components/roadmap/content-drawer.tsx

@@ -53,8 +53,8 @@ export function ContentDrawer(props: ContentDrawerProps) {
                 onClick={() => {
                   localStorage.setItem(groupId, 'done');
                   document
-                    .querySelector(`[data-group-id*="-${groupId}"]`)
-                    ?.classList?.add('done');
+                    .querySelectorAll(`[data-group-id*="-${groupId}"]`)
+                    .forEach((item) => item?.classList?.add('done'));
                   onClose();
                 }}
                 colorScheme="green"
@@ -62,7 +62,11 @@ export function ContentDrawer(props: ContentDrawerProps) {
                 size="xs"
                 iconSpacing={0}
               >
-                <Text as="span" d={['block', 'none', 'none', 'block']} ml="10px">
+                <Text
+                  as="span"
+                  d={['block', 'none', 'none', 'block']}
+                  ml="10px"
+                >
                   Mark as Done
                 </Text>
               </Button>
@@ -72,8 +76,8 @@ export function ContentDrawer(props: ContentDrawerProps) {
                 onClick={() => {
                   localStorage.removeItem(groupId);
                   document
-                    .querySelector(`[data-group-id*="-${groupId}"]`)
-                    ?.classList?.remove('done');
+                    .querySelectorAll(`[data-group-id*="-${groupId}"]`)
+                    .forEach((item) => item?.classList?.remove('done'));
                   onClose();
                 }}
                 colorScheme="red"
@@ -81,7 +85,11 @@ export function ContentDrawer(props: ContentDrawerProps) {
                 size="xs"
                 iconSpacing={0}
               >
-                <Text as="span" d={['block', 'none', 'none', 'block']} ml="10px">
+                <Text
+                  as="span"
+                  d={['block', 'none', 'none', 'block']}
+                  ml="10px"
+                >
                   Mark as Pending
                 </Text>
               </Button>

content/roadmaps/100-frontend/content/102-css/100-learn-the-basics.md

@@ -1 +1,11 @@
-# Learn the basics
+# CSS Basics
+
+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://www.w3schools.com/css/'>W3Schools — Learn CSS</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/learn/responsive-web-design/'>freeCodeCamp — Responsive Web Design</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://learn.shayhowe.com/html-css/building-your-first-web-page/'>Learn to Code HTML & CSS</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=yfoY53QXEnI'>CSS Crash Course For Absolute Beginners</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=D-h8L5hgW-w'>HTML and CSS Tutorial</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=FqmB-Zj2-PA'>CSS Masterclass - Tutorial & Course for Beginners</BadgeLink>