chore: sync content to repo (#9209)

Co-authored-by: kamranahmedse <4921183+kamranahmedse@users.noreply.github.com>
2026-09-24 15:00:31 +08:00 · 2025-10-20 11:31:13 +05:00
parent 710a829741
commit 754dc8ee37
75 changed files with 597 additions and 0 deletions
@@ -0,0 +1,7 @@
+# Absolute vs. Relative Units
+
+Absolute units in CSS represent fixed measurements, like pixels (px) or inches (in), and will always render at the same size regardless of screen size or other factors. Relative units, on the other hand, are based on other values, such as the font size of the parent element (em), the viewport width (vw), or the root element's font size (rem), allowing for more flexible and responsive layouts.
+
+Visit the following resources to learn more:
+
+- [@article@What are Absolute and Relative Units in CSS? Explained with Examples](https://www.freecodecamp.org/news/absolute-and-relative-css-units)
@@ -0,0 +1,7 @@
+# Absolute Positioning
+
+Absolute positioning in CSS allows you to precisely place an element relative to its nearest positioned ancestor (an ancestor with a position value other than `static`). If no such ancestor exists, the element is positioned relative to the initial containing block, which is typically the `<html>` element. Elements with `position: absolute` are removed from the normal document flow, meaning they don't affect the positioning of other elements around them.
+
+Visit the following resources to learn more:
+
+- [@video@CSS position deep dive](https://www.youtube.com/watch?v=fF_NVrd1s14)
@@ -0,0 +1,9 @@
+# Attribute Selectors
+
+Attribute selectors in CSS target HTML elements based on the presence or value of their attributes. They allow you to style elements more precisely than using just tag names or classes. For example, you can select all elements with a specific attribute, or only those where the attribute's value matches a certain string.
+
+Visit the following resources to learn more:
+
+- [@article@Attribute Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors)
+- [@article@Attribute Selectors | CSS Tricks](https://css-tricks.com/almanac/selectors/a/attribute/)
+- [@video@Attribute Selectors in detail - CSS Tutorial](https://www.youtube.com/watch?v=m_upHrxjR8s)
@@ -0,0 +1,8 @@
+# Background Attachment
+
+Background attachment in CSS controls how a background image behaves when the page is scrolled. It determines whether the background image scrolls along with the content or remains fixed in place. This property is useful for creating visual effects like parallax scrolling or keeping a watermark visible regardless of the user's scroll position.
+
+Visit the following resources to learn more:
+
+- [@article@Background Attachment](https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment)
+- [@video@CSS - Background Attachment - W3Schools.com](https://www.youtube.com/watch?v=lXs8BRnrW_M)
@@ -0,0 +1,8 @@
+# Background Color
+
+Background color in CSS sets the color of an element's background. It fills the entire box of an element, including padding, but not the border or margin. You can specify the color using color names (like "red"), hexadecimal values (like "#FF0000"), RGB values (like "rgb(255, 0, 0)"), or other color formats.
+
+Visit the following resources to learn more:
+
+- [@article@Background Color](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color)
+- [@video@CSS - Background Colors - W3Schools.com](https://www.youtube.com/watch?v=-itttmX6HX0&pp=ygUUYmFja2dyb3VuZCBjb2xvciBjc3M%3D)
@@ -0,0 +1,8 @@
+# Background Gradient
+
+Background gradients in CSS allow you to create smooth transitions between two or more colors for the background of an element. Instead of a solid color, you can define a gradient that blends colors together, adding visual depth and interest to your designs. These gradients can be linear (flowing in a straight line), radial (emanating from a center point), or conic (rotating around a center point).
+
+Visit the following resources to learn more:
+
+- [@article@CSS gradients](https://www.w3schools.com/css/css3_gradients.asp)
+- [@video@CSS Gradient Background - One Minute Coding ⏱](https://www.youtube.com/watch?v=NINIuzyWZ2c)
@@ -0,0 +1,8 @@
+# Background Position
+
+Background position in CSS controls where a background image is placed within its element. It lets you specify the horizontal and vertical placement of the image, using keywords like `top`, `bottom`, `left`, `right`, and `center`, or with numerical values (pixels, percentages, etc.) to fine-tune the exact location. This property is useful for aligning background images in specific ways, creating visual effects, or ensuring that important parts of the image are always visible.
+
+Visit the following resources to learn more:
+
+- [@article@Background Position](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position)
+- [@video@CSS Property : background-position explained !](https://www.youtube.com/watch?v=S_rcA0JKEaE)
@@ -0,0 +1,7 @@
+# Background
+
+In CSS, the term "background" refers to the properties that control the visual appearance of an element's background. This includes aspects like the background color, image, its positioning, whether it repeats, and its size. These properties allow you to add visual interest and customize the look of your web pages.
+
+Visit the following resources to learn more:
+
+- [@video@Learn CSS background in 3 minutes](https://www.youtube.com/watch?v=YA8ZciJa64k)
@@ -0,0 +1,7 @@
+# Block Display
+
+The `display: block;` property in CSS makes an element behave like a block-level element. This means it will take up the full width available to it, starting on a new line and pushing subsequent content to a new line as well. Block elements typically define the major structural components of a webpage.
+
+Visit the following resources to learn more:
+
+- [@video@Block, Inline, and Inline-Block explained | CSS Tutorial](https://www.youtube.com/watch?v=x_i2gga-sYg)
@@ -0,0 +1,8 @@
+# Border
+
+In CSS, the `border` property defines the line that surrounds an HTML element's content and padding. It controls the border's style (like solid, dashed, or dotted), width (thickness), and color. You can set all these properties at once using the shorthand `border` property, or individually using `border-style`, `border-width`, and `border-color`.
+
+Visit the following resources to learn more:
+
+- [@article@Border](https://developer.mozilla.org/en-US/docs/Web/CSS/border)
+- [@article@Learn CSS borders in 4 minutes!](https://www.youtube.com/watch?v=pkNdQ7TmxIw)
@@ -0,0 +1,8 @@
+# Box Model
+
+The CSS box model describes how elements on a webpage are structured as rectangular boxes. Each box consists of content (text, images, etc.), padding (space around the content), a border (a line around the padding and content), and a margin (space around the border). Understanding the box model is crucial for controlling the size and spacing of elements on a webpage.
+
+Visit the following resources to learn more:
+
+- [@article@The box model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model)
+- [@video@Learn CSS Box Model In 8 Minutes](https://www.youtube.com/watch?v=rIO5326FgPE)
@@ -0,0 +1,8 @@
+# Box Shadows
+
+Box shadows in CSS are visual effects that add depth and dimension to elements by creating a shadow around their frames. These shadows can be customized in terms of color, offset (horizontal and vertical distance), blur radius, and spread radius, allowing designers to simulate various lighting conditions and create visually appealing interfaces. Box shadows can be applied to almost any HTML element, enhancing the user experience by highlighting important elements or adding a subtle sense of realism.
+
+Visit the following resources to learn more:
+
+- [@article@Box Shadows](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow)
+- [@video@CSS Box-Shadow tutorial: the basics](https://www.youtube.com/watch?v=-JNRQ5HjNeI)
@@ -0,0 +1,8 @@
+# Cascading Order
+
+Cascading order in CSS determines which styles are applied to an element when multiple conflicting rules target the same element. It's a set of rules that browsers follow to resolve these conflicts, prioritizing styles based on factors like importance, specificity, and source order. Understanding the cascading order is crucial for predicting and controlling how styles are applied to your web pages.
+
+Visit the following resources to learn more:
+
+- [@article@Introduction to the CSS cascade](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascade/Cascade)
+- [@article@Handling conflicts](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts)
@@ -0,0 +1,8 @@
+# Child Combinator
+
+The child combinator selector in CSS allows you to target elements that are direct children of a specified parent element. It uses the `>` symbol to denote this direct parent-child relationship. This selector ensures that styles are only applied to elements that are immediately nested within the parent, ignoring any deeper descendants.
+
+Visit the following resources to learn more:
+
+- [@article@Child combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator)
+- [@article@Child and Sibling Selectors](https://css-tricks.com/child-and-sibling-selectors/)
@@ -0,0 +1,8 @@
+# Class Selectors
+
+Class selectors in CSS are used to select HTML elements based on the `class` attribute. They allow you to apply specific styles to elements that share a common class name. You define a class selector by using a period (`.`) followed by the class name.
+
+Visit the following resources to learn more:
+
+- [@article@Class selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors)
+- [@article@The Beginner's Guide to CSS Classes & .class Selectors](https://blog.hubspot.com/website/what-is-css-class)
@@ -0,0 +1,8 @@
+# Color
+
+Color in CSS is used to specify the foreground color of text and other elements. It can be defined using various methods, including named colors (like "red" or "blue"), hexadecimal values (like "#FF0000"), RGB values (like "rgb(255, 0, 0)"), RGBA values (which include an alpha channel for transparency), HSL values (hue, saturation, lightness), and HSLA values (which include an alpha channel for HSL).
+
+Visit the following resources to learn more:
+
+- [@article@Text color](https://developer.mozilla.org/en-US/docs/Web/CSS/color)
+- [@article@CSS Font Color – How to Style Text in HTML](https://www.freecodecamp.org/news/css-font-color-how-to-style-text-in-html/)
@@ -0,0 +1,8 @@
+# Combinator Selectors
+
+Combinator selectors in CSS define the relationship between elements based on their position in the document's structure. They allow you to target elements that are descendants, children, adjacent siblings, or general siblings of another element. This provides a powerful way to apply styles based on the HTML hierarchy, going beyond simple class or ID targeting.
+
+Visit the following resources to learn more:
+
+- [@article@Combinators](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Combinators)
+- [@video@Learn CSS combinators in 4 minutes!](https://www.youtube.com/watch?v=swZFmJsU54s)
@@ -0,0 +1,8 @@
+# Comments
+
+Comments in CSS are notes that you add to your code to explain what it does, or to temporarily disable parts of your code. Browsers ignore these comments, so they don't affect how your website looks. You create a CSS comment by starting with `/*` and ending with `*/`.
+
+Visit the following resources to learn more:
+
+- [@article@CSS Comments](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_syntax/Comments)
+- [@video@HTML & CSS for Absolute Beginners: HTML Comments](https://www.youtube.com/watch?v=NTlhOJIy8HY)
@@ -0,0 +1,3 @@
+# CSS Basics
+
+CSS Basics encompass the fundamental building blocks for styling web pages. This includes understanding selectors (how to target specific HTML elements), properties (the visual characteristics you want to change, like color or font size), and values (the specific settings for those properties, such as "red" or "16px"). Mastering these basics allows you to control the presentation of your website's content.
@@ -0,0 +1,8 @@
+# CSS Units
+
+CSS units define the size of elements and properties in a webpage. They specify how measurements like width, height, font size, and margins are interpreted by the browser. These units can be absolute, like pixels (px) or centimeters (cm), or relative, like em, rem, or viewport units (vw, vh), allowing for flexible and responsive layouts that adapt to different screen sizes and resolutions.
+
+Visit the following resources to learn more:
+
+- [@article@CSS Units](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units)
+- [@video@Learn CSS Units In 8 Minutes](https://www.youtube.com/watch?v=-GR52czEd-0)
@@ -0,0 +1,12 @@
+# CSS
+
+CSS (Cascading Style Sheets) is a language used to describe the presentation of a document written in HTML or XML. It controls the layout, colors, fonts, and other visual aspects of web pages, ensuring a consistent and visually appealing user experience across different devices and screen sizes. Essentially, CSS separates the content of a webpage from its design, making websites easier to maintain and update.
+
+Visit the following resources to learn more:
+
+- [@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,7 @@
+# Declaration
+
+A declaration in CSS is a single statement that specifies a property you want to style and the value you want to assign to that property. It's the fundamental building block for applying styles to HTML elements. Each declaration consists of a property name (like `color` or `font-size`), followed by a colon (`:`), and then a value (like `red` or `16px`). Declarations are always placed inside a CSS rule set, within the curly braces `{}`.
+
+Visit the following resources to learn more:
+
+- [@article@Introduction to CSS syntax: declarations, rulesets, and statements](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_syntax/Syntax)
@@ -0,0 +1,8 @@
+# Descendant Combinator
+
+The descendant combinator in CSS is a way to select HTML elements that are descendants of another element. It uses a single space (" ") between two selectors. The selector on the right side of the space will select all elements that are descendants (children, grandchildren, etc.) of the element specified by the selector on the left side.
+
+Visit the following resources to learn more:
+
+- [@article@Descendant combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator)
+- [@article@Descendant](https://css-tricks.com/almanac/selectors/d/descendant/)
@@ -0,0 +1,8 @@
+# Direction
+
+Direction in CSS controls the text direction of an element. It specifies whether the text should flow from left to right (LTR) or right to left (RTL). This property is particularly useful for languages like Arabic or Hebrew, which are written from right to left, ensuring proper text rendering and layout.
+
+Visit the following resources to learn more:
+
+- [@article@Direction](https://developer.mozilla.org/en-US/docs/Web/CSS/direction)
+- [@video@CSS how to: text direction](https://www.youtube.com/watch?v=SEX09kE5KmQ)
@@ -0,0 +1,8 @@
+# Display
+
+The `display` property in CSS controls how an element is rendered on a webpage, specifically defining its box type and how it interacts with other elements. It determines whether an element is treated as a block-level element (taking up the full width available), an inline element (flowing within the text), or something else entirely, like a table or a grid container. This property is fundamental for controlling the layout and structure of web pages.
+
+Visit the following resources to learn more:
+
+- [@article@Display](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
+- [@video@Learn CSS display property in 4 minutes!](https://www.youtube.com/watch?v=9T8uxp5hQ60)
@@ -0,0 +1,8 @@
+# Element Selectors
+
+Element selectors in CSS target HTML elements directly by their tag name. They allow you to apply styles to all occurrences of a specific element, such as all `<p>` (paragraph) or `<h1>` (heading) tags on a webpage. This is the most basic type of selector and provides a straightforward way to style common HTML elements.
+
+Visit the following resources to learn more:
+
+- [@article@CSS selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors)
+- [@article@CSS Selectors Cheat Sheet](https://www.sitepoint.com/css-selectors/)
@@ -0,0 +1,8 @@
+# External CSS
+
+External CSS involves writing CSS rules in a separate file (with a `.css` extension) and then linking that file to your HTML document. This approach promotes cleaner code, easier maintenance, and reusability of styles across multiple web pages. By separating the styling from the content, you can modify the look and feel of your website without altering the HTML structure.
+
+Visit the following resources to learn more:
+
+- [@article@Types of CSS: inline, external and internal definitions and differences explained](https://www.hostinger.com/tutorials/difference-between-inline-external-and-internal-css)
+- [@video@External Style Sheets | CSS](https://www.youtube.com/watch?v=2P_LUPc2HrM)
@@ -0,0 +1,7 @@
+# Fixed Positioning
+
+Fixed positioning in CSS allows an element to be locked in place relative to the browser window. This means that even when the user scrolls the page, the element remains visible in the same location on the screen. It's often used for navigation bars, footers, or other elements that need to stay persistent.
+
+Visit the following resources to learn more:
+
+- [@article@CSS position deep dive](https://www.youtube.com/watch?v=fF_NVrd1s14)
@@ -0,0 +1,8 @@
+# Font Families
+
+Font families in CSS are a way to specify the typeface used to display text on a webpage. They allow you to define a prioritized list of fonts, so if the user's computer doesn't have the first font available, the browser will try the next one in the list, and so on. This ensures that text is always displayed in a readable font, even if the preferred font isn't available.
+
+Visit the following resources to learn more:
+
+- [@article@Font Families](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family)
+- [@article@CSS Fonts](https://www.w3schools.com/css/css_font.asp)
@@ -0,0 +1,7 @@
+# Font Shorthand
+
+The font shorthand property in CSS provides a way to set multiple font-related properties in a single declaration. Instead of specifying `font-style`, `font-variant`, `font-weight`, `font-size`, `line-height`, and `font-family` individually, you can use the `font` property to define them all at once, making your stylesheets more concise and readable.
+
+Visit the following resources to learn more:
+
+- [@article@font shorthand](https://developer.mozilla.org/en-US/docs/Web/CSS/font)
@@ -0,0 +1,8 @@
+# Font Size
+
+Font size in CSS determines the size of the text on a webpage. It's a fundamental property that controls the visual prominence and readability of text elements. You can specify font sizes using various units like pixels (px), ems (em), rems (rem), percentages (%), and viewport units (vw, vh). Choosing the right font size is crucial for creating a visually appealing and accessible design.
+
+Visit the following resources to learn more:
+
+- [@article@font-size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size)
+- [@video@CSS Tutorial For Beginners - Font Size](https://www.youtube.com/watch?v=799zrGVpfA8)
@@ -0,0 +1,7 @@
+# Font Style
+
+Font style in CSS is used to select the appearance of a font, primarily to italicize or oblique text. It allows you to specify whether a font should be displayed in its normal, italic, or oblique version. This property is useful for emphasizing text or creating a visual distinction within a design.
+
+Visit the following resources to learn more:
+
+- [@article@font-style](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style)
@@ -0,0 +1,8 @@
+# Font Variant
+
+Font variant in CSS allows you to control the display of different variations of a font, such as small caps, oldstyle numerals, and alternate glyphs. It provides a way to access OpenType features within a font, enabling richer typographic control beyond basic font styling like size and weight. This property offers a shorthand for setting several more specific font variant properties.
+
+Visit the following resources to learn more:
+
+- [@article@Font variant](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant)
+- [@article@CSS font-variant Property](https://www.w3schools.com/cssref/pr_font_font-variant.php)
@@ -0,0 +1,9 @@
+# Frontend Development
+
+Frontend development involves crafting the user interface and user experience of a website or web application. It focuses on the parts of a website that users directly interact with, such as buttons, text, images, and navigation. Frontend developers use languages like HTML, CSS, and JavaScript to build these interactive elements and ensure they function correctly across different browsers and devices.
+
+Visit the following resources to learn more:
+
+- [@roadmap@Visit the dedicated Frontend Roadmap](https://roadmap.sh/frontend)
+- [@article@Front-End Development: The Complete Guide](https://cloudinary.com/guides/front-end-development/front-end-development-the-complete-guide)
+- [@video@Frontend web development - a complete overview](https://www.youtube.com/watch?v=WG5ikvJ2TKA)
@@ -0,0 +1,9 @@
+# Google Fonts
+
+Google Fonts is a free library of over a thousand different font families that you can easily use on your website. Instead of relying on the limited set of fonts that come pre-installed on a user's computer, you can link to Google's servers and use any font they offer. This allows for greater design flexibility and ensures that your website's typography looks consistent across different devices and operating systems.
+
+Visit the following resources to learn more:
+
+- [@article@Using web fonts](https://fonts.google.com/knowledge/using_type/using_web_fonts)
+- [@article@CSS Google Fonts](https://www.w3schools.com/css/css_font_google.asp)
+- [@video@How to Add Google Fonts to Your Website Including Multiple Fonts](https://www.youtube.com/watch?v=is9Z5HriVtQ)
@@ -0,0 +1,8 @@
+# Grouping Selectors
+
+Grouping selectors in CSS allows you to apply the same styles to multiple HTML elements simultaneously. Instead of writing the same CSS rules for each element individually, you can list the selectors separated by commas. This makes your CSS code more concise and easier to maintain, as you only need to define the styles once for all the grouped elements.
+
+Visit the following resources to learn more:
+
+- [@article@Grouping Multiple CSS Selectors](https://www.thoughtco.com/grouping-multiple-css-selectors-3467065)
+- [@article@Grouping Selectors in CSS](https://www.tutorialspoint.com/grouping-selectors-in-css)
@@ -0,0 +1,8 @@
+# Hex Colors
+
+Hex colors in CSS are a way to specify colors using hexadecimal values. They use a six-digit code, prefixed with a hash symbol (#), to represent the red, green, and blue components of a color. Each pair of digits represents the intensity of one of these primary colors, ranging from 00 (lowest intensity) to FF (highest intensity). For example, #FF0000 is red, #00FF00 is green, and #0000FF is blue.
+
+Visit the following resources to learn more:
+
+- [@article@hex color](https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color)
+- [@video@CSS - Colors Hex - W3Schools.com](https://www.youtube.com/watch?v=LLmCr_201GU)
@@ -0,0 +1,9 @@
+# HSL Colors
+
+HSL (Hue, Saturation, Lightness) is a way to define colors in CSS using three components: Hue, which represents the color type on a color wheel (0-360 degrees); Saturation, which indicates the intensity of the color (0-100%); and Lightness, which determines how bright or dark the color is (0-100%). This model offers a more intuitive way to adjust colors compared to RGB, allowing developers to easily create variations of a color by modifying its hue, saturation, or lightness values.
+
+Visit the following resources to learn more:
+
+- [@article@hsl function](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl)
+- [@article@CSS HSL Colors](https://www.w3schools.com/css/css_colors_hsl.asp)
+- [@video@How to Create RELATIVE Colors with hsl(from...) CSS Tutorial](https://www.youtube.com/watch?v=TI-OVY11HD4)
@@ -0,0 +1,11 @@
+# HTML
+
+HTML (HyperText Markup Language) is the standard markup language for creating web pages. It provides the structure and content of a website, using elements to define headings, paragraphs, images, links, and other components that are displayed in a web browser. HTML forms the foundation upon which CSS and JavaScript build to create visually appealing and interactive web experiences.
+
+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)
+- [@feed@Explore top posts about HTML](https://app.daily.dev/tags/html?ref=roadmapsh)
@@ -0,0 +1,7 @@
+# ID Selectors
+
+ID selectors in CSS are used to style a single, unique element on a webpage. They target an HTML element based on the value of its `id` attribute. An ID selector is denoted by a hash symbol (`#`) followed by the ID value.
+
+Visit the following resources to learn more:
+
+- [@article@ID Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors)
@@ -0,0 +1,8 @@
+# Inline-Block
+
+`inline-block` is a value for the CSS `display` property. It allows an element to flow like an inline element (sitting on the same line as other content) but also allows you to set its width and height, similar to a block-level element. This combines the benefits of both `inline` and `block` elements.
+
+Visit the following resources to learn more:
+
+- [@article@CSS display: inline-block](https://www.w3schools.com/css/css_inline-block.asp)
+- [@video@Block, Inline, and Inline-Block explained | CSS Tutorial](https://www.youtube.com/watch?v=x_i2gga-sYg)
@@ -0,0 +1,7 @@
+# Inline CSS
+
+Inline CSS involves directly embedding CSS styles within HTML elements using the `style` attribute. This method applies styles to individual elements, overriding external stylesheets or embedded styles. While offering quick and localized styling, it's generally discouraged for larger projects due to maintainability issues and separation of concerns.
+
+Visit the following resources to learn more:
+
+- [@article@Inline Style in HTML – CSS Inline Styles](https://www.freecodecamp.org/news/inline-style-in-html/)
@@ -0,0 +1,8 @@
+# Inline Display
+
+The `display: inline` property in CSS is used to specify that an element should be displayed as an inline element. Inline elements flow along with the surrounding content, similar to how text flows within a paragraph. They only take up as much width as necessary to contain their content, and the width and height properties do not affect them.
+
+Visit the following resources to learn more:
+
+- [@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)
+- [@video@Block, Inline, and Inline-Block explained | CSS Tutorial](https://www.youtube.com/watch?v=x_i2gga-sYg)
@@ -0,0 +1,8 @@
+# Internal CSS
+
+Internal CSS involves embedding CSS rules directly within an HTML document. This is achieved by using the `<style>` tag, typically placed inside the `<head>` section of the HTML file. The CSS rules defined within the `<style>` tag will then be applied to the elements within that specific HTML document.
+
+Visit the following resources to learn more:
+
+- [@article@Internal CSS](https://codeinstitute.net/global/blog/internal-css/)
+- [@video@How to Use Internal CSS [CSS Tutorials for Beginners]](https://www.youtube.com/watch?v=o2hQUHGueXY)
@@ -0,0 +1,11 @@
+# CSS
+
+CSS (Cascading Style Sheets) is a language used to describe the presentation of a document written in HTML or XML, including colors, layout, and fonts. It allows you to separate the content of your website (HTML) from its visual design, making websites more maintainable and adaptable. CSS uses rules to define how elements should be displayed, targeting specific HTML elements or groups of elements.
+
+Visit the following resources to learn more:
+
+- [@course@CSS Full Course for Beginners](https://www.youtube.com/watch?v=n4R2E7O-Ngo)
+- [@course@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/)
+- [@article@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,10 @@
+# JavaScript
+
+JavaScript is a programming language primarily used to create interactive and dynamic content on websites. It allows developers to add features like animations, form validation, and real-time updates without needing to reload the page. It works alongside HTML and CSS to define the behavior of web pages.
+
+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)
@@ -0,0 +1,8 @@
+# Line Height
+
+Line height in CSS controls the vertical space between lines of text within an element. It essentially defines the distance from the top of one line of text to the top of the next line. A larger line height creates more space, improving readability, while a smaller line height can make text appear cramped.
+
+Visit the following resources to learn more:
+
+- [@article@line-height](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)
+- [@video@HTML & CSS for Absolute Beginners: Line height and spacing](https://www.youtube.com/watch?v=HaTxxAj3cBo)
@@ -0,0 +1,8 @@
+# Margin
+
+Margin in CSS defines the space around an HTML element's border. It creates a gap between the element and surrounding elements, controlling the spacing and layout of content on a webpage. Margins can be set on all four sides of an element (top, right, bottom, left) and can have positive or negative values.
+
+Visit the following resources to learn more:
+
+- [@article@Margin](https://developer.mozilla.org/en-US/docs/Web/CSS/margin)
+- [@video@How CSS Padding and Margin Works](https://www.youtube.com/watch?v=NZEz4yNITd8)
@@ -0,0 +1,8 @@
+# Named Colors
+
+Named colors in CSS are predefined color values represented by specific keywords. Instead of using hexadecimal codes or RGB values, you can use names like "red," "blue," "green," or "black" to style elements. These names are understood by browsers and directly translate to specific color values, offering a simple and readable way to apply basic colors to your web pages.
+
+Visit the following resources to learn more:
+
+- [@article@Named colors](https://developer.mozilla.org/en-US/docs/Web/CSS/named-color)
+- [@video@CSS Colors Introduction - Color Names](https://www.youtube.com/shorts/lopsN9PCauk)
@@ -0,0 +1,8 @@
+# Next Sibling Combinator
+
+The next-sibling combinator in CSS (represented by the `+` symbol) selects an element that immediately follows another specific element in the HTML structure. It targets the element that is the very next sibling, meaning it shares the same parent and appears directly after the first element in the source code. This allows you to style elements based on their immediate preceding sibling.
+
+Visit the following resources to learn more:
+
+- [@article@Next-sibling combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Next-sibling_combinator)
+- [@article@https://css-tricks.com/child-and-sibling-selectors/](https://css-tricks.com/child-and-sibling-selectors/)
@@ -0,0 +1,8 @@
+# Display: None
+
+`display: none` is a CSS property value that completely removes an element from the document flow. When applied, the element will not take up any space on the page, and it will not be rendered at all. It's as if the element doesn't exist in the HTML structure for visual purposes.
+
+Visit the following resources to learn more:
+
+- [@article@CSS display:none and visibility:hidden – What's the Difference?](https://www.freecodecamp.org/news/css-display-none-and-visibility-hidden-the-difference/)
+- [@video@We can now transition to and from display: none](https://www.youtube.com/watch?v=vmDEHAzj2XE)
@@ -0,0 +1,8 @@
+# Opacity
+
+Opacity in CSS controls the transparency of an element. It determines how much of the background behind the element is visible. A value of `1` means the element is fully opaque (not transparent), while a value of `0` means it is completely transparent (invisible). Values between `0` and `1` create varying degrees of transparency.
+
+Visit the following resources to learn more:
+
+- [@article@Opacity](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity)
+- [@video@CSS Opacity - One Minute Coding](https://www.youtube.com/watch?v=QdkgbodF71k)
@@ -0,0 +1,8 @@
+# Outline
+
+In CSS, the `outline` property draws a line around an element, outside the border. Unlike borders, outlines don't affect the element's dimensions or position in the layout. They are primarily used for highlighting elements, often for accessibility purposes like indicating focus. You can control the style, color, and width of the outline.
+
+Visit the following resources to learn more:
+
+- [@article@Outline](https://developer.mozilla.org/en-US/docs/Web/CSS/outline)
+- [@video@CSS Outline vs Border - differences, advantages, and disadvantages](https://www.youtube.com/watch?v=xx_pJ2ouGnc)
@@ -0,0 +1,8 @@
+# Padding
+
+Padding refers to the space between the content of an element (like text or an image) and its border. It essentially creates a cushion around the content within the element's box. You can control the amount of padding on all four sides of an element (top, right, bottom, left) individually or set a uniform padding for all sides.
+
+Visit the following resources to learn more:
+
+- [@article@Padding](https://developer.mozilla.org/en-US/docs/Web/CSS/padding)
+- [@video@How CSS Padding and Margin Works](https://www.youtube.com/watch?v=NZEz4yNITd8)
@@ -0,0 +1,8 @@
+# Position
+
+Position in CSS controls how an element is placed within its containing element or the document itself. It allows you to precisely define where an element appears on the page, influencing its relationship with other elements and the overall layout. Different position values offer varying levels of control, from static placement within the normal document flow to fixed positions that remain in place even when the user scrolls.
+
+Visit the following resources to learn more:
+
+- [@article@Position](https://developer.mozilla.org/en-US/docs/Web/CSS/position)
+- [@video@Learn CSS Positions in 4 minutes](https://www.youtube.com/watch?v=YEmdHbQBCSQ)
@@ -0,0 +1,3 @@
+# Properties and Values
+
+In CSS, properties are like instructions that tell the browser how to style an HTML element. Each property has a value, which specifies the exact styling to apply. For example, the `color` property determines the text color, and its value could be `red`, `#00FF00`, or `rgb(0, 255, 0)`. The combination of a property and its value is called a declaration, and declarations are the building blocks of CSS rules.
@@ -0,0 +1,7 @@
+# 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.
+
+Visit the following resources to learn more:
+
+- [@video@CSS position deep dive](https://www.youtube.com/watch?v=fF_NVrd1s14)
@@ -0,0 +1,10 @@
+# RGB Colors in CSS
+
+RGB in CSS allows you to define colors using the Red, Green, and Blue color model. You specify the intensity of each color component (Red, Green, and Blue) as a value between 0 and 255, or as a percentage from 0% to 100%. By combining different amounts of red, green, and blue, you can create a wide range of colors. For example, `rgb(255, 0, 0)` represents pure red, `rgb(0, 255, 0)` represents pure green, and `rgb(0, 0, 255)` represents pure blue.
+
+Visit the following resources to learn more:
+
+- [@article@Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)
+- [@article@rgb function](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb)
+- [@article@CSS RGB Colors](https://www.w3schools.com/css/css_colors_rgb.asp)
+- [@video@CSS - Colors RGB & RGBA - W3Schools.com](https://www.youtube.com/watch?v=6tbUo6PXc88)
@@ -0,0 +1,8 @@
+# rgba and hsla Colors
+
+`rgba` and `hsla` are color models used in CSS to define colors with added transparency. `rgba` represents colors using Red, Green, Blue, and Alpha (transparency) values, while `hsla` uses Hue, Saturation, Lightness, and Alpha values. The alpha value ranges from 0 (fully transparent) to 1 (fully opaque), allowing for semi-transparent colors.
+
+Visit the following resources to learn more:
+
+- [@article@rgb](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb)
+- [@article@hsl](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl)
@@ -0,0 +1,7 @@
+# CSS Rules
+
+CSS rules are the fundamental building blocks of CSS stylesheets. Each rule specifies how particular HTML elements should be styled. A rule consists of a selector, which identifies the element(s) to be styled, and a declaration block, which contains one or more property-value pairs that define the styles to be applied. These property-value pairs are separated by semicolons and define the visual presentation of the selected elements.
+
+Visit the following resources to learn more:
+
+- [@article@Introduction to CSS syntax: declarations, rulesets, and statements](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_syntax/Syntax)
@@ -0,0 +1,8 @@
+# Selector
+
+A selector is a fundamental part of a CSS rule. It's essentially a pattern that identifies which HTML elements the rule should be applied to. Selectors can target elements based on their tag name, class, ID, attributes, or their relationship to other elements in the document.
+
+Visit the following resources to learn more:
+
+- [@article@CSS selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors)
+- [@video@Learn Every CSS Selector In 20 Minutes](https://www.youtube.com/watch?v=l1mER1bV0N0)
@@ -0,0 +1,8 @@
+# Simple Selectors
+
+Simple selectors in CSS are the basic building blocks for targeting HTML elements you want to style. They directly select elements based on their name (like `p` for paragraphs), ID (using `#`), or class (using `.`). These selectors are straightforward and provide a fundamental way to apply styles to specific parts of your webpage.
+
+Visit the following resources to learn more:
+
+- [@article@Basic CSS selectors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors)
+- [@video@CSS - Simple Selectors | W3Schools](https://www.youtube.com/watch?v=ZNskBxLVOfs)
@@ -0,0 +1,7 @@
+# Static Positioning
+
+Static positioning is the default way elements are placed on a webpage. Elements with static positioning are rendered in the order they appear in the HTML, following the normal document flow. You can't move them using the `top`, `right`, `bottom`, or `left` properties.
+
+Visit the following resources to learn more:
+
+- [@article@CSS position deep dive](https://www.youtube.com/watch?v=fF_NVrd1s14)
@@ -0,0 +1,9 @@
+# Sticky Positioning
+
+Sticky positioning in CSS is a hybrid of relative and fixed positioning. An element with `position: sticky;` is initially positioned relatively, but when the user scrolls to a point where the element would normally scroll off-screen, it becomes fixed, sticking to the specified offset (e.g., `top: 0;`) until the containing block's boundary is reached.
+
+Visit the following resources to learn more:
+
+- [@article@CSS Position Sticky - How It Really Works!](https://elad.medium.com/css-position-sticky-how-it-really-works-54cd01dc2d46)
+- [@video@A couple of cool things you can do with CSS position sticky](https://www.youtube.com/watch?v=8TyoihVGErI)
+- [@video@CSS position deep dive](https://www.youtube.com/watch?v=fF_NVrd1s14)
@@ -0,0 +1,7 @@
+# Subsequent Sibling Combinator
+
+The subsequent-sibling combinator in CSS is a way to select elements that are siblings (elements sharing the same parent) and appear directly after a specified element. It uses the tilde (~) symbol to denote this relationship. This selector targets all following siblings, not just the immediately adjacent one.
+
+Visit the following resources to learn more:
+
+- [@article@Subsequent-sibling combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Subsequent-sibling_combinator)
@@ -0,0 +1,8 @@
+# Text Alignment
+
+Text alignment in CSS controls how text is positioned horizontally within its containing element. It determines whether text is aligned to the left, right, center, or justified (spread evenly across the line). This property enhances readability and visual appeal by organizing text in a structured manner.
+
+Visit the following resources to learn more:
+
+- [@article@text-align](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align)
+- [@article@text-align | CSS Tricks](https://css-tricks.com/almanac/properties/t/text-align/)
@@ -0,0 +1,8 @@
+# Text Decoration
+
+Text decoration in CSS refers to the styling applied to text to enhance its appearance or convey specific meanings. It primarily involves adding lines above, below, or through the text. Common decorations include underlines, overlines, and line-throughs, which can be customized with different colors, styles, and thicknesses to achieve various visual effects.
+
+Visit the following resources to learn more:
+
+- [@article@text-decoration](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration)
+- [@video@CSS Tutorial For Beginners - Text Decoration](https://www.youtube.com/watch?v=dm54To0EOpw)
@@ -0,0 +1,8 @@
+# Text Shadows
+
+Text shadows in CSS add depth and visual interest to text by creating a blurred, offset copy of the text behind it. This effect is achieved using the `text-shadow` property, which allows you to specify the shadow's horizontal offset, vertical offset, blur radius, and color. Multiple shadows can be applied to a single text element, creating complex and layered effects.
+
+Visit the following resources to learn more:
+
+- [@article@text-shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow)
+- [@video@Learn CSS shadows in 3 minutes!](https://www.youtube.com/watch?v=Yqs_61ub1Ng)
@@ -0,0 +1,10 @@
+# Text Spacing
+
+Text spacing in CSS involves adjusting the space between characters, words, and lines of text. This control allows for improved readability and visual appeal by fine-tuning the horizontal and vertical spacing within text elements. Properties like `letter-spacing`, `word-spacing`, and `line-height` are used to manipulate these spaces.
+
+Visit the following resources to learn more:
+
+- [@article@letter-spacing](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing)
+- [@article@word-spacing](https://developer.mozilla.org/en-US/docs/Web/CSS/word-spacing)
+- [@article@CSS Text Spacing](https://www.codeguage.com/v1/courses/css/text-spacing)
+- [@video@HTML & CSS for Absolute Beginners: Line height and spacing](https://www.youtube.com/watch?v=HaTxxAj3cBo)
@@ -0,0 +1,9 @@
+# Text Styling
+
+Text styling in CSS involves controlling the visual appearance of text elements on a webpage. This includes properties that affect the font family, size, weight, color, and style of the text. Additionally, it encompasses properties for text alignment, decoration (like underlines), letter spacing, line height, and text transformations (such as capitalization).
+
+Visit the following resources to learn more:
+
+- [@article@Fundamental text and font styling](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Text_styling/Fundamentals)
+- [@article@Styling Text in CSS](https://pieces.app/blog/styling-text-in-css)
+- [@video@Beginner’s guide to styling text with CSS](https://www.youtube.com/watch?v=Y5TYDo9Qcv4)
@@ -0,0 +1,8 @@
+# Text Transform
+
+Text transform in CSS controls the capitalization of text. It allows you to change the case of letters within an element, regardless of how the text is originally written in the HTML. You can transform text to uppercase, lowercase, capitalize (first letter of each word), or keep the original case.
+
+Visit the following resources to learn more:
+
+- [@article@text-transform](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform)
+- [@video@CSS Tutorial For Beginners - Text Transform](https://www.youtube.com/watch?v=j0FS2hCoIjs)
@@ -0,0 +1,7 @@
+# Units with Functions
+
+Units with functions in CSS allow you to dynamically calculate values for properties using functions like `calc()`, `min()`, `max()`, and `clamp()`. These functions enable you to perform mathematical operations and comparisons directly within your CSS, making your designs more flexible and responsive by adapting to different screen sizes and contexts. This helps in creating more dynamic and adaptable layouts.
+
+Visit the following resources to learn more:
+
+- [@video@A CSS Unit Deep Dive - Learn CSS Units & When To Use Them](https://www.youtube.com/watch?v=fzZTvLmmTzM)
@@ -0,0 +1,8 @@
+# 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.
+
+Visit the following resources to learn more:
+
+- [@article@Universal Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors)
+- [@video@CSS Tutorial For Beginners - The Universal Selector](https://www.youtube.com/watch?v=EO4ToIX-ZQk)
@@ -0,0 +1,8 @@
+# Visibility
+
+The `visibility` property in CSS controls whether an element is visible or hidden. When an element's visibility is set to `hidden`, it disappears from the page, but the space it would have occupied remains. This is different from `display: none`, which removes the element from the document flow entirely, causing surrounding elements to reflow.
+
+Visit the following resources to learn more:
+
+- [@article@Visibility](https://developer.mozilla.org/en-US/docs/Web/CSS/visibility)
+- [@article@CSS display:none and visibility:hidden – What's the Difference?](https://www.freecodecamp.org/news/css-display-none-and-visibility-hidden-the-difference/)
@@ -0,0 +1,8 @@
+# Width and Height
+
+Width and height in CSS define the size of an element's content area. The `width` property sets the horizontal space an element occupies, while the `height` property sets the vertical space. These properties can be specified using various units like pixels, percentages, or keywords like `auto`.
+
+Visit the following resources to learn more:
+
+- [@article@CSS Width / Height Properties](https://www.programiz.com/css/width-height)
+- [@video@Learn CSS height and width in 6 minutes!](https://www.youtube.com/watch?v=QctF-i4-GuM)