diff --git a/src/data/roadmaps/css/content/accessibility@LDIZoK-XgmwqPdLH01vC5.md b/src/data/roadmaps/css/content/accessibility@LDIZoK-XgmwqPdLH01vC5.md new file mode 100644 index 000000000..70dedbaf9 --- /dev/null +++ b/src/data/roadmaps/css/content/accessibility@LDIZoK-XgmwqPdLH01vC5.md @@ -0,0 +1,9 @@ +# Accessibility + +Accessibility in CSS focuses on creating web content that is usable by everyone, regardless of their abilities or disabilities. This involves using semantic HTML, providing alternative text for images, ensuring sufficient color contrast, and designing layouts that are navigable with assistive technologies like screen readers. By following accessibility best practices, developers can build inclusive websites that provide a better experience for all users. + +Visit the following resources to learn more: + +- [@article@CSS and JavaScript accessibility best practices](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript) +- [@article@CSS Accessibility Styling](https://www.w3schools.com/css/css_accessibility.asp) +- [@article@How to Use CSS to Improve Web Accessibility](https://www.freecodecamp.org/news/how-to-use-css-to-improve-web-accessibility/) \ No newline at end of file diff --git a/src/data/roadmaps/css/content/bem@r28JBMZLEqZMDm-tVDYZk.md b/src/data/roadmaps/css/content/bem@r28JBMZLEqZMDm-tVDYZk.md new file mode 100644 index 000000000..757f81fc7 --- /dev/null +++ b/src/data/roadmaps/css/content/bem@r28JBMZLEqZMDm-tVDYZk.md @@ -0,0 +1,9 @@ +# BEM + +BEM (Block, Element, Modifier) is a CSS naming convention that helps developers create more modular, reusable, and maintainable code. It structures class names to reflect the relationships between different parts of a user interface. This approach makes it easier to understand the purpose of each CSS rule and how it relates to the HTML structure, leading to more organized and scalable stylesheets. + +Visit the following resources to learn more: + +- [@official@BEM](https://getbem.com/) +- [@article@BEM 101](https://css-tricks.com/bem-101/) +- [@video@Why I use the BEM naming convention for my CSS](https://www.youtube.com/watch?v=SLjHSVwXYq4) \ No newline at end of file diff --git a/src/data/roadmaps/css/content/container-queries@IkN7i3ERk_lTOD0mBj3JO.md b/src/data/roadmaps/css/content/container-queries@IkN7i3ERk_lTOD0mBj3JO.md new file mode 100644 index 000000000..d8a8ab303 --- /dev/null +++ b/src/data/roadmaps/css/content/container-queries@IkN7i3ERk_lTOD0mBj3JO.md @@ -0,0 +1,9 @@ +# Container Queries + +Container Queries are a CSS feature that allows styles to be applied to an element based on the size or other characteristics of its containing element, rather than the viewport. This enables more granular and context-aware styling, where components can adapt their appearance based on the space available within their parent container, leading to more flexible and reusable designs. + +Visit the following resources to learn more: + +- [@article@CSS container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries) +- [@article@CSS Container Queries Guide](https://css-tricks.com/css-container-queries/) +- [@video@Master CSS container queries and boost your web design skills!](https://www.youtube.com/watch?v=8x8lxX5IGHY) \ No newline at end of file diff --git a/src/data/roadmaps/css/content/css-functions@I1wmKcLyjQUiJXPtsGye7.md b/src/data/roadmaps/css/content/css-functions@I1wmKcLyjQUiJXPtsGye7.md new file mode 100644 index 000000000..8e39b6cf0 --- /dev/null +++ b/src/data/roadmaps/css/content/css-functions@I1wmKcLyjQUiJXPtsGye7.md @@ -0,0 +1,10 @@ +# CSS Functions + +CSS functions are pre-defined operations that perform specific tasks within your CSS code. They allow you to manipulate values, perform calculations, and generate dynamic results, making your stylesheets more flexible and powerful. These functions are used within CSS property values to modify or create those values based on certain inputs. + +Visit the following resources to learn more: + +- [@article@CSS value functions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_Value_Functions) +- [@article@Functions](https://web.dev/learn/css/functions) +- [@article@Functions in CSS?!](https://css-tricks.com/functions-in-css/) +- [@video@First look at FUNCTIONS in CSS!!!](https://www.youtube.com/watch?v=fhuYPNlBkyw) \ No newline at end of file diff --git a/src/data/roadmaps/css/content/css-in-js@UInkC4leVjIsSXPN1y62W.md b/src/data/roadmaps/css/content/css-in-js@UInkC4leVjIsSXPN1y62W.md new file mode 100644 index 000000000..7ccd98b23 --- /dev/null +++ b/src/data/roadmaps/css/content/css-in-js@UInkC4leVjIsSXPN1y62W.md @@ -0,0 +1,7 @@ +# CSS-in-JS + +CSS-in-JS is a technique where CSS styles are written with JavaScript instead of external CSS files. This approach allows you to use JavaScript's capabilities, like variables, logic, and component-based architecture, to manage and apply styles directly within your JavaScript code. It offers benefits such as scoped styling, dynamic styling based on component state, and easier management of complex CSS projects. + +Visit the following resources to learn more: + +- [@article@A Thorough Analysis of CSS-in-JS](http://css-tricks.com/a-thorough-analysis-of-css-in-js/) \ No newline at end of file diff --git a/src/data/roadmaps/css/content/css-modules@DjeaAmUlNtNV3f8W0-dKf.md b/src/data/roadmaps/css/content/css-modules@DjeaAmUlNtNV3f8W0-dKf.md new file mode 100644 index 000000000..fce8fa0c2 --- /dev/null +++ b/src/data/roadmaps/css/content/css-modules@DjeaAmUlNtNV3f8W0-dKf.md @@ -0,0 +1,8 @@ +# CSS Modules + +CSS Modules are a system where CSS class names and animation names are scoped locally by default. This means that the class names you define in your CSS files are automatically transformed to be unique, preventing naming collisions and making it easier to manage styles in large projects. They offer a way to write modular and reusable CSS, ensuring that styles are applied only to the intended components. + +Visit the following resources to learn more: + +- [@article@What are CSS Modules and why do we need them?](https://css-tricks.com/css-modules-part-1-need/) +- [@video@CSS Modules: Why are they great?](https://www.youtube.com/watch?v=pKMWU9OrA2s) \ No newline at end of file diff --git a/src/data/roadmaps/css/content/css-specificity@iLVla2ZPA3WlWFmP2sc6H.md b/src/data/roadmaps/css/content/css-specificity@iLVla2ZPA3WlWFmP2sc6H.md new file mode 100644 index 000000000..8ccb07bcf --- /dev/null +++ b/src/data/roadmaps/css/content/css-specificity@iLVla2ZPA3WlWFmP2sc6H.md @@ -0,0 +1,8 @@ +# CSS Specificity + +CSS Specificity is the set of rules that browsers use to determine which CSS declarations apply to an element when multiple conflicting rules exist. It's essentially a weighting system that prioritizes certain CSS selectors over others, ensuring that the most relevant style is applied. Understanding specificity is crucial for controlling how your CSS styles are applied and resolving unexpected styling issues. + +Visit the following resources to learn more: + +- [@article@Specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascade/Specificity) +- [@video@CSS Specificity explained](https://www.youtube.com/watch?v=c0kfcP_nD9E) \ No newline at end of file diff --git a/src/data/roadmaps/css/content/css-variables@WGR5E9CXsZCxIhwZyCSKq.md b/src/data/roadmaps/css/content/css-variables@WGR5E9CXsZCxIhwZyCSKq.md new file mode 100644 index 000000000..f1ecb2d3d --- /dev/null +++ b/src/data/roadmaps/css/content/css-variables@WGR5E9CXsZCxIhwZyCSKq.md @@ -0,0 +1,9 @@ +# CSS Variables + +CSS Variables, also known as custom properties, are entities defined by CSS authors that contain specific values to be reused throughout a stylesheet. They allow you to store a value in one place and then reference it in multiple other places, making it easier to maintain and update your CSS code. This promotes consistency and reduces repetition, leading to more efficient and manageable stylesheets. + +Visit the following resources to learn more: + +- [@article@Using CSS custom properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties) +- [@article@How to use CSS variables like a pro](https://blog.logrocket.com/how-to-use-css-variables/) +- [@video@Learn CSS Variables In 7 Minutes](https://www.youtube.com/watch?v=5wLrz_zUwoU) \ No newline at end of file diff --git a/src/data/roadmaps/css/content/css@9ZUXy6s9IAIEM5GHk_bXR.md b/src/data/roadmaps/css/content/css@9ZUXy6s9IAIEM5GHk_bXR.md index ca99c3b15..16b42c422 100644 --- a/src/data/roadmaps/css/content/css@9ZUXy6s9IAIEM5GHk_bXR.md +++ b/src/data/roadmaps/css/content/css@9ZUXy6s9IAIEM5GHk_bXR.md @@ -4,9 +4,9 @@ CSS (Cascading Style Sheets) is a language used to describe the presentation of Visit the following resources to learn more: +- [@course@Responsive Web Design Certification - Co-Learn HTML & CSS with guided projects](https://www.freecodecamp.org/learn/2022/responsive-web-design/) +- [@course@Web.dev by Google β€” Learn CSS](https://web.dev/learn/css/) - [@article@Visit Dedicated JavaScript Roadmap](https://roadmap.sh/css) - [@video@CSS Complete Course](https://www.youtube.com/watch?v=n4R2E7O-Ngo) - [@video@HTML & CSS Full Course - Beginner to Pro](https://www.youtube.com/watch?v=G3e-cpL7ofc) -- [@course@Responsive Web Design Certification - Co-Learn HTML & CSS with guided projects](https://www.freecodecamp.org/learn/2022/responsive-web-design/) -- [@course@Web.dev by Google β€” Learn CSS](https://web.dev/learn/css/) - [@feed@Explore top posts about CSS](https://app.daily.dev/tags/css?ref=roadmapsh) \ No newline at end of file diff --git a/src/data/roadmaps/css/content/flexbox@Xa8oKhrZ2Y_Fsx3PjdMrt.md b/src/data/roadmaps/css/content/flexbox@Xa8oKhrZ2Y_Fsx3PjdMrt.md new file mode 100644 index 000000000..7618b691a --- /dev/null +++ b/src/data/roadmaps/css/content/flexbox@Xa8oKhrZ2Y_Fsx3PjdMrt.md @@ -0,0 +1,9 @@ +# Flexbox + +Flexbox is a CSS layout model that provides an efficient way to arrange, align, and distribute space among items in a container, even when their size is unknown or dynamic. It simplifies the creation of complex layouts by offering powerful tools for controlling the direction, order, size, and alignment of elements within a container. Flexbox is particularly useful for designing responsive and adaptable user interfaces. + +Visit the following resources to learn more: + +- [@article@Flexbox](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox) +- [@article@CSS Flexbox Layout Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) +- [@video@Learn CSS Flexbox in 20 Minutes (Course)](https://www.youtube.com/watch?v=wsTv9y931o8) \ No newline at end of file diff --git a/src/data/roadmaps/css/content/floating-elements@-uEIqIN1xxqlQzOmVgVUc.md b/src/data/roadmaps/css/content/floating-elements@-uEIqIN1xxqlQzOmVgVUc.md new file mode 100644 index 000000000..7c523059f --- /dev/null +++ b/src/data/roadmaps/css/content/floating-elements@-uEIqIN1xxqlQzOmVgVUc.md @@ -0,0 +1,8 @@ +# Floating Elements + +Floating elements in CSS allow you to take an element out of the normal document flow and position it to the left or right of its containing element. Other content will then flow around the floated element. This technique is commonly used to create layouts where text wraps around images or to position elements side-by-side. + +Visit the following resources to learn more: + +- [@article@Floating elements](https://developer.mozilla.org/en-US/docs/Web/CSS/float) +- [@video@Learn CSS float in 4 minutes! 🎈](https://www.youtube.com/watch?v=oJe8G5XT_v4) \ No newline at end of file diff --git a/src/data/roadmaps/css/content/flow-layout@U34z2pZgkH8NqiXMr5iuI.md b/src/data/roadmaps/css/content/flow-layout@U34z2pZgkH8NqiXMr5iuI.md new file mode 100644 index 000000000..26b604ff8 --- /dev/null +++ b/src/data/roadmaps/css/content/flow-layout@U34z2pZgkH8NqiXMr5iuI.md @@ -0,0 +1,10 @@ +# Flow Layout + +Flow layout is the default way elements are positioned on a webpage. Elements are displayed one after another, like words in a sentence, following the natural flow of the HTML. Block-level elements take up the full width available and start on a new line, while inline elements flow within the content, only taking up the space they need. + +Visit the following resources to learn more: + +- [@article@CSS flow layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Flow_layout) +- [@article@Block and inline layout in normal flow](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Block_and_inline_layout_in_normal_flow) +- [@article@Flow layout and writing modes](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Flow_layout_and_writing_modes) +- [@video@CSS website layout in 9 minutes! πŸ—ΊοΈ](https://www.youtube.com/watch?v=Hsu8uqQTSV8) \ No newline at end of file diff --git a/src/data/roadmaps/css/content/grid@6nemkEmghB_0SWBOHyI7a.md b/src/data/roadmaps/css/content/grid@6nemkEmghB_0SWBOHyI7a.md new file mode 100644 index 000000000..50f16815b --- /dev/null +++ b/src/data/roadmaps/css/content/grid@6nemkEmghB_0SWBOHyI7a.md @@ -0,0 +1,9 @@ +# Grid Layout + +Grid Layout is a two-dimensional layout system for CSS, enabling you to control the placement and sizing of elements within a grid container. It divides a webpage into rows and columns, allowing precise positioning of content and creating complex layouts with ease. This method offers flexibility and control over element arrangement, surpassing traditional methods like floats or positioning. + +Visit the following resources to learn more: + +- [@article@CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) +- [@article@CSS Grid Layout Guide](https://css-tricks.com/snippets/css/complete-guide-grid/) +- [@video@CSS Grid Intro and Basic Layout Tutorial for Beginners](https://www.youtube.com/watch?v=EaWj2AWI5Es) \ No newline at end of file diff --git a/src/data/roadmaps/css/content/images-and-filters@kcfgt2pu3MCsgki391tpa.md b/src/data/roadmaps/css/content/images-and-filters@kcfgt2pu3MCsgki391tpa.md new file mode 100644 index 000000000..15609f4ce --- /dev/null +++ b/src/data/roadmaps/css/content/images-and-filters@kcfgt2pu3MCsgki391tpa.md @@ -0,0 +1,10 @@ +# Images and Filters + +CSS allows you to incorporate images into your web designs and manipulate their appearance. You can use CSS to control image size, positioning, and how they interact with surrounding content. Additionally, CSS filters enable the direct application of visual effects, such as blurring, color adjustments, and transformations, to images, thereby enhancing their aesthetic appeal without requiring external image editing software. + +Visit the following resources to learn more: + +- [@article@CSS images](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_images) +- [@article@CSS filter effects](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_filter_effects) +- [@video@Dabbling with CSS Filters and Blending Effects](https://www.youtube.com/watch?v=-jy7dac750Q) +- [@video@CSS Background Images and Responsive Image Properties for Beginners](https://www.youtube.com/watch?v=cLyzBfXI0I0) \ No newline at end of file diff --git a/src/data/roadmaps/css/content/javascript@J1RsZPDKX-ocDvTh-Bg7N.md b/src/data/roadmaps/css/content/javascript@J1RsZPDKX-ocDvTh-Bg7N.md index 4e79f443c..867a01bbf 100644 --- a/src/data/roadmaps/css/content/javascript@J1RsZPDKX-ocDvTh-Bg7N.md +++ b/src/data/roadmaps/css/content/javascript@J1RsZPDKX-ocDvTh-Bg7N.md @@ -7,4 +7,6 @@ Visit the following resources to learn more: - [@roadmap@Visit Dedicated JavaScript Roadmap](https://roadmap.sh/javascript) - [@article@The Modern JavaScript Tutorial](https://javascript.info/) - [@article@Build 30 Javascript projects in 30 days](https://javascript30.com/) -- [@feed@Explore top posts about JavaScript](https://app.daily.dev/tags/javascript?ref=roadmapsh) \ No newline at end of file +- [@feed@Explore top posts about JavaScript](https://app.daily.dev/tags/javascript?ref=roadmapsh) +- [@book@JavaScript from Beginner to Professional](https://www.gurukultti.org/admin/notice/javascript.pdf) +- [@video@JavaScript Crash Course For Beginners](https://www.youtube.com/watch?v=hdI2bqOjy3c&t=4s) \ No newline at end of file diff --git a/src/data/roadmaps/css/content/keyframe-animations@qmKXfmheAvlap45aFrP9m.md b/src/data/roadmaps/css/content/keyframe-animations@qmKXfmheAvlap45aFrP9m.md new file mode 100644 index 000000000..0001dc4d8 --- /dev/null +++ b/src/data/roadmaps/css/content/keyframe-animations@qmKXfmheAvlap45aFrP9m.md @@ -0,0 +1,9 @@ +# Keyframe Animations + +Keyframe animations in CSS allow you to control the intermediate steps in a CSS animation sequence. Instead of just defining the start and end states, you can specify multiple points (keyframes) along the animation timeline, defining the styles an element should have at each point. This provides granular control over how an element's appearance changes over time, enabling complex and visually appealing animations. + +Visit the following resources to learn more: + +- [@article@@keyframes](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes) +- [@article@CSS keyframes](https://css-tricks.com/almanac/rules/k/keyframes/) +- [@video@Learn CSS Animations in 9 Minutes](https://www.youtube.com/watch?v=z2LQYsZhsFw) \ No newline at end of file diff --git a/src/data/roadmaps/css/content/lists@XuySIveFuvA_FvqDnNPRL.md b/src/data/roadmaps/css/content/lists@XuySIveFuvA_FvqDnNPRL.md new file mode 100644 index 000000000..82aa8a1d3 --- /dev/null +++ b/src/data/roadmaps/css/content/lists@XuySIveFuvA_FvqDnNPRL.md @@ -0,0 +1,8 @@ +# Lists + +Lists in CSS are used to style HTML list elements, such as `