chore: sync content to repo

src/data/roadmaps/frontend-beginner/content/css@ZhJhf1M2OphYbEmduFq-9.md

@@ -0,0 +1,11 @@
+# CSS
+
+CSS, or Cascading Style Sheets, is a language used to describe the look and formatting of a document written in HTML. It controls things like the colors, fonts, layout, and overall visual presentation of a website, ensuring it's both appealing and easy to navigate for users. Think of it as the makeup artist for your website, taking the basic structure provided by HTML and making it beautiful.
+
+Visit the following resources to learn more:
+
+- [@official@Visit the Dedicated CSS Roadmap](https://roadmap.sh/css)
+- [@article@HTML & CSS: design and build websites](https://sites.math.duke.edu/courses/math_everywhere/assets/techRefs/HTML%20and%20CSS-%20Design%20and%20Build%20Websites_Jon%20Duckett_2011.pdf)
+- [@article@CSS MDN Docs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/What_is_CSS)
+- [@article@CSS | Wikipedia](https://en.wikipedia.org/wiki/CSS)
+- [@video@SS Tutorial – Full Course for Beginners](https://www.youtube.com/watch?v=OXGznpKZ_sA)

src/data/roadmaps/frontend-beginner/content/git@R_I4SGYqLk5zze5I1zS_E.md

@@ -0,0 +1,10 @@
+# Git
+
+Git is like a save button for your code, but way more powerful. It's a system that tracks changes you make to your files, so you can easily go back to earlier versions, compare different versions, and collaborate with others on the same project without messing up each other's work. Think of it as a detailed history book for your code, allowing you to experiment and fix mistakes without fear of losing progress.
+
+Visit the following resources to learn more:
+
+- [@roadmap@Visit Dedicated Git & GitHub Roadmap](https://roadmap.sh/git-github)
+- [@article@Learn Git with Tutorials, News and Tips - Atlassian](https://www.atlassian.com/git)
+- [@article@Git Cheat Sheet](https://cs.fyi/guide/git-cheatsheet)
+- [@video@Git & GitHub Crash Course For Beginners](https://www.youtube.com/watch?v=SWYqp7iY_Tc)

src/data/roadmaps/frontend-beginner/content/github@qmTVMJDsEhNIkiwE_UTYu.md

@@ -0,0 +1,10 @@
+# GitHub
+
+GitHub is a website and service that helps developers store and manage their code. Think of it like a cloud-based folder where you can keep all your project files. It also allows multiple people to work on the same project at the same time without messing each other's work up, using a system called version control. This makes it easier to collaborate and track changes to your code.
+
+Visit the following resources to learn more:
+
+- [@roadmap@Visit Dedicated Git & GitHub Roadmap](https://roadmap.sh/git-github)
+- [@official@GitHub](https://github.com)
+- [@official@GitHub Documentation](https://docs.github.com/en/get-started/quickstart)
+- [@video@What is GitHub?](https://www.youtube.com/watch?v=w3jLJU7DT5E)

src/data/roadmaps/frontend-beginner/content/html@yWG2VUkaF5IJVVut6AiSy.md

@@ -0,0 +1,10 @@
+# HTML
+
+HTML, or HyperText Markup Language, is the standard language for creating web pages. It uses tags to structure content like headings, paragraphs, images, and links, telling the web browser how to display the information. Think of it as the skeleton of a website, providing the basic structure and content that users see.
+
+Visit the following resources to learn more:
+
+- [@roadmap@Visit the dedicated HTML roadmap](https://roadmap.sh/html)
+- [@article@Responsive Web Design Certification - Co-Learn HTML & CSS with guided projects](https://www.freecodecamp.org/learn/2022/responsive-web-design/)
+- [@video@HTML Full Course for Beginners](https://www.youtube.com/watch?v=mJgBOIoGihA)
+- [@video@HTML Full Course - Build a Website Tutorial](https://www.youtube.com/watch?v=pQN-pnXPaVg)

src/data/roadmaps/frontend-beginner/content/javascript@ODcfFEorkfJNupoQygM53.md

@@ -0,0 +1,11 @@
+# JavaScript
+
+JavaScript is a programming language that makes websites interactive. It lets you add dynamic content, control multimedia, animate images, and pretty much everything else that makes a webpage more than just static text. It runs in web browsers, allowing you to create engaging experiences for users.
+
+Visit the following resources to learn more:
+
+- [@roadmap@Visit Dedicated JavaScript Roadmap](https://roadmap.sh/javascript)
+- [@book@JavaScript from Beginner to Professional](https://www.gurukultti.org/admin/notice/javascript.pdf)
+- [@article@The Modern JavaScript Tutorial](https://javascript.info/)
+- [@article@Build 30 Javascript projects in 30 days](https://javascript30.com/)
+- [@video@JavaScript Crash Course For Beginners](https://www.youtube.com/watch?v=hdI2bqOjy3c&t=4s)

src/data/roadmaps/frontend-beginner/content/npm@ib_FHinhrw8VuSet-xMF7.md

@@ -0,0 +1,11 @@
+# npm
+
+npm is like a personal assistant for your coding projects. It's a tool that helps you easily manage and share code packages (like pre-written bits of code that do specific things) in your projects. Think of it as an app store, but for code. You can use it to install, update, and uninstall these packages, making it much easier to use other people's code and share your own.
+
+Visit the following resources to learn more:
+
+- [@official@NPM Website](https://www.npmjs.com/)
+- [@official@NPM Documentation](https://docs.npmjs.com/)
+- [@opensource@How to NPM](https://github.com/workshopper/how-to-npm)
+- [@article@Modern JavaScript for Dinosaurs](https://peterxjang.com/blog/modern-javascript-explained-for-dinosaurs.html)
+- [@video@NPM Tutorial for Beginners](https://www.youtube.com/watch?v=2V1UUhBJ62Y)

src/data/roadmaps/frontend-beginner/content/react@tG5v3O4lNIFc2uCnacPak.md

@@ -0,0 +1,9 @@
+# React
+
+React is a JavaScript library for building user interfaces. It lets you break down complex UIs into smaller, reusable components. These components manage their own data and can be composed together to create larger applications. React uses a declarative approach, meaning you describe what you want the UI to look like, and React takes care of updating the DOM efficiently.
+
+Visit the following resources to learn more:
+
+- [@roadmap@Visit Dedicated React Roadmap](https://roadmap.sh/react)
+- [@official@React Website](https://react.dev)
+- [@video@Full Stack React Developer Course](https://www.youtube.com/watch?v=Bvwq_S0n2pk)

src/data/roadmaps/frontend-beginner/content/tailwind@eghnfG4p7i-EDWfp3CQXC.md

@@ -0,0 +1,11 @@
+# Tailwind CSS
+
+Tailwind CSS is a utility-first CSS framework. Instead of providing pre-designed components like buttons or navigation bars, it gives you a set of pre-defined CSS classes that you can use directly in your HTML to style your elements. This allows for highly customized designs without writing custom CSS from scratch, offering a faster and more flexible way to style your web pages.
+
+Visit the following resources to learn more:
+
+- [@official@Tailwind Website](https://tailwindcss.com)
+- [@official@Online Playground](https://play.tailwindcss.com)
+- [@course@Tailwind CSS Full Course for Beginners](https://www.youtube.com/watch?v=lCxcTsOHrjo)
+- [@video@Should You Use Tailwind CSS?](https://www.youtube.com/watch?v=hdGsFpZ0J2E)
+- [@video@Official Screencasts](https://www.youtube.com/c/TailwindLabs/videos)

src/data/roadmaps/frontend-beginner/content/vitest@hVQ89f6G0LXEgHIOKHDYq.md

@@ -0,0 +1,9 @@
+# Vitest
+
+Vitest is a testing framework powered by Vite. It's designed to be fast and easy to use, especially for projects that already use Vite for development. Vitest allows you to write unit tests and integration tests for your frontend code, ensuring that your components and functions work as expected. It offers features like hot module replacement (HMR) during testing, a watch mode for automatically re-running tests on file changes, and compatibility with popular testing libraries like Jest.
+
+Visit the following resources to learn more:
+
+- [@official@Vitest - Next Generation Testing Framework](https://vitest.dev/)
+- [@official@Vitest Documentation](https://vitest.dev/guide/)
+- [@video@Vitest Simplified](https://www.youtube.com/watch?v=snCLQmINqCU)