Add flutter courses

Add links with more information about Flutter and tutorials

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>

content/roadmaps/100-frontend/content/121-mobile-applications/102-flutter.md

@@ -1 +1,20 @@
-# Flutter
+# Flutter
+
+Flutter is a free and open-source mobile UI framework created by Google and released in May 2017. In a few words, it allows you to create a native mobile application with only one codebase. This means that you can use one programming language and one codebase to create two different apps (for iOS and Android).
+
+Flutter consists of two important parts:
+
+- An SDK (Software Development Kit): A collection of tools that are going to help you develop your applications. This includes tools to compile your code into native machine code (code for iOS and Android).
+- A Framework (UI Library based on widgets): A collection of reusable UI elements (buttons, text inputs, sliders, and so on) that you can personalize for your own needs.
+To develop with Flutter, you will use a programming language called Dart. The language was created by Google in October 2011, but it has improved a lot over these past years.
+
+Dart focuses on front-end development, and you can use it to create mobile and web applications.
+
+If you know a bit of programming, Dart is a typed object programming language. You can compare Dart's syntax to JavaScript.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://flutter.dev'>Flutter Website</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.w3adda.com/flutter-tutorial'>Flutter Tutorial</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=1ukSR1GRtMU&list=PL4cUxeGkcC9jLYyp2Aoh6hcWuxFDX6PBJ'>Flutter Tutorial for Beginners</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.w3adda.com/flutter-tutorial'>Flutter Tutorial</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.tutorialspoint.com/dart_programming/index.htm'>Learn Dart Programming</BadgeLink>