chore: sync content to repo (#9387)

Co-authored-by: kamranahmedse <4921183+kamranahmedse@users.noreply.github.com>
2026-09-24 15:00:31 +08:00 · 2025-11-24 11:19:22 +00:00
parent 3b0c327c66
commit f8313554b7
31 changed files with 248 additions and 5 deletions
@@ -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/)
@@ -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)
@@ -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)
@@ -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)
@@ -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/)
@@ -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)
@@ -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)
@@ -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)
@@ -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)
@@ -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)
@@ -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)
@@ -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)
@@ -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)
@@ -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)
@@ -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)
+- [@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)
@@ -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)
@@ -0,0 +1,8 @@
+# Lists
+
+Lists in CSS are used to style HTML list elements, such as `<ul>` (unordered list), `<ol>` (ordered list), and `<dl>` (definition list). CSS provides properties to control the appearance of list markers (bullets or numbers), their position, and the overall styling of the list items. This allows you to customize the visual presentation of lists beyond the default browser styles.
+
+Visit the following resources to learn more:
+
+- [@article@CSS lists and counters](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_lists)
+- [@video@CSS List Styles Tutorial for Beginners](https://www.youtube.com/watch?v=jcThx0U066w)
@@ -0,0 +1,9 @@
+# Media Queries
+
+Media Queries are a powerful feature that allows you to apply different CSS styles based on characteristics of the device or screen being used to view a webpage. This enables you to create responsive designs that adapt to various screen sizes, resolutions, and orientations, ensuring an optimal viewing experience across a wide range of devices, from desktops to smartphones.
+
+Visit the following resources to learn more:
+
+- [@article@CSS media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries)
+- [@article@CSS Media Queries Guide](https://css-tricks.com/a-complete-guide-to-css-media-queries/)
+- [@video@Learn CSS Media Query In 7 Minutes](https://www.youtube.com/watch?v=yU7jJ3NbPdA)
@@ -0,0 +1,9 @@
+# Multicolumn Layout
+
+Multicolumn layout in CSS allows you to divide a block of content into multiple columns, similar to newspaper layouts. This feature enables text and other content to flow automatically from one column to the next, improving readability and making efficient use of screen space, especially for longer articles or lists. You can control the number of columns, the gap between them, and a rule (line) between the columns for visual separation.
+
+Visit the following resources to learn more:
+
+- [@article@CSS multi-column layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_multicol_layout)
+- [@article@Basic concepts of multi-column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_multicol_layout/Basic_concepts)
+- [@video@CSS Multi Column](https://www.youtube.com/watch?v=uwoX1JQcE-w)
@@ -0,0 +1,9 @@
+# Performance
+
+CSS performance refers to how efficiently CSS code is processed and rendered by a browser, impacting the speed and responsiveness of a website. Optimizing CSS for performance involves techniques like minimizing file sizes, reducing the complexity of selectors, and leveraging browser caching to ensure a smooth user experience.
+
+Visit the following resources to learn more:
+
+- [@article@CSS performance optimization](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Performance/CSS)
+- [@article@How to Optimize Your CSS Code for Faster Web Pages](https://www.freecodecamp.org/news/how-to-optimize-your-css-code-for-faster-web-pages/)
+- [@article@The Complete Guide to Optimizing CSS for Fast Page Loads](https://www.builder.io/blog/the-complete-guide-to-optimizing-css-for-fast-page-loads)
@@ -0,0 +1,10 @@
+# PostCSS
+
+PostCSS is a tool that uses JavaScript to transform CSS. It acts as a CSS parser and provides an API to analyze and modify the CSS code. It's often used with plugins to automate tasks like adding vendor prefixes, linting CSS, or supporting future CSS syntax.
+
+Visit the following resources to learn more:
+
+- [@official@PostCSS](https://postcss.org/)
+- [@opensource@PostCSS](https://github.com/postcss/postcss)
+- [@article@What is PostCSS? How to Use Plugins to Automate CSS Tasks](https://www.freecodecamp.org/news/what-is-postcss/)
+- [@video@Learn PostCSS In 15 Minutes](https://www.youtube.com/watch?v=Kn2SKUOaoT4&t=573s)
@@ -0,0 +1,9 @@
+# Pseudo-Classes
+
+Pseudo-classes in CSS are keywords added to selectors that specify a special state of the selected element(s). They let you style an element based on things like user interaction (e.g., hovering), its position in the document structure (e.g., the first child), or other element characteristics (e.g., being checked). They allow you to apply styles to elements dynamically without needing to modify the HTML or use JavaScript.
+
+Visit the following resources to learn more:
+
+- [@article@Pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes)
+- [@article@CSS Pseudo-classes](https://www.w3schools.com/css/css_pseudo_classes.asp)
+- [@video@Learn CSS pseudo-classes in 7 minutes!](https://www.youtube.com/watch?v=Nrsy_2ogRfQ)
@@ -0,0 +1,9 @@
+# Pseudo-Elements
+
+Pseudo-elements in CSS let you style specific parts of an element. They allow you to add styles to elements that don't actually exist in the HTML structure, like the first line of a paragraph or content before or after an element. This is done using double colons (::) followed by the pseudo-element name.
+
+Visit the following resources to learn more:
+
+- [@article@Pseudo-elements](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements)
+- [@article@CSS Pseudo-elements](https://www.w3schools.com/css/css_pseudo_elements.asp)
+- [@video@Learn CSS pseudo-elements in 5 minutes!](https://www.youtube.com/watch?v=_LxYNxeWpBo)
@@ -1,6 +1,6 @@
 # Relative Positioning

-Relative positioning in CSS allows you to shift an element from its normal position in the document flow.  Instead of being fixed in place, the element is moved relative to where it *would* have been if it were statically positioned. This movement doesn't affect the positioning of other elements around it; they behave as if the element were still in its original location. You specify the amount of movement using the `top`, `right`, `bottom`, and `left` properties.
+Relative positioning in CSS allows you to shift an element from its normal position in the document flow. Instead of being fixed in place, the element is moved relative to where it _would_ have been if it were statically positioned. This movement doesn't affect the positioning of other elements around it; they behave as if the element were still in its original location. You specify the amount of movement using the `top`, `right`, `bottom`, and `left` properties.

 Visit the following resources to learn more:

@@ -0,0 +1,9 @@
+# Responsive Typography
+
+Responsive typography is about making the text on a webpage look good and be easily readable on different screen sizes and devices. It involves adjusting font sizes, line heights, letter spacing, and other text properties to ensure optimal readability, whether someone is viewing the site on a large desktop monitor or a small mobile phone. The goal is to create a consistent and pleasant reading experience across all platforms.
+
+Visit the following resources to learn more:
+
+- [@article@How To Create a Responsive Text](https://www.w3schools.com/howto/howto_css_responsive_text.asp)
+- [@article@The elements of responsive typography](https://blog.logrocket.com/elements-responsive-typography/)
+- [@video@Responsive Typography with CSS Clamp](https://www.youtube.com/watch?v=erqRw3E-vn4)
@@ -0,0 +1,10 @@
+# Sass
+
+Sass (Syntactically Awesome Style Sheets) is a preprocessor scripting language that is compiled into CSS. It extends the capabilities of basic CSS by allowing you to use features like variables, nesting, mixins, functions, and inheritance. This makes CSS more maintainable, organized, and efficient to write.
+
+Visit the following resources to learn more:
+
+- [@official@Sass](https://sass-lang.com/)
+- [@official@Sass Basics](https://sass-lang.com/guide/)
+- [@article@Sass Tutorial](https://www.w3schools.com/sass/)
+- [@video@Sass Crash Course](https://www.youtube.com/watch?v=nu5mdN2JIwM)
@@ -0,0 +1,8 @@
+# Tables
+
+Tables in CSS are used to format tabular data on a webpage, arranging information into rows and columns. CSS provides properties to control the appearance of tables, including borders, spacing, alignment, and styling of individual cells, rows, and columns. These properties enable developers to create visually appealing and well-structured tables that present data effectively.
+
+Visit the following resources to learn more:
+
+- [@article@Table](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_table)
+- [@article@Styling HTML tables with CSS - Web Design/UX Tutorial](https://www.youtube.com/watch?v=biI9OFH6Nmg)
@@ -0,0 +1,10 @@
+# Transforms
+
+Transforms in CSS allow you to alter the shape and position of elements in a two-dimensional or three-dimensional space. This includes operations like rotating, scaling, skewing, and translating elements, providing a way to create visually engaging effects and manipulate the layout without affecting the underlying document flow.
+
+Visit the following resources to learn more:
+
+- [@article@CSS Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations)
+- [@article@CSS Transforms](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transforms)
+- [@article@Transform](https://css-tricks.com/almanac/properties/t/transform/)
+- [@video@Learn CSS transformations in 9 minutes!](https://www.youtube.com/watch?v=qdeIy9_fbxE)
@@ -0,0 +1,9 @@
+# Transitions
+
+Transitions in CSS allow you to smoothly change property values over a specified duration. Instead of an abrupt change, a transition creates a gradual effect when a CSS property changes, such as when hovering over an element or when a class is added or removed. This adds visual polish and improves the user experience by making interactions feel more fluid and responsive.
+
+Visit the following resources to learn more:
+
+- [@article@CSS transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions)
+- [@article@Using CSS transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions)
+- [@video@Animating with CSS Transitions - A look at the transition properties](https://www.youtube.com/watch?v=Nloq6uzF8RQ)
@@ -1,6 +1,6 @@
 # Universal Selector

-The universal selector in CSS is a simple selector that matches any element on a webpage. Represented by an asterisk (*), it applies a specific style to all elements, regardless of their type or position in the document tree. It's often used to reset or normalize styles across different browsers, ensuring a consistent baseline appearance.
+The universal selector in CSS is a simple selector that matches any element on a webpage. Represented by an asterisk (\*), it applies a specific style to all elements, regardless of their type or position in the document tree. It's often used to reset or normalize styles across different browsers, ensuring a consistent baseline appearance.

 Visit the following resources to learn more:

@@ -0,0 +1,8 @@
+# Z-Index and Stacking Context
+
+Z-index in CSS controls the vertical stacking order of elements that overlap. Elements with a higher z-index value will appear in front of elements with a lower z-index value. Stacking context is a three-dimensional conceptualization of HTML elements along an imaginary z-axis relative to the viewer, which determines the order in which elements appear in front of or behind each other.
+
+Visit the following resources to learn more:
+
+- [@article@z-index](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index)
+- [@video@CSS Z Index Property: What is CSS Z-Index, Stacking Order, and Why Your Z-Index Is Not Working?](https://www.youtube.com/watch?v=vo1JBj-OAa8)