├── CSS Fundamentals ├── 13 Performance Optimization │ ├── 01 Minifying CSS │ │ ├── minify_css.min.css │ │ ├── minify_css.css │ │ └── minify_css.html │ ├── 04 Critical CSS │ │ ├── critical_css.css │ │ └── critical_css.html │ ├── 02 Reducing Reflows and Repaints │ │ ├── reduce_reflows.css │ │ └── reduce_reflows.html │ └── 03 Using CSS Sprites │ │ ├── css_sprites.css │ │ └── css_sprites.html ├── 01 CSS Basics │ ├── 02 Linking CSS │ │ ├── linking_css.css │ │ └── linking_css.html │ ├── 03 CSS Comments │ │ ├── css_comments.css │ │ └── css_comments.html │ ├── 01 Syntax and Structure │ │ ├── syntax_structure.css │ │ └── syntax_structure.html │ └── 04 Units │ │ ├── css_units.css │ │ └── css_units.html ├── 15 CSS Frameworks │ ├── 02 Bootstrap │ │ ├── bootstrap.css │ │ └── bootstrap.html │ ├── 03 Customizing Frameworks │ │ ├── customize_framework.css │ │ └── customize_framework.html │ └── 01 Tailwind CSS │ │ └── tailwind.html ├── 11 Preprocessors │ ├── 03 Compiling SASS to CSS │ │ ├── compiled_sass.css │ │ └── compiled_sass.html │ ├── 02 SCSS Syntax │ │ ├── scss_syntax.txt │ │ └── scss_syntax.html │ └── 01 Introduction to SASS │ │ ├── sass_intro.txt │ │ └── sass_intro.html ├── 03 Selectors │ ├── 04 Pseudo-Elements │ │ ├── pseudo_elements.css │ │ └── pseudo_elements.html │ ├── 01 Element Class and ID Selectors │ │ ├── element_class_id_selectors.css │ │ └── element_class_id_selectors.html │ ├── 03 Pseudo-Classes │ │ ├── pseudo_classes.css │ │ └── pseudo_classes.html │ ├── 02 Attribute Selectors │ │ ├── attribute_selectors.css │ │ └── attribute_selectors.html │ └── 05 Combinators │ │ ├── combinators.css │ │ └── combinators.html ├── 06 Typography │ ├── 01 Font Properties │ │ ├── font_properties.css │ │ └── font_properties.html │ ├── 03 Web Fonts │ │ ├── web_fonts.css │ │ └── web_fonts.html │ ├── 02 Text Properties │ │ ├── text_properties.css │ │ └── text_properties.html │ └── 04 Line-Height and Vertical-Align │ │ ├── line_height_vertical_align.css │ │ └── line_height_vertical_align.html ├── 02 Box Model │ ├── 03 Margin Collapse │ │ ├── margin_collapse.css │ │ └── margin_collapse.html │ ├── 04 Outline vs Border │ │ ├── outline_vs_border.css │ │ └── outline_vs_border.html │ ├── 02 Box-Sizing │ │ ├── box_sizing.css │ │ └── box_sizing.html │ └── 01 Content Padding Border Margin │ │ ├── box_model_basics.css │ │ └── box_model_basics.html ├── 10 CSS Variables │ ├── 01 Declaring Variables │ │ ├── declaring_variables.css │ │ └── declaring_variables.html │ ├── 02 Using Variables │ │ ├── using_variables.css │ │ └── using_variables.html │ └── 03 Dynamic Theming with Variables │ │ ├── dynamic_theming.css │ │ └── dynamic_theming.html ├── 04 Colors and Backgrounds │ ├── 03 Gradients │ │ ├── gradients.css │ │ └── gradients.html │ ├── 04 Opacity and Transparency │ │ ├── opacity_transparency.css │ │ └── opacity_transparency.html │ ├── 01 Color Values │ │ ├── color_values.css │ │ └── color_values.html │ └── 02 Background Properties │ │ ├── background_properties.css │ │ └── background_properties.html ├── 16 Browser Compatibility │ ├── 03 Polyfills │ │ ├── polyfills.css │ │ └── polyfills.html │ ├── 02 Feature Detection │ │ ├── feature_detection.css │ │ └── feature_detection.html │ ├── 04 Debugging with DevTools │ │ ├── debugging_devtools.css │ │ └── debugging_devtools.html │ └── 01 Vendor Prefixes │ │ ├── vendor_prefixes.css │ │ └── vendor_prefixes.html ├── 09 Advanced Styling │ ├── 01 Box Shadow and Text Shadow │ │ ├── shadows.css │ │ └── shadows.html │ ├── 04 Clip-Path │ │ ├── clip_path.css │ │ └── clip_path.html │ ├── 02 Border-Radius │ │ ├── border_radius.css │ │ └── border_radius.html │ └── 03 CSS Filters │ │ ├── filters.css │ │ └── filters.html ├── 14 Accessibility in Styling │ ├── 04 Readable Font Sizes and Colors │ │ ├── readable_fonts.css │ │ └── readable_fonts.html │ ├── 03 Avoiding Pure CSS Hacks │ │ ├── avoid_css_hacks.css │ │ └── avoid_css_hacks.html │ ├── 01 Focus Styles │ │ ├── focus_styles.css │ │ └── focus_styles.html │ └── 02 High-Contrast Mode Support │ │ ├── high_contrast.css │ │ └── high_contrast.html ├── 07 Layouts │ ├── 02 CSS Grid │ │ ├── css_grid.css │ │ └── css_grid.html │ ├── 01 Flexbox │ │ ├── flexbox.css │ │ └── flexbox.html │ ├── 03 Media Queries for Responsive Design │ │ ├── media_queries.css │ │ └── media_queries.html │ └── 04 Viewport Units │ │ ├── viewport_units.css │ │ └── viewport_units.html ├── 05 Positioning and Display │ ├── 03 Float and Clear │ │ ├── float_clear.css │ │ └── float_clear.html │ ├── 04 Z-Index for Layering │ │ ├── z_index.css │ │ └── z_index.html │ ├── 02 Display │ │ ├── display.css │ │ └── display.html │ └── 01 Position │ │ ├── position.css │ │ └── position.html ├── 08 Animations and Transitions │ ├── 02 Keyframe Animations │ │ ├── keyframes.css │ │ └── keyframes.html │ ├── 01 Transitions │ │ ├── transitions.css │ │ └── transitions.html │ └── 03 Transform │ │ ├── transforms.css │ │ └── transforms.html └── 12 Responsive Design │ ├── 03 Responsive Typography │ ├── responsive_typography.css │ └── responsive_typography.html │ ├── 01 Mobile-First Design │ ├── mobile_first.css │ └── mobile_first.html │ ├── 04 Fluid Layouts │ ├── fluid_layouts.css │ └── fluid_layouts.html │ └── 02 Breakpoints with Media Queries │ ├── breakpoints.css │ └── breakpoints.html └── LICENSE /CSS Fundamentals/13 Performance Optimization/01 Minifying CSS/minify_css.min.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Minifying CSS (Minified Version) */ 2 | .box{background-color:lightblue;padding:20px;margin:20px;text-align:center;border:1px solid #333;border-radius:5px} -------------------------------------------------------------------------------- /CSS Fundamentals/01 CSS Basics/02 Linking CSS/linking_css.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: External CSS Linking */ 2 | /* This file is linked to the HTML using the tag */ 3 | 4 | .external-example { 5 | background-color: lightblue; 6 | padding: 10px; 7 | } -------------------------------------------------------------------------------- /CSS Fundamentals/15 CSS Frameworks/02 Bootstrap/bootstrap.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Bootstrap (grid system, components) */ 2 | 3 | /* Minimal custom styles for the Bootstrap example */ 4 | .card { 5 | transition: transform 0.3s ease; 6 | } 7 | 8 | .card:hover { 9 | transform: scale(1.05); 10 | } -------------------------------------------------------------------------------- /CSS Fundamentals/13 Performance Optimization/04 Critical CSS/critical_css.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Critical CSS for Above-the-Fold Content */ 2 | 3 | /* Styles for below-the-fold content */ 4 | .content { 5 | background-color: lightblue; 6 | padding: 20px; 7 | margin: 20px; 8 | text-align: center; 9 | } -------------------------------------------------------------------------------- /CSS Fundamentals/13 Performance Optimization/01 Minifying CSS/minify_css.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Minifying CSS (Regular Version) */ 2 | 3 | /* This is the unminified CSS with comments and formatting */ 4 | .box { 5 | background-color: lightblue; 6 | padding: 20px; 7 | margin: 20px; 8 | text-align: center; 9 | border: 1px solid #333; 10 | border-radius: 5px; 11 | } -------------------------------------------------------------------------------- /CSS Fundamentals/11 Preprocessors/03 Compiling SASS to CSS/compiled_sass.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Compiling SASS to CSS */ 2 | /* This is the compiled output of scss_syntax.scss */ 3 | 4 | .wrapper { 5 | padding: 15px; 6 | background-color: #f9f9f9; 7 | } 8 | .wrapper .card { 9 | background-color: lightgreen; 10 | border: 1px solid #333; 11 | padding: 15px; 12 | border-radius: 5px; 13 | } 14 | .wrapper .card h2 { 15 | margin: 0 0 15px 0; 16 | color: #333; 17 | } 18 | .wrapper .card p { 19 | margin: 0; 20 | font-size: 14px; 21 | } -------------------------------------------------------------------------------- /CSS Fundamentals/01 CSS Basics/03 CSS Comments/css_comments.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: CSS Comments */ 2 | /* Comments are written between /* and */ and are ignored by the browser */ 3 | 4 | /* Styling the h1 element */ 5 | h1 { 6 | color: purple; /* This sets the text color to purple */ 7 | font-size: 28px; /* This sets the font size */ 8 | } 9 | 10 | /* Styling the paragraph with a class */ 11 | .styled-paragraph { 12 | background-color: lightgray; /* Background color for the paragraph */ 13 | padding: 10px; /* Adds padding inside the paragraph */ 14 | } -------------------------------------------------------------------------------- /CSS Fundamentals/03 Selectors/04 Pseudo-Elements/pseudo_elements.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Pseudo-Elements (::before, ::after) */ 2 | 3 | /* ::before: Adds content before the element */ 4 | .before-example::before { 5 | content: "★ "; 6 | color: gold; 7 | font-size: 20px; 8 | } 9 | 10 | /* ::after: Adds content after the element */ 11 | .after-example::after { 12 | content: " ✔"; 13 | color: green; 14 | font-size: 20px; 15 | } 16 | 17 | /* Basic styling for the paragraphs */ 18 | p { 19 | padding: 10px; 20 | background-color: #f0f0f0; 21 | } -------------------------------------------------------------------------------- /CSS Fundamentals/06 Typography/01 Font Properties/font_properties.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Font Properties (family, size, weight, style) */ 2 | 3 | /* Font Family: Defines the typeface */ 4 | .custom-font { 5 | font-family: Arial, sans-serif; 6 | padding: 10px; 7 | } 8 | 9 | /* Font Size: Defines the text size */ 10 | /* Font Weight: Defines the boldness */ 11 | .large-bold { 12 | font-size: 24px; 13 | font-weight: bold; 14 | padding: 10px; 15 | } 16 | 17 | /* Font Style: Defines italic or normal */ 18 | .italic { 19 | font-style: italic; 20 | padding: 10px; 21 | } -------------------------------------------------------------------------------- /CSS Fundamentals/03 Selectors/01 Element Class and ID Selectors/element_class_id_selectors.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Element, Class, and ID Selectors */ 2 | 3 | /* Element Selector: Targets all elements of a specific type */ 4 | p { 5 | color: blue; 6 | font-size: 16px; 7 | } 8 | 9 | /* Class Selector: Targets elements with a specific class */ 10 | .highlight { 11 | background-color: yellow; 12 | padding: 5px; 13 | } 14 | 15 | /* ID Selector: Targets a single element with a specific ID */ 16 | #special { 17 | font-style: italic; 18 | color: green; 19 | border: 1px solid black; 20 | } -------------------------------------------------------------------------------- /CSS Fundamentals/02 Box Model/03 Margin Collapse/margin_collapse.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Margin Collapse */ 2 | /* Vertical margins of adjacent block elements collapse into a single margin (the larger one) */ 3 | 4 | .box1 { 5 | background-color: lightblue; 6 | margin-bottom: 40px; /* Larger margin */ 7 | padding: 10px; 8 | } 9 | 10 | .box2 { 11 | background-color: lightgreen; 12 | margin-top: 20px; /* Smaller margin */ 13 | padding: 10px; 14 | } 15 | 16 | /* The space between box1 and box2 will be 40px (the larger margin), not 60px */ 17 | body { 18 | background-color: #f0f0f0; 19 | } -------------------------------------------------------------------------------- /CSS Fundamentals/10 CSS Variables/01 Declaring Variables/declaring_variables.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Declaring Variables (--variable-name) */ 2 | 3 | /* Declaring CSS variables in the :root pseudo-class (global scope) */ 4 | :root { 5 | --primary-color: lightblue; 6 | --padding-size: 20px; 7 | } 8 | 9 | /* Applying the declared variable to a style */ 10 | .box { 11 | background-color: var(--primary-color); /* Using the variable (will be shown in the next example) */ 12 | padding: var(--padding-size); 13 | width: 200px; 14 | height: 100px; 15 | margin: 20px; 16 | text-align: center; 17 | } -------------------------------------------------------------------------------- /CSS Fundamentals/06 Typography/03 Web Fonts/web_fonts.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Web Fonts (@font-face, Google Fonts) */ 2 | 3 | /* Google Fonts: Applied via in the HTML */ 4 | .google-font { 5 | font-family: 'Roboto', sans-serif; 6 | font-size: 18px; 7 | padding: 10px; 8 | } 9 | 10 | /* @font-face: Normally used to define a custom font from a file */ 11 | /* Example (commented out since we can't host font files): 12 | @font-face { 13 | font-family: 'CustomFont'; 14 | src: url('customfont.woff2') format('woff2'); 15 | } 16 | .custom-font { 17 | font-family: 'CustomFont', sans-serif; 18 | } 19 | */ -------------------------------------------------------------------------------- /CSS Fundamentals/10 CSS Variables/02 Using Variables/using_variables.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Using Variables (var(--variable-name)) */ 2 | 3 | /* Declaring CSS variables */ 4 | :root { 5 | --bg-color: lightgreen; 6 | --text-color: darkblue; 7 | --box-padding: 15px; 8 | } 9 | 10 | /* Using CSS variables with var() */ 11 | .box { 12 | background-color: var(--bg-color); 13 | padding: var(--box-padding); 14 | width: 200px; 15 | height: 100px; 16 | margin: 20px; 17 | text-align: center; 18 | } 19 | 20 | .text { 21 | color: var(--text-color); 22 | font-size: 18px; 23 | margin: 20px; 24 | } -------------------------------------------------------------------------------- /CSS Fundamentals/01 CSS Basics/01 Syntax and Structure/syntax_structure.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: CSS Syntax and Structure */ 2 | /* CSS syntax: selector { property: value; } */ 3 | 4 | /* Element selector: Targets HTML elements directly */ 5 | h1 { 6 | color: blue; /* Property: color, Value: blue */ 7 | font-size: 24px; /* Property: font-size, Value: 24px */ 8 | } 9 | 10 | /* Class selector: Targets elements with a specific class */ 11 | .highlight { 12 | background-color: yellow; 13 | } 14 | 15 | /* ID selector: Targets an element with a specific ID */ 16 | #special { 17 | font-style: italic; 18 | color: green; 19 | } -------------------------------------------------------------------------------- /CSS Fundamentals/04 Colors and Backgrounds/03 Gradients/gradients.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Gradients (linear-gradient, radial-gradient) */ 2 | 3 | /* Linear Gradient: Transitions colors in a straight line */ 4 | .linear-gradient { 5 | background: linear-gradient(to right, red, yellow); 6 | padding: 20px; 7 | margin: 10px; 8 | height: 100px; 9 | color: white; 10 | } 11 | 12 | /* Radial Gradient: Transitions colors outward from a center point */ 13 | .radial-gradient { 14 | background: radial-gradient(circle, blue, lightblue); 15 | padding: 20px; 16 | margin: 10px; 17 | height: 100px; 18 | color: white; 19 | } -------------------------------------------------------------------------------- /CSS Fundamentals/03 Selectors/03 Pseudo-Classes/pseudo_classes.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Pseudo-Classes (:hover, :focus, :nth-child) */ 2 | 3 | /* :hover: Applies styles when the user hovers over an element */ 4 | a:hover { 5 | color: red; 6 | text-decoration: none; 7 | } 8 | 9 | /* :focus: Applies styles when an element is focused (e.g., by clicking or tabbing) */ 10 | input:focus { 11 | border: 2px solid blue; 12 | outline: none; 13 | } 14 | 15 | /* :nth-child: Targets elements based on their position in a parent */ 16 | li:nth-child(odd) { 17 | background-color: lightgray; 18 | } 19 | 20 | li:nth-child(even) { 21 | background-color: lightblue; 22 | } -------------------------------------------------------------------------------- /CSS Fundamentals/04 Colors and Backgrounds/04 Opacity and Transparency/opacity_transparency.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Opacity and Transparency */ 2 | 3 | /* Opacity: Controls the transparency of the entire element (0 to 1) */ 4 | .opacity-box { 5 | background-color: purple; 6 | opacity: 0.5; /* 50% transparent */ 7 | padding: 20px; 8 | margin: 10px; 9 | height: 100px; 10 | color: white; 11 | } 12 | 13 | /* RGBA: Uses alpha channel for transparency in colors */ 14 | .rgba-box { 15 | background-color: rgba(255, 165, 0, 0.7); /* Orange with 70% opacity */ 16 | padding: 20px; 17 | margin: 10px; 18 | height: 100px; 19 | color: white; 20 | } -------------------------------------------------------------------------------- /CSS Fundamentals/03 Selectors/02 Attribute Selectors/attribute_selectors.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Attribute Selectors */ 2 | 3 | /* Selects all elements with a specific attribute */ 4 | [href] { 5 | color: blue; 6 | } 7 | 8 | /* Selects elements with an attribute value starting with a specific string */ 9 | [href^="https"] { 10 | font-weight: bold; 11 | text-decoration: underline; 12 | } 13 | 14 | /* Selects elements with a specific attribute value */ 15 | [type="text"] { 16 | border: 2px solid green; 17 | padding: 5px; 18 | } 19 | 20 | /* Selects elements with an attribute value containing a specific string */ 21 | [href*="internal"] { 22 | color: red; 23 | } -------------------------------------------------------------------------------- /CSS Fundamentals/16 Browser Compatibility/03 Polyfills/polyfills.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Polyfills for Older Browsers */ 2 | 3 | /* Styles for the image using object-fit */ 4 | .responsive-img { 5 | width: 300px; 6 | height: 200px; 7 | margin: 20px; 8 | 9 | /* Modern property: object-fit (with polyfill support for older browsers) */ 10 | object-fit: cover; 11 | 12 | /* Fallback for browsers that don’t support object-fit (and no polyfill) */ 13 | /* Using a background image or alternative styling would be a common fallback */ 14 | /* Here, we ensure the image is still usable */ 15 | display: block; 16 | max-width: 100%; 17 | height: auto; 18 | } -------------------------------------------------------------------------------- /CSS Fundamentals/09 Advanced Styling/01 Box Shadow and Text Shadow/shadows.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Box Shadow and Text Shadow */ 2 | 3 | /* Box Shadow: Adds a shadow effect around an element */ 4 | .box-shadow { 5 | width: 200px; 6 | height: 100px; 7 | background-color: lightblue; 8 | margin: 20px; 9 | padding: 10px; 10 | text-align: center; 11 | box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* Offset-x, offset-y, blur, color */ 12 | } 13 | 14 | /* Text Shadow: Adds a shadow effect to text */ 15 | .text-shadow { 16 | font-size: 24px; 17 | color: darkblue; 18 | text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Offset-x, offset-y, blur, color */ 19 | margin: 20px; 20 | } -------------------------------------------------------------------------------- /CSS Fundamentals/14 Accessibility in Styling/04 Readable Font Sizes and Colors/readable_fonts.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Readable Font Sizes and Colors */ 2 | 3 | /* Use a readable font size (at least 16px or 1rem) and high-contrast colors */ 4 | .text { 5 | font-size: 1rem; /* 16px assuming default root font size */ 6 | line-height: 1.5; /* Improves readability */ 7 | color: #1a1a1a; /* Dark color for high contrast */ 8 | background-color: #f5f5f5; /* Light background for contrast */ 9 | padding: 10px; 10 | margin: 10px; 11 | } 12 | 13 | /* Ensure sufficient contrast ratio (at least 4.5:1 for normal text) */ 14 | /* Contrast between #1a1a1a (text) and #f5f5f5 (background) meets WCAG guidelines */ -------------------------------------------------------------------------------- /CSS Fundamentals/03 Selectors/05 Combinators/combinators.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Combinators (descendant, child, sibling) */ 2 | 3 | /* Descendant Combinator: Targets elements nested inside another (space) */ 4 | .container p { 5 | color: blue; 6 | background-color: lightblue; 7 | } 8 | 9 | /* Child Combinator: Targets direct children only (>) */ 10 | span > p { 11 | border: 2px solid green; 12 | padding: 5px; 13 | } 14 | 15 | /* Adjacent Sibling Combinator: Targets the immediate next sibling (+) */ 16 | p + p { 17 | color: red; 18 | font-style: italic; 19 | } 20 | 21 | /* General Sibling Combinator: Targets all following siblings (~) */ 22 | p ~ p { 23 | background-color: lightyellow; 24 | } -------------------------------------------------------------------------------- /CSS Fundamentals/06 Typography/02 Text Properties/text_properties.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Text Properties (align, decoration, transform, spacing) */ 2 | 3 | /* Text Align: Controls text alignment */ 4 | .align { 5 | text-align: center; 6 | padding: 10px; 7 | } 8 | 9 | /* Text Decoration: Adds effects like underline */ 10 | .decoration { 11 | text-decoration: underline; 12 | color: blue; 13 | padding: 10px; 14 | } 15 | 16 | /* Text Transform: Changes text case */ 17 | .transform { 18 | text-transform: uppercase; 19 | padding: 10px; 20 | } 21 | 22 | /* Spacing: Adjusts letter and word spacing */ 23 | .spacing { 24 | letter-spacing: 2px; 25 | word-spacing: 5px; 26 | padding: 10px; 27 | } -------------------------------------------------------------------------------- /CSS Fundamentals/16 Browser Compatibility/02 Feature Detection/feature_detection.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Feature Detection with @supports */ 2 | 3 | /* Default styles (fallback for browsers that don’t support grid) */ 4 | .box { 5 | width: 200px; 6 | height: 100px; 7 | background-color: lightblue; 8 | margin: 20px; 9 | padding: 10px; 10 | text-align: center; 11 | } 12 | 13 | /* Use @supports to apply styles if CSS Grid is supported */ 14 | @supports (display: grid) { 15 | .box { 16 | display: grid; 17 | place-items: center; 18 | background-color: lightgreen; /* Different color to show grid is applied */ 19 | width: 300px; /* Slightly larger to indicate support */ 20 | } 21 | } -------------------------------------------------------------------------------- /CSS Fundamentals/07 Layouts/02 CSS Grid/css_grid.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: CSS Grid (display: grid, grid-template, gap) */ 2 | 3 | /* Display: grid - Creates a grid container */ 4 | .grid-container { 5 | display: grid; 6 | /* Grid-Template: Defines the structure of rows and columns */ 7 | grid-template-columns: 1fr 1fr; /* Two equal columns */ 8 | grid-template-rows: auto auto; /* Two rows with auto height */ 9 | /* Gap: Adds spacing between grid items */ 10 | gap: 20px; 11 | background-color: lightgray; 12 | padding: 10px; 13 | } 14 | 15 | /* Styling for grid items */ 16 | .grid-item { 17 | background-color: lightgreen; 18 | padding: 20px; 19 | border: 1px solid black; 20 | text-align: center; 21 | } -------------------------------------------------------------------------------- /CSS Fundamentals/09 Advanced Styling/04 Clip-Path/clip_path.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Clip-Path for Custom Shapes */ 2 | 3 | /* Triangle: Uses clip-path to create a triangular shape */ 4 | .triangle { 5 | width: 200px; 6 | height: 200px; 7 | background-color: lightblue; 8 | margin: 20px; 9 | padding: 10px; 10 | text-align: center; 11 | clip-path: polygon(50% 0%, 0% 100%, 100% 100%); /* Creates a triangle */ 12 | } 13 | 14 | /* Circle: Uses clip-path to create a circular shape */ 15 | .circle { 16 | width: 200px; 17 | height: 200px; 18 | background-color: lightcoral; 19 | margin: 20px; 20 | padding: 10px; 21 | text-align: center; 22 | clip-path: circle(50% at 50% 50%); /* Creates a circle */ 23 | } -------------------------------------------------------------------------------- /CSS Fundamentals/13 Performance Optimization/02 Reducing Reflows and Repaints/reduce_reflows.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Reducing Reflows and Repaints */ 2 | 3 | /* Use transform and opacity for animations to avoid reflows */ 4 | .animated-box { 5 | width: 100px; 6 | height: 100px; 7 | background-color: lightgreen; 8 | margin: 20px; 9 | padding: 10px; 10 | text-align: center; 11 | transition: transform 0.3s ease, opacity 0.3s ease; /* Only animating transform and opacity */ 12 | } 13 | 14 | /* On hover, animate using transform instead of width/height */ 15 | .animated-box:hover { 16 | transform: scale(1.2); /* Scales the element without causing reflow */ 17 | opacity: 0.8; /* Changes opacity without causing reflow */ 18 | } -------------------------------------------------------------------------------- /CSS Fundamentals/02 Box Model/04 Outline vs Border/outline_vs_border.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Outline vs Border */ 2 | /* Border: Part of the box model, affects layout */ 3 | /* Outline: Drawn outside the border, does not affect layout */ 4 | 5 | .border-box { 6 | width: 200px; 7 | height: 100px; 8 | background-color: lightblue; 9 | border: 5px solid black; /* Affects layout, included in box dimensions */ 10 | margin: 20px; 11 | padding: 10px; 12 | } 13 | 14 | .outline-box { 15 | width: 200px; 16 | height: 100px; 17 | background-color: lightgreen; 18 | outline: 5px solid red; /* Does not affect layout, drawn outside */ 19 | margin: 20px; 20 | padding: 10px; 21 | } 22 | 23 | body { 24 | background-color: #f0f0f0; 25 | } -------------------------------------------------------------------------------- /CSS Fundamentals/11 Preprocessors/02 SCSS Syntax/scss_syntax.txt: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: SCSS Syntax */ 2 | 3 | // SCSS uses a CSS-like syntax with curly braces and semicolons 4 | // Variables in SCSS 5 | $card-bg: lightgreen; 6 | $border-color: #333; 7 | $spacing: 15px; 8 | 9 | // Nesting in SCSS 10 | .wrapper { 11 | padding: $spacing; 12 | background-color: #f9f9f9; 13 | 14 | .card { 15 | background-color: $card-bg; 16 | border: 1px solid $border-color; 17 | padding: $spacing; 18 | border-radius: 5px; 19 | 20 | h2 { 21 | margin: 0 0 $spacing 0; 22 | color: $border-color; 23 | } 24 | 25 | p { 26 | margin: 0; 27 | font-size: 14px; 28 | } 29 | } 30 | } -------------------------------------------------------------------------------- /CSS Fundamentals/04 Colors and Backgrounds/01 Color Values/color_values.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Color Values (hex, RGB, HSL) */ 2 | 3 | /* Hex: Uses hexadecimal notation (e.g., #RRGGBB) */ 4 | .hex { 5 | background-color: #ff6347; /* Tomato color in hex */ 6 | color: white; 7 | padding: 20px; 8 | margin: 10px; 9 | } 10 | 11 | /* RGB: Uses red, green, blue values (0-255) */ 12 | .rgb { 13 | background-color: rgb(147, 112, 219); /* Medium purple in RGB */ 14 | color: white; 15 | padding: 20px; 16 | margin: 10px; 17 | } 18 | 19 | /* HSL: Uses hue (0-360), saturation (0-100%), lightness (0-100%) */ 20 | .hsl { 21 | background-color: hsl(120, 60%, 50%); /* Green in HSL */ 22 | color: white; 23 | padding: 20px; 24 | margin: 10px; 25 | } -------------------------------------------------------------------------------- /CSS Fundamentals/09 Advanced Styling/02 Border-Radius/border_radius.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Border-Radius for Rounded Corners */ 2 | 3 | /* Rounded Corners: Applies border-radius to create rounded edges */ 4 | .rounded-box { 5 | width: 200px; 6 | height: 100px; 7 | background-color: lightgreen; 8 | margin: 20px; 9 | padding: 10px; 10 | text-align: center; 11 | border-radius: 15px; /* Uniform radius for all corners */ 12 | } 13 | 14 | /* Circle: Uses border-radius to create a circular shape */ 15 | .circle { 16 | width: 100px; 17 | height: 100px; 18 | background-color: lightcoral; 19 | margin: 20px; 20 | padding: 10px; 21 | text-align: center; 22 | border-radius: 50%; /* 50% radius creates a circle for square elements */ 23 | } -------------------------------------------------------------------------------- /CSS Fundamentals/13 Performance Optimization/03 Using CSS Sprites/css_sprites.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Using CSS Sprites */ 2 | 3 | /* Base styles for icons using a sprite image */ 4 | .icon { 5 | width: 50px; 6 | height: 50px; 7 | background-image: url('https://via.placeholder.com/150x50'); /* Placeholder sprite image */ 8 | background-repeat: no-repeat; 9 | margin: 10px; 10 | display: inline-block; 11 | } 12 | 13 | /* Adjust background-position to show different parts of the sprite */ 14 | .icon-1 { 15 | background-position: 0 0; /* First icon */ 16 | } 17 | 18 | .icon-2 { 19 | background-position: -50px 0; /* Second icon (shift 50px left) */ 20 | } 21 | 22 | .icon-3 { 23 | background-position: -100px 0; /* Third icon (shift 100px left) */ 24 | } -------------------------------------------------------------------------------- /CSS Fundamentals/05 Positioning and Display/03 Float and Clear/float_clear.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Float and Clear */ 2 | 3 | /* Float Left: Moves the element to the left, allowing content to wrap around */ 4 | .float-left { 5 | float: left; 6 | background-color: lightblue; 7 | padding: 10px; 8 | margin: 10px; 9 | width: 100px; 10 | } 11 | 12 | /* Float Right: Moves the element to the right, allowing content to wrap around */ 13 | .float-right { 14 | float: right; 15 | background-color: lightgreen; 16 | padding: 10px; 17 | margin: 10px; 18 | width: 100px; 19 | } 20 | 21 | /* Clear: Prevents floating elements from affecting this element */ 22 | .clear { 23 | clear: both; 24 | background-color: lightcoral; 25 | padding: 10px; 26 | margin: 10px; 27 | } -------------------------------------------------------------------------------- /CSS Fundamentals/10 CSS Variables/03 Dynamic Theming with Variables/dynamic_theming.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Dynamic Theming with Variables */ 2 | 3 | /* Declaring CSS variables with default values (light theme) */ 4 | :root { 5 | --primary-color: #f0f0f0; 6 | --text-color: #333; 7 | } 8 | 9 | /* Using CSS variables for theming */ 10 | .themed-box { 11 | background-color: var(--primary-color); 12 | width: 200px; 13 | height: 100px; 14 | margin: 20px; 15 | padding: 10px; 16 | text-align: center; 17 | } 18 | 19 | .themed-text { 20 | color: var(--text-color); 21 | font-size: 18px; 22 | margin: 20px; 23 | } 24 | 25 | /* Styling the button */ 26 | button { 27 | padding: 10px 20px; 28 | font-size: 16px; 29 | cursor: pointer; 30 | margin: 10px; 31 | } -------------------------------------------------------------------------------- /CSS Fundamentals/04 Colors and Backgrounds/02 Background Properties/background_properties.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Background Properties (color, image, position, repeat) */ 2 | 3 | /* Background Color: Sets a solid color for the background */ 4 | .bg-color { 5 | background-color: lightblue; 6 | padding: 20px; 7 | margin: 10px; 8 | height: 100px; 9 | } 10 | 11 | /* Background Image, Position, and Repeat */ 12 | .bg-image { 13 | background-image: url('https://via.placeholder.com/150'); 14 | background-position: center; /* Centers the image */ 15 | background-repeat: no-repeat; /* Prevents the image from repeating */ 16 | background-size: cover; /* Ensures the image covers the div */ 17 | padding: 20px; 18 | margin: 10px; 19 | height: 200px; 20 | color: white; 21 | } -------------------------------------------------------------------------------- /CSS Fundamentals/07 Layouts/01 Flexbox/flexbox.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Flexbox (display: flex, flex-direction, justify-content, align-items) */ 2 | 3 | /* Display: flex - Creates a flex container */ 4 | .flex-container { 5 | display: flex; 6 | /* Flex-Direction: Defines the main axis (row, column, etc.) */ 7 | flex-direction: row; 8 | /* Justify-Content: Aligns items along the main axis */ 9 | justify-content: space-between; 10 | /* Align-Items: Aligns items along the cross axis */ 11 | align-items: center; 12 | background-color: lightgray; 13 | padding: 10px; 14 | height: 200px; 15 | } 16 | 17 | /* Styling for flex items */ 18 | .flex-item { 19 | background-color: lightblue; 20 | padding: 20px; 21 | border: 1px solid black; 22 | text-align: center; 23 | } -------------------------------------------------------------------------------- /CSS Fundamentals/06 Typography/04 Line-Height and Vertical-Align/line_height_vertical_align.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Line-Height and Vertical-Align */ 2 | 3 | /* Line-Height: Controls the height of a line of text */ 4 | .line-height { 5 | line-height: 2; /* Double the default line height */ 6 | background-color: lightblue; 7 | padding: 10px; 8 | } 9 | 10 | /* Vertical-Align: Aligns inline or inline-block elements vertically */ 11 | .vertical-align-container { 12 | padding: 10px; 13 | background-color: lightgreen; 14 | line-height: 50px; /* For context */ 15 | } 16 | 17 | .vertical-align { 18 | vertical-align: middle; /* Aligns the text with the middle of the image */ 19 | font-size: 20px; 20 | } 21 | 22 | img { 23 | vertical-align: middle; /* Aligns the image with the text */ 24 | } -------------------------------------------------------------------------------- /CSS Fundamentals/07 Layouts/03 Media Queries for Responsive Design/media_queries.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Media Queries for Responsive Design */ 2 | 3 | /* Default styles */ 4 | .responsive-box { 5 | background-color: lightblue; 6 | padding: 20px; 7 | margin: 10px; 8 | text-align: center; 9 | font-size: 16px; 10 | } 11 | 12 | /* Media Query: Adjust styles for screens smaller than 600px */ 13 | @media (max-width: 600px) { 14 | .responsive-box { 15 | background-color: lightcoral; 16 | font-size: 14px; 17 | padding: 10px; 18 | } 19 | } 20 | 21 | /* Media Query: Adjust styles for screens larger than 1200px */ 22 | @media (min-width: 1200px) { 23 | .responsive-box { 24 | background-color: lightgreen; 25 | font-size: 20px; 26 | padding: 30px; 27 | } 28 | } -------------------------------------------------------------------------------- /CSS Fundamentals/09 Advanced Styling/03 CSS Filters/filters.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: CSS Filters (blur, brightness, contrast) */ 2 | 3 | /* Base styles for all divs */ 4 | div { 5 | width: 200px; 6 | height: 100px; 7 | background-color: lightblue; 8 | margin: 20px; 9 | padding: 10px; 10 | text-align: center; 11 | } 12 | 13 | /* Blur: Applies a blur effect */ 14 | .blur { 15 | filter: blur(5px); 16 | } 17 | 18 | /* Brightness: Adjusts the brightness (1 = normal, >1 brighter, <1 darker) */ 19 | .brightness { 20 | filter: brightness(1.5); /* 150% brightness */ 21 | background-color: lightgreen; 22 | } 23 | 24 | /* Contrast: Adjusts the contrast (1 = normal, >1 more contrast, <1 less contrast) */ 25 | .contrast { 26 | filter: contrast(2); /* 200% contrast */ 27 | background-color: lightcoral; 28 | } -------------------------------------------------------------------------------- /CSS Fundamentals/14 Accessibility in Styling/03 Avoiding Pure CSS Hacks/avoid_css_hacks.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Avoiding Pure CSS Hacks for Accessibility */ 2 | 3 | /* Style the button without hiding it in an inaccessible way */ 4 | .btn { 5 | background-color: lightblue; 6 | padding: 10px 20px; 7 | margin: 10px; 8 | border: none; 9 | cursor: pointer; 10 | } 11 | 12 | /* Instead of using display: none (which hides content from screen readers), use visibility or positioning */ 13 | .content { 14 | font-size: 16px; 15 | margin: 10px; 16 | /* Example: If you need to hide visually but keep accessible, use this approach */ 17 | /* visibility: hidden; would still allow screen readers to access it */ 18 | } 19 | 20 | /* Ensure focusable elements remain accessible */ 21 | .btn:focus { 22 | outline: 2px solid #0066cc; 23 | } -------------------------------------------------------------------------------- /CSS Fundamentals/08 Animations and Transitions/02 Keyframe Animations/keyframes.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Keyframe Animations (@keyframes, animation properties) */ 2 | 3 | /* Define the keyframes for the animation */ 4 | @keyframes colorChange { 5 | 0% { background-color: lightblue; } 6 | 50% { background-color: lightgreen; } 7 | 100% { background-color: lightcoral; } 8 | } 9 | 10 | /* Apply the animation to the box */ 11 | .animation-box { 12 | width: 150px; 13 | height: 100px; 14 | margin: 20px; 15 | padding: 10px; 16 | text-align: center; 17 | /* Animation Properties */ 18 | animation-name: colorChange; /* Name of the keyframes */ 19 | animation-duration: 3s; /* Duration of one cycle */ 20 | animation-iteration-count: infinite; /* Repeats forever */ 21 | animation-timing-function: ease-in-out; /* Speed curve */ 22 | } -------------------------------------------------------------------------------- /CSS Fundamentals/02 Box Model/02 Box-Sizing/box_sizing.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Box-Sizing (content-box vs. border-box) */ 2 | /* box-sizing determines how width and height are calculated */ 3 | 4 | /* content-box: Width/height only includes the content (default) */ 5 | .content-box { 6 | box-sizing: content-box; 7 | width: 200px; 8 | height: 100px; 9 | padding: 20px; 10 | border: 5px solid black; 11 | background-color: lightblue; 12 | margin-bottom: 20px; 13 | } 14 | 15 | /* border-box: Width/height includes content, padding, and border */ 16 | .border-box { 17 | box-sizing: border-box; 18 | width: 200px; 19 | height: 100px; 20 | padding: 20px; 21 | border: 5px solid black; 22 | background-color: lightgreen; 23 | } 24 | 25 | /* Adding a subtle background to the body */ 26 | body { 27 | background-color: #f0f0f0; 28 | } -------------------------------------------------------------------------------- /CSS Fundamentals/02 Box Model/01 Content Padding Border Margin/box_model_basics.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Content, Padding, Border, Margin */ 2 | /* The box model defines how elements are sized and spaced */ 3 | 4 | .box { 5 | /* Content: The inner area (text in this case) */ 6 | width: 200px; 7 | height: 100px; 8 | background-color: lightblue; /* Visualizes the content area */ 9 | 10 | /* Padding: Space between content and border */ 11 | padding: 20px; 12 | background-clip: content-box; /* Ensures background color doesn't extend into padding */ 13 | 14 | /* Border: Surrounds the padding */ 15 | border: 5px solid black; 16 | 17 | /* Margin: Space outside the border */ 18 | margin: 30px; 19 | } 20 | 21 | /* Adding a subtle background to the body to make margin visible */ 22 | body { 23 | background-color: #f0f0f0; 24 | } -------------------------------------------------------------------------------- /CSS Fundamentals/05 Positioning and Display/04 Z-Index for Layering/z_index.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Z-Index for Layering */ 2 | 3 | /* Layer 1: Lowest z-index, appears at the bottom */ 4 | .layer1 { 5 | position: absolute; 6 | top: 50px; 7 | left: 50px; 8 | width: 200px; 9 | height: 100px; 10 | background-color: lightblue; 11 | z-index: 1; 12 | } 13 | 14 | /* Layer 2: Middle z-index, appears in the middle */ 15 | .layer2 { 16 | position: absolute; 17 | top: 80px; 18 | left: 80px; 19 | width: 200px; 20 | height: 100px; 21 | background-color: lightgreen; 22 | z-index: 2; 23 | } 24 | 25 | /* Layer 3: Highest z-index, appears on top */ 26 | .layer3 { 27 | position: absolute; 28 | top: 110px; 29 | left: 110px; 30 | width: 200px; 31 | height: 100px; 32 | background-color: lightcoral; 33 | z-index: 3; 34 | } -------------------------------------------------------------------------------- /CSS Fundamentals/05 Positioning and Display/02 Display/display.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Display (block, inline, inline-block, none) */ 2 | 3 | /* Block: Takes full width, starts on a new line */ 4 | .block { 5 | display: block; 6 | background-color: lightblue; 7 | padding: 10px; 8 | margin: 10px; 9 | } 10 | 11 | /* Inline: Stays on the same line, width/height not applicable */ 12 | .inline { 13 | display: inline; 14 | background-color: lightgreen; 15 | padding: 5px; 16 | margin: 5px; 17 | } 18 | 19 | /* Inline-Block: Stays on the same line, but allows width/height */ 20 | .inline-block { 21 | display: inline-block; 22 | background-color: lightcoral; 23 | padding: 10px; 24 | margin: 5px; 25 | width: 100px; 26 | height: 50px; 27 | } 28 | 29 | /* None: Removes the element from the layout */ 30 | .none { 31 | display: none; 32 | } -------------------------------------------------------------------------------- /CSS Fundamentals/08 Animations and Transitions/01 Transitions/transitions.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Transitions (property, duration, timing-function, delay) */ 2 | 3 | /* Default styles for the box */ 4 | .transition-box { 5 | width: 100px; 6 | height: 100px; 7 | background-color: lightblue; 8 | margin: 20px; 9 | padding: 10px; 10 | text-align: center; 11 | /* Transition: Defines the properties to animate */ 12 | transition-property: background-color, width; 13 | transition-duration: 1s; /* Duration: How long the transition takes */ 14 | transition-timing-function: ease-in-out; /* Timing Function: Controls the speed curve */ 15 | transition-delay: 0.2s; /* Delay: Waits before starting the transition */ 16 | } 17 | 18 | /* Styles to apply on hover */ 19 | .transition-box:hover { 20 | background-color: lightcoral; 21 | width: 200px; 22 | } -------------------------------------------------------------------------------- /CSS Fundamentals/11 Preprocessors/01 Introduction to SASS/sass_intro.txt: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Introduction to SASS (variables, nesting, mixins) */ 2 | 3 | // Variables: Define reusable values 4 | $primary-color: lightblue; 5 | $padding-size: 20px; 6 | 7 | // Mixin: Define reusable styles 8 | @mixin button-style { 9 | padding: 10px 20px; 10 | border: none; 11 | border-radius: 5px; 12 | cursor: pointer; 13 | background-color: $primary-color; 14 | &:hover { 15 | background-color: darken($primary-color, 10%); 16 | } 17 | } 18 | 19 | // Nesting: Organize styles hierarchically 20 | .container { 21 | background-color: #f0f0f0; 22 | padding: $padding-size; 23 | 24 | .box { 25 | background-color: $primary-color; 26 | padding: $padding-size; 27 | text-align: center; 28 | } 29 | 30 | .btn { 31 | @include button-style; 32 | } 33 | } -------------------------------------------------------------------------------- /CSS Fundamentals/14 Accessibility in Styling/01 Focus Styles/focus_styles.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Focus Styles for Keyboard Navigation */ 2 | 3 | /* Default styles for focusable elements */ 4 | .link, .btn { 5 | padding: 10px 20px; 6 | margin: 10px; 7 | display: inline-block; 8 | text-decoration: none; 9 | color: #333; 10 | background-color: lightblue; 11 | border: 2px solid transparent; 12 | } 13 | 14 | /* Custom focus styles using :focus-visible for better accessibility */ 15 | .link:focus-visible, .btn:focus-visible { 16 | outline: none; /* Remove default outline */ 17 | border: 2px solid #0066cc; /* Visible border for focus */ 18 | background-color: #e6f0ff; /* Subtle background change */ 19 | box-shadow: 0 0 5px rgba(0, 102, 204, 0.5); /* Add a glow effect */ 20 | } 21 | 22 | /* Avoid using :focus alone to prevent styling non-keyboard interactions (e.g., mouse clicks) */ -------------------------------------------------------------------------------- /CSS Fundamentals/01 CSS Basics/04 Units/css_units.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: CSS Units */ 2 | 3 | /* Set root font-size for rem calculations */ 4 | html { 5 | font-size: 16px; 6 | } 7 | 8 | /* px: Fixed pixel size */ 9 | h1 { 10 | font-size: 24px; 11 | } 12 | 13 | /* %: Relative to parent element */ 14 | .percent { 15 | width: 50%; 16 | background-color: lightblue; 17 | } 18 | 19 | /* vw: Viewport width (5vw = 5% of viewport width) */ 20 | .vw { 21 | font-size: 5vw; 22 | } 23 | 24 | /* vh: Viewport height (20vh = 20% of viewport height) */ 25 | .vh { 26 | height: 20vh; 27 | background-color: lightgreen; 28 | } 29 | 30 | /* rem: Relative to root font-size (2rem = 2x 16px = 32px) */ 31 | .rem { 32 | font-size: 2rem; 33 | } 34 | 35 | /* em: Relative to parent font-size */ 36 | .em-parent { 37 | font-size: 20px; 38 | } 39 | .em { 40 | font-size: 1.5em; /* 1.5x parent font-size (1.5x 20px = 30px) */ 41 | } -------------------------------------------------------------------------------- /CSS Fundamentals/12 Responsive Design/03 Responsive Typography/responsive_typography.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Responsive Typography (rem, vw) */ 2 | 3 | /* Set a base font size for rem units */ 4 | html { 5 | font-size: 16px; 6 | } 7 | 8 | /* rem: Scales relative to the root font size */ 9 | .rem-text { 10 | font-size: 1.5rem; /* 1.5 * root font size (16px) = 24px by default */ 11 | margin: 20px; 12 | color: darkblue; 13 | } 14 | 15 | /* vw: Scales relative to 1% of the viewport width */ 16 | .vw-text { 17 | font-size: 5vw; /* 5% of viewport width */ 18 | margin: 20px; 19 | color: darkgreen; 20 | } 21 | 22 | /* Adjust root font size for different screen sizes */ 23 | @media (max-width: 600px) { 24 | html { 25 | font-size: 14px; /* Adjust base font size for smaller screens */ 26 | } 27 | } 28 | 29 | @media (min-width: 1200px) { 30 | html { 31 | font-size: 18px; /* Adjust base font size for larger screens */ 32 | } 33 | } -------------------------------------------------------------------------------- /CSS Fundamentals/16 Browser Compatibility/04 Debugging with DevTools/debugging_devtools.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Debugging with Browser DevTools */ 2 | 3 | /* Box with intentional issues for debugging */ 4 | .box { 5 | width: 200px; 6 | height: 100px; 7 | background-color: lightcoral; 8 | margin: 20px; 9 | padding: 10px; 10 | text-align: center; 11 | 12 | /* Intentional Issue 1: Negative margin causing overlap with the heading */ 13 | margin-top: -40px; 14 | 15 | /* Intentional Issue 2: Line-height too small, causing text to overlap */ 16 | line-height: 0.5; 17 | } 18 | 19 | /* Instructions for Debugging: 20 | 1. Open Browser DevTools (F12 or Right-Click > Inspect). 21 | 2. Select the .box element in the Elements tab. 22 | 3. Check the computed styles for margin-top and line-height. 23 | 4. Adjust margin-top to a positive value (e.g., 20px) to fix the overlap with the heading. 24 | 5. Increase line-height (e.g., to 1.5) to make the text readable. 25 | */ -------------------------------------------------------------------------------- /CSS Fundamentals/12 Responsive Design/01 Mobile-First Design/mobile_first.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Mobile-First Design */ 2 | 3 | /* Base styles (for mobile screens) */ 4 | body { 5 | font-size: 16px; 6 | margin: 0; 7 | padding: 10px; 8 | } 9 | 10 | .container { 11 | display: flex; 12 | flex-direction: column; 13 | gap: 10px; 14 | } 15 | 16 | .box { 17 | background-color: lightblue; 18 | padding: 15px; 19 | text-align: center; 20 | } 21 | 22 | /* Media Query for larger screens (min-width for mobile-first approach) */ 23 | @media (min-width: 768px) { 24 | .container { 25 | flex-direction: row; 26 | justify-content: space-between; 27 | } 28 | 29 | .box { 30 | flex: 1; 31 | margin: 0 5px; 32 | } 33 | } 34 | 35 | /* Additional adjustments for even larger screens */ 36 | @media (min-width: 1200px) { 37 | body { 38 | font-size: 18px; 39 | } 40 | 41 | .container { 42 | max-width: 1200px; 43 | margin: 0 auto; 44 | } 45 | } -------------------------------------------------------------------------------- /CSS Fundamentals/07 Layouts/04 Viewport Units/viewport_units.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Viewport Units (vw, vh, vmin, vmax) */ 2 | 3 | /* vw: 1vw = 1% of viewport width */ 4 | .vw-box { 5 | width: 50vw; 6 | background-color: lightblue; 7 | padding: 10px; 8 | margin: 10px; 9 | text-align: center; 10 | } 11 | 12 | /* vh: 1vh = 1% of viewport height */ 13 | .vh-box { 14 | height: 30vh; 15 | background-color: lightgreen; 16 | padding: 10px; 17 | margin: 10px; 18 | text-align: center; 19 | } 20 | 21 | /* vmin: 1vmin = 1% of the smaller viewport dimension (width or height) */ 22 | .vmin-box { 23 | width: 20vmin; 24 | height: 20vmin; 25 | background-color: lightcoral; 26 | padding: 10px; 27 | margin: 10px; 28 | text-align: center; 29 | } 30 | 31 | /* vmax: 1vmax = 1% of the larger viewport dimension (width or height) */ 32 | .vmax-box { 33 | font-size: 5vmax; 34 | background-color: lightgoldenrodyellow; 35 | padding: 10px; 36 | margin: 10px; 37 | text-align: center; 38 | } -------------------------------------------------------------------------------- /CSS Fundamentals/12 Responsive Design/04 Fluid Layouts/fluid_layouts.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Fluid Layouts with Percentages */ 2 | 3 | /* Fluid container using percentage width */ 4 | .fluid-container { 5 | width: 100%; /* Takes the full width of the parent */ 6 | max-width: 1200px; /* Limits the maximum width */ 7 | margin: 0 auto; 8 | display: flex; 9 | flex-wrap: wrap; 10 | gap: 2%; 11 | padding: 10px; 12 | } 13 | 14 | /* Fluid items using percentage widths */ 15 | .fluid-item { 16 | width: 96%; /* Takes nearly full width on small screens */ 17 | background-color: lightcoral; 18 | padding: 20px; 19 | text-align: center; 20 | box-sizing: border-box; 21 | } 22 | 23 | /* Adjust item widths for larger screens */ 24 | @media (min-width: 600px) { 25 | .fluid-item { 26 | width: 48%; /* Two items per row on medium screens */ 27 | } 28 | } 29 | 30 | @media (min-width: 1024px) { 31 | .fluid-item { 32 | width: 31.33%; /* Three items per row on large screens */ 33 | } 34 | } -------------------------------------------------------------------------------- /CSS Fundamentals/14 Accessibility in Styling/02 High-Contrast Mode Support/high_contrast.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: High-Contrast Mode Support */ 2 | 3 | /* Use transparent backgrounds and borders to adapt to high-contrast mode */ 4 | .btn { 5 | background-color: transparent; 6 | border: 2px solid currentColor; /* Uses the text color in high-contrast mode */ 7 | padding: 10px 20px; 8 | margin: 10px; 9 | color: #333; 10 | } 11 | 12 | /* Ensure text remains visible by using sufficient contrast and system colors */ 13 | .text { 14 | color: #333; 15 | font-size: 18px; 16 | margin: 10px; 17 | } 18 | 19 | /* Use media query to detect high-contrast mode and adjust styles if needed */ 20 | @media (forced-colors: active) { 21 | .btn { 22 | forced-color-adjust: none; /* Allow manual color adjustments */ 23 | border-color: ButtonBorder; /* System color for borders */ 24 | color: ButtonText; /* System color for text */ 25 | } 26 | .text { 27 | color: CanvasText; /* System color for text */ 28 | } 29 | } -------------------------------------------------------------------------------- /CSS Fundamentals/12 Responsive Design/02 Breakpoints with Media Queries/breakpoints.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Breakpoints with Media Queries */ 2 | 3 | /* Base styles (mobile) */ 4 | .grid { 5 | display: grid; 6 | grid-template-columns: 1fr; 7 | gap: 10px; 8 | padding: 10px; 9 | } 10 | 11 | .item { 12 | background-color: lightgreen; 13 | padding: 20px; 14 | text-align: center; 15 | } 16 | 17 | /* Breakpoint for tablets (min-width: 600px) */ 18 | @media (min-width: 600px) { 19 | .grid { 20 | grid-template-columns: repeat(2, 1fr); 21 | } 22 | } 23 | 24 | /* Breakpoint for desktops (min-width: 1024px) */ 25 | @media (min-width: 1024px) { 26 | .grid { 27 | grid-template-columns: repeat(4, 1fr); 28 | max-width: 1200px; 29 | margin: 0 auto; 30 | } 31 | 32 | .item { 33 | padding: 30px; 34 | } 35 | } 36 | 37 | /* Breakpoint for smaller screens (max-width: 400px) */ 38 | @media (max-width: 400px) { 39 | .item { 40 | padding: 10px; 41 | font-size: 14px; 42 | } 43 | } -------------------------------------------------------------------------------- /CSS Fundamentals/15 CSS Frameworks/03 Customizing Frameworks/customize_framework.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Customizing Frameworks with CSS */ 2 | 3 | /* Customize Bootstrap heading */ 4 | .custom-heading { 5 | color: #0066cc; /* Change heading color */ 6 | font-weight: 700; /* Make it bolder */ 7 | } 8 | 9 | /* Customize Bootstrap card */ 10 | .custom-card { 11 | background-color: #f0f8ff; /* Light blue background */ 12 | border: 2px solid #0066cc; /* Custom border */ 13 | border-radius: 10px; /* Rounded corners */ 14 | transition: transform 0.3s ease; /* Add animation */ 15 | } 16 | 17 | .custom-card:hover { 18 | transform: translateY(-5px); /* Lift on hover */ 19 | box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Add shadow */ 20 | } 21 | 22 | /* Customize Bootstrap button */ 23 | .custom-btn { 24 | background-color: #ff6347; /* Tomato color */ 25 | border-color: #ff6347; 26 | padding: 12px 24px; /* Larger padding */ 27 | } 28 | 29 | .custom-btn:hover { 30 | background-color: #e5533d; /* Darker shade on hover */ 31 | border-color: #e5533d; 32 | } -------------------------------------------------------------------------------- /CSS Fundamentals/16 Browser Compatibility/01 Vendor Prefixes/vendor_prefixes.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Vendor Prefixes (-webkit-, -moz-) */ 2 | 3 | /* Box with a gradient background and transition */ 4 | .box { 5 | width: 200px; 6 | height: 100px; 7 | margin: 20px; 8 | padding: 10px; 9 | text-align: center; 10 | 11 | /* Gradient with vendor prefixes for older browsers */ 12 | background: -webkit-linear-gradient(left, lightblue, lightgreen); /* Older Webkit browsers */ 13 | background: -moz-linear-gradient(left, lightblue, lightgreen); /* Older Firefox */ 14 | background: linear-gradient(to right, lightblue, lightgreen); /* Standard syntax */ 15 | 16 | /* Transition with vendor prefixes */ 17 | -webkit-transition: transform 0.3s ease; /* Older Webkit browsers */ 18 | -moz-transition: transform 0.3s ease; /* Older Firefox */ 19 | transition: transform 0.3s ease; /* Standard syntax */ 20 | } 21 | 22 | .box:hover { 23 | -webkit-transform: scale(1.1); /* Older Webkit browsers */ 24 | -moz-transform: scale(1.1); /* Older Firefox */ 25 | transform: scale(1.1); /* Standard syntax */ 26 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 rohanmistry231 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /CSS Fundamentals/08 Animations and Transitions/03 Transform/transforms.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Transform (translate, rotate, scale, skew) and 2D/3D Transforms */ 2 | 3 | /* Base styles for all boxes */ 4 | div { 5 | width: 100px; 6 | height: 100px; 7 | background-color: lightblue; 8 | margin: 20px; 9 | padding: 10px; 10 | text-align: center; 11 | transition: transform 0.5s ease-in-out; /* Smooth transition for transforms */ 12 | } 13 | 14 | /* Translate: Moves the element */ 15 | .translate:hover { 16 | transform: translate(50px, 20px); /* Moves 50px right, 20px down */ 17 | } 18 | 19 | /* Rotate: Rotates the element */ 20 | .rotate:hover { 21 | transform: rotate(45deg); /* Rotates 45 degrees clockwise */ 22 | } 23 | 24 | /* Scale: Changes the size */ 25 | .scale:hover { 26 | transform: scale(1.5); /* Scales to 1.5x size */ 27 | } 28 | 29 | /* Skew: Distorts the element */ 30 | .skew:hover { 31 | transform: skew(20deg, 10deg); /* Skews 20deg on X-axis, 10deg on Y-axis */ 32 | } 33 | 34 | /* 3D Transform: Rotates in 3D space */ 35 | .transform-3d { 36 | background-color: lightcoral; 37 | perspective: 500px; /* Adds 3D perspective */ 38 | } 39 | 40 | .transform-3d:hover { 41 | transform: rotateX(45deg) rotateY(45deg); /* 3D rotation on X and Y axes */ 42 | } -------------------------------------------------------------------------------- /CSS Fundamentals/05 Positioning and Display/01 Position/position.css: -------------------------------------------------------------------------------- 1 | /* Main Learning Points: Position (static, relative, absolute, fixed, sticky) */ 2 | 3 | /* Static: Default positioning, follows normal document flow */ 4 | .static { 5 | position: static; 6 | background-color: lightblue; 7 | padding: 10px; 8 | margin: 10px; 9 | } 10 | 11 | /* Relative: Positioned relative to its normal position */ 12 | .relative { 13 | position: relative; 14 | top: 20px; 15 | left: 20px; 16 | background-color: lightgreen; 17 | padding: 10px; 18 | margin: 10px; 19 | } 20 | 21 | /* Absolute: Positioned relative to the nearest positioned ancestor */ 22 | .absolute { 23 | position: absolute; 24 | top: 0; 25 | right: 0; 26 | background-color: lightcoral; 27 | padding: 5px; 28 | } 29 | 30 | /* Fixed: Positioned relative to the viewport, stays in place on scroll */ 31 | .fixed { 32 | position: fixed; 33 | bottom: 20px; 34 | right: 20px; 35 | background-color: lightgoldenrodyellow; 36 | padding: 10px; 37 | } 38 | 39 | /* Sticky: Sticks to the top of its container while scrolling */ 40 | .sticky-container { 41 | height: 500px; 42 | overflow: auto; 43 | } 44 | .sticky { 45 | position: sticky; 46 | top: 0; 47 | background-color: lightpink; 48 | padding: 10px; 49 | border: 1px solid black; 50 | } -------------------------------------------------------------------------------- /CSS Fundamentals/01 CSS Basics/03 CSS Comments/css_comments.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | CSS Comments Example 46 | 47 | 48 | 49 |

CSS Comments Example

50 |

This paragraph is styled with commented CSS.

51 |

Check the css_comments.css file to see how comments are used to annotate the styles.

52 | 53 | -------------------------------------------------------------------------------- /CSS Fundamentals/08 Animations and Transitions/02 Keyframe Animations/keyframes.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | Keyframes Example 46 | 47 | 48 | 49 |

Keyframes Example

50 |
51 | I’m animated with keyframes! 52 |
53 |

The box above uses @keyframes and animation properties to create a repeating animation.

54 | 55 | -------------------------------------------------------------------------------- /CSS Fundamentals/02 Box Model/01 Content Padding Border Margin/box_model_basics.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | Box Model Basics Example 46 | 47 | 48 | 49 |

Box Model Basics Example

50 |
51 | This is the content area. 52 |
53 |

The div above demonstrates the box model components: content, padding, border, and margin.

54 | 55 | -------------------------------------------------------------------------------- /CSS Fundamentals/14 Accessibility in Styling/01 Focus Styles/focus_styles.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | Focus Styles Example 46 | 47 | 48 | 49 |

Focus Styles Example

50 | Focusable Link 51 | 52 |

Use the Tab key to navigate and see the custom focus styles for keyboard navigation.

53 | 54 | -------------------------------------------------------------------------------- /CSS Fundamentals/02 Box Model/02 Box-Sizing/box_sizing.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | Box-Sizing Example 46 | 47 | 48 | 49 |

Box-Sizing Example

50 |
51 | Content-Box (default) 52 |
53 |
54 | Border-Box 55 |
56 |

The divs above compare box-sizing: content-box (default) vs. border-box.

57 | 58 | -------------------------------------------------------------------------------- /CSS Fundamentals/07 Layouts/03 Media Queries for Responsive Design/media_queries.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | Media Queries Example 46 | 47 | 48 | 49 |

Media Queries Example

50 |
51 | This box changes style based on screen size. 52 |
53 |

Resize the browser window to see the responsive design in action using media queries.

54 | 55 | -------------------------------------------------------------------------------- /CSS Fundamentals/04 Colors and Backgrounds/03 Gradients/gradients.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | Gradients Example 46 | 47 | 48 | 49 |

Gradients Example

50 |
This div has a linear gradient background.
51 |
This div has a radial gradient background.
52 |

The divs above demonstrate linear and radial gradients.

53 | 54 | -------------------------------------------------------------------------------- /CSS Fundamentals/16 Browser Compatibility/01 Vendor Prefixes/vendor_prefixes.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | Vendor Prefixes Example 46 | 47 | 48 | 49 |

Vendor Prefixes Example

50 |
51 | This box uses a transition and gradient with vendor prefixes. 52 |
53 |

The styles include vendor prefixes (-webkit-, -moz-) for broader browser compatibility.

54 | 55 | -------------------------------------------------------------------------------- /CSS Fundamentals/02 Box Model/03 Margin Collapse/margin_collapse.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | Margin Collapse Example 46 | 47 | 48 | 49 |

Margin Collapse Example

50 |
51 | Box 1 52 |
53 |
54 | Box 2 55 |
56 |

The divs above demonstrate margin collapse: their vertical margins combine into a single margin.

57 | 58 | -------------------------------------------------------------------------------- /CSS Fundamentals/10 CSS Variables/01 Declaring Variables/declaring_variables.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | Declaring Variables Example 46 | 47 | 48 | 49 |

Declaring Variables Example

50 |
51 | This box uses a declared CSS variable for its background color. 52 |
53 |

The CSS file demonstrates how to declare CSS variables using --variable-name syntax.

54 | 55 | -------------------------------------------------------------------------------- /CSS Fundamentals/03 Selectors/04 Pseudo-Elements/pseudo_elements.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | Pseudo-Elements Example 46 | 47 | 48 | 49 |

Pseudo-Elements Example

50 |

This paragraph has a ::before pseudo-element.

51 |

This paragraph has an ::after pseudo-element.

52 |

The pseudo-elements add content before and after the paragraphs.

53 | 54 | -------------------------------------------------------------------------------- /CSS Fundamentals/08 Animations and Transitions/01 Transitions/transitions.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | Transitions Example 46 | 47 | 48 | 49 |

Transitions Example

50 |
51 | Hover over me to see the transition! 52 |
53 |

The box above uses transitions to smoothly change styles on hover, with specific properties, duration, timing-function, and delay.

54 | 55 | -------------------------------------------------------------------------------- /CSS Fundamentals/01 CSS Basics/01 Syntax and Structure/syntax_structure.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | CSS Syntax and Structure Example 46 | 47 | 48 | 49 |

CSS Syntax and Structure Example

50 |

This paragraph uses a class selector.

51 |

This paragraph uses an ID selector.

52 |

The CSS file demonstrates selectors (element, class, ID), properties, and values.

53 | 54 | -------------------------------------------------------------------------------- /CSS Fundamentals/05 Positioning and Display/04 Z-Index for Layering/z_index.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | Z-Index Example 46 | 47 | 48 | 49 |

Z-Index Example

50 |
Layer 1 (z-index: 1)
51 |
Layer 2 (z-index: 2)
52 |
Layer 3 (z-index: 3)
53 |

The divs above overlap with different z-index values to control their stacking order.

54 | 55 | -------------------------------------------------------------------------------- /CSS Fundamentals/12 Responsive Design/03 Responsive Typography/responsive_typography.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | Responsive Typography Example 46 | 47 | 48 | 49 |

Responsive Typography Example

50 |

This text scales with rem units.

51 |

This text scales with vw units.

52 |

Resize the browser to see how the typography adjusts using rem and vw units.

53 | 54 | -------------------------------------------------------------------------------- /CSS Fundamentals/16 Browser Compatibility/02 Feature Detection/feature_detection.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | Feature Detection Example 46 | 47 | 48 | 49 |

Feature Detection Example

50 |
51 | This box uses grid layout if supported, with a fallback for older browsers. 52 |
53 |

The styles use @supports to detect browser support for CSS Grid and provide a fallback.

54 | 55 | -------------------------------------------------------------------------------- /CSS Fundamentals/13 Performance Optimization/02 Reducing Reflows and Repaints/reduce_reflows.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | Reducing Reflows and Repaints Example 46 | 47 | 48 | 49 |

Reducing Reflows and Repaints Example

50 |
51 | Hover over me to see an optimized animation. 52 |
53 |

The animation uses transform instead of width/height to reduce reflows and repaints.

54 | 55 | -------------------------------------------------------------------------------- /CSS Fundamentals/16 Browser Compatibility/04 Debugging with DevTools/debugging_devtools.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | Debugging with Browser DevTools Example 46 | 47 | 48 | 49 |

Debugging with Browser DevTools Example

50 |
51 | This box has overlapping text and unexpected spacing. 52 |
53 |

Use Browser DevTools to debug the CSS issues (e.g., check margins, line-height).

54 | 55 | -------------------------------------------------------------------------------- /CSS Fundamentals/09 Advanced Styling/03 CSS Filters/filters.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | CSS Filters Example 46 | 47 | 48 | 49 |

CSS Filters Example

50 |
This div has a blur filter.
51 |
This div has a brightness filter.
52 |
This div has a contrast filter.
53 |

The divs above demonstrate CSS filters: blur, brightness, and contrast.

54 | 55 | -------------------------------------------------------------------------------- /CSS Fundamentals/03 Selectors/01 Element Class and ID Selectors/element_class_id_selectors.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | Element, Class, and ID Selectors Example 46 | 47 | 48 | 49 |

Element, Class, and ID Selectors Example

50 |

This paragraph uses a class selector.

51 |

This paragraph uses an ID selector.

52 |

This paragraph is styled with an element selector.

53 | 54 | -------------------------------------------------------------------------------- /CSS Fundamentals/05 Positioning and Display/03 Float and Clear/float_clear.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | Float and Clear Example 46 | 47 | 48 | 49 |

Float and Clear Example

50 |
Float Left
51 |
Float Right
52 |
This div clears the floats above.
53 |

The divs above demonstrate float (left and right) and clear to control layout flow.

54 | 55 | -------------------------------------------------------------------------------- /CSS Fundamentals/14 Accessibility in Styling/03 Avoiding Pure CSS Hacks/avoid_css_hacks.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | Avoiding CSS Hacks Example 46 | 47 | 48 | 49 |

Avoiding CSS Hacks Example

50 | 51 |

This content is not hidden with CSS hacks.

52 |

The styles avoid CSS hacks (e.g., display: none for accessibility) and use proper semantic methods.

53 | 54 | -------------------------------------------------------------------------------- /CSS Fundamentals/14 Accessibility in Styling/04 Readable Font Sizes and Colors/readable_fonts.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | Readable Font Sizes and Colors Example 46 | 47 | 48 | 49 |

Readable Font Sizes and Colors Example

50 |

This text uses a readable font size and high-contrast colors.

51 |

The styles ensure text is legible with accessible font sizes (at least 16px) and sufficient color contrast.

52 | 53 | -------------------------------------------------------------------------------- /CSS Fundamentals/09 Advanced Styling/04 Clip-Path/clip_path.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | Clip-Path Example 46 | 47 | 48 | 49 |

Clip-Path Example

50 |
51 | This div is clipped into a triangle. 52 |
53 |
54 | This div is clipped into a circle. 55 |
56 |

The divs above demonstrate clip-path for creating custom shapes like triangles and circles.

57 | 58 | -------------------------------------------------------------------------------- /CSS Fundamentals/13 Performance Optimization/03 Using CSS Sprites/css_sprites.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | Using CSS Sprites Example 46 | 47 | 48 | 49 |

Using CSS Sprites Example

50 |
51 |
52 |
53 |

The icons above use CSS sprites to reduce HTTP requests. (Note: Placeholder image URL used since hosting images is not possible.)

54 | 55 | -------------------------------------------------------------------------------- /CSS Fundamentals/02 Box Model/04 Outline vs Border/outline_vs_border.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | Outline vs Border Example 46 | 47 | 48 | 49 |

Outline vs Border Example

50 |
51 | This div uses a border. 52 |
53 |
54 | This div uses an outline. 55 |
56 |

The divs above compare border (affects layout) vs. outline (does not affect layout).

57 | 58 | -------------------------------------------------------------------------------- /CSS Fundamentals/04 Colors and Backgrounds/01 Color Values/color_values.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | Color Values Example 46 | 47 | 48 | 49 |

Color Values Example

50 |
This div uses a hex color value.
51 |
This div uses an RGB color value.
52 |
This div uses an HSL color value.
53 |

The divs above demonstrate different color value formats: hex, RGB, and HSL.

54 | 55 | -------------------------------------------------------------------------------- /CSS Fundamentals/07 Layouts/01 Flexbox/flexbox.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | Flexbox Example 46 | 47 | 48 | 49 |

Flexbox Example

50 |
51 |
Item 1
52 |
Item 2
53 |
Item 3
54 |
55 |

The container above uses Flexbox to arrange items with display: flex, flex-direction, justify-content, and align-items.

56 | 57 | -------------------------------------------------------------------------------- /CSS Fundamentals/09 Advanced Styling/01 Box Shadow and Text Shadow/shadows.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | Box Shadow and Text Shadow Example 46 | 47 | 48 | 49 |

Box Shadow and Text Shadow Example

50 |
51 | This div has a box shadow. 52 |
53 |

54 | This text has a text shadow. 55 |

56 |

The elements above demonstrate box-shadow for divs and text-shadow for text.

57 | 58 | -------------------------------------------------------------------------------- /CSS Fundamentals/09 Advanced Styling/02 Border-Radius/border_radius.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | Border-Radius Example 46 | 47 | 48 | 49 |

Border-Radius Example

50 |
51 | This div has rounded corners. 52 |
53 |
54 | This div is a circle using border-radius. 55 |
56 |

The divs above demonstrate border-radius for creating rounded corners and circular shapes.

57 | 58 | -------------------------------------------------------------------------------- /CSS Fundamentals/14 Accessibility in Styling/02 High-Contrast Mode Support/high_contrast.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | High-Contrast Mode Support Example 46 | 47 | 48 | 49 |

High-Contrast Mode Support Example

50 | 51 |

This text ensures visibility in high-contrast mode.

52 |

Test this page in a high-contrast mode (e.g., Windows High Contrast Mode) to see the styles adapt.

53 | 54 | -------------------------------------------------------------------------------- /CSS Fundamentals/10 CSS Variables/02 Using Variables/using_variables.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | Using Variables Example 46 | 47 | 48 | 49 |

Using Variables Example

50 |
51 | This box uses CSS variables for styling. 52 |
53 |

54 | This text also uses a CSS variable for its color. 55 |

56 |

The CSS file demonstrates how to use CSS variables with var(--variable-name) syntax.

57 | 58 | -------------------------------------------------------------------------------- /CSS Fundamentals/12 Responsive Design/04 Fluid Layouts/fluid_layouts.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | Fluid Layouts Example 46 | 47 | 48 | 49 |

Fluid Layouts Example

50 |
51 |
Item 1
52 |
Item 2
53 |
Item 3
54 |
55 |

Resize the browser to see how the layout adjusts fluidly using percentage-based widths.

56 | 57 | -------------------------------------------------------------------------------- /CSS Fundamentals/04 Colors and Backgrounds/04 Opacity and Transparency/opacity_transparency.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | Opacity and Transparency Example 46 | 47 | 48 | 49 |

Opacity and Transparency Example

50 |
This div has opacity set to 0.5.
51 |
This div uses an RGBA color for transparency.
52 |

The divs above demonstrate opacity and transparency using the opacity property and RGBA colors.

53 | 54 | -------------------------------------------------------------------------------- /CSS Fundamentals/11 Preprocessors/03 Compiling SASS to CSS/compiled_sass.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | Compiled SASS to CSS Example 46 | 47 | 48 | 49 |

Compiled SASS to CSS Example

50 |
51 |
52 |

Card Title

53 |

This card uses styles from a compiled SASS file.

54 |
55 |
56 |

The styles are from a .scss file compiled into CSS, showing the final output.

57 | 58 | -------------------------------------------------------------------------------- /CSS Fundamentals/06 Typography/01 Font Properties/font_properties.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | Font Properties Example 46 | 47 | 48 | 49 |

Font Properties Example

50 |

This paragraph has a custom font family.

51 |

This paragraph has a larger size and bold weight.

52 |

This paragraph has an italic style.

53 |

The paragraphs above demonstrate font properties: family, size, weight, and style.

54 | 55 | -------------------------------------------------------------------------------- /CSS Fundamentals/07 Layouts/02 CSS Grid/css_grid.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | CSS Grid Example 46 | 47 | 48 | 49 |

CSS Grid Example

50 |
51 |
Item 1
52 |
Item 2
53 |
Item 3
54 |
Item 4
55 |
56 |

The container above uses CSS Grid with display: grid, grid-template, and gap to create a grid layout.

57 | 58 | -------------------------------------------------------------------------------- /CSS Fundamentals/12 Responsive Design/01 Mobile-First Design/mobile_first.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | Mobile-First Design Example 46 | 47 | 48 | 49 |

Mobile-First Design Example

50 |
51 |
Box 1
52 |
Box 2
53 |
Box 3
54 |
55 |

Resize the browser to see the mobile-first design in action. Base styles are for mobile, with adjustments for larger screens.

56 | 57 | -------------------------------------------------------------------------------- /CSS Fundamentals/04 Colors and Backgrounds/02 Background Properties/background_properties.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | Background Properties Example 46 | 47 | 48 | 49 |

Background Properties Example

50 |
This div has a solid background color.
51 |
This div has a background image with specific position and repeat settings.
52 |

The divs above demonstrate background properties: color, image, position, and repeat.

53 | 54 | -------------------------------------------------------------------------------- /CSS Fundamentals/03 Selectors/02 Attribute Selectors/attribute_selectors.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | Attribute Selectors Example 46 | 47 | 48 | 49 |

Attribute Selectors Example

50 | Link to Example
51 | Internal Link
52 |
53 | 54 |

The elements above are styled using attribute selectors based on their attributes.

55 | 56 | -------------------------------------------------------------------------------- /CSS Fundamentals/12 Responsive Design/02 Breakpoints with Media Queries/breakpoints.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | Breakpoints Example 46 | 47 | 48 | 49 |

Breakpoints Example

50 |
51 |
Item 1
52 |
Item 2
53 |
Item 3
54 |
Item 4
55 |
56 |

Resize the browser to see how the layout changes at different breakpoints using media queries.

57 | 58 | -------------------------------------------------------------------------------- /CSS Fundamentals/03 Selectors/03 Pseudo-Classes/pseudo_classes.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | Pseudo-Classes Example 46 | 47 | 48 | 49 |

Pseudo-Classes Example

50 | Hover over this link
51 |
52 | 58 |

The elements above use :hover, :focus, and :nth-child pseudo-classes for styling.

59 | 60 | -------------------------------------------------------------------------------- /CSS Fundamentals/11 Preprocessors/02 SCSS Syntax/scss_syntax.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | SCSS Syntax Example 46 | 47 | 48 | 49 | 50 |

SCSS Syntax Example

51 |
52 |
53 |

Card Title

54 |

This card uses SCSS syntax with nesting and variables.

55 |
56 |
57 |

The styles are defined in a .scss file, showcasing SCSS syntax.

58 | 59 | -------------------------------------------------------------------------------- /CSS Fundamentals/06 Typography/02 Text Properties/text_properties.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | Text Properties Example 46 | 47 | 48 | 49 |

Text Properties Example

50 |

This paragraph is centered.

51 |

This paragraph has an underline decoration.

52 |

This paragraph is uppercase.

53 |

This paragraph has custom spacing.

54 |

The paragraphs above demonstrate text properties: align, decoration, transform, and spacing.

55 | 56 | -------------------------------------------------------------------------------- /CSS Fundamentals/16 Browser Compatibility/03 Polyfills/polyfills.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | Polyfills Example 46 | 47 | 48 | 49 | 50 | 51 |

Polyfills Example

52 | Sample Image 53 |

The image above uses object-fit with a polyfill for older browsers and a fallback style.

54 | 55 | -------------------------------------------------------------------------------- /CSS Fundamentals/03 Selectors/05 Combinators/combinators.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | Combinators Example 46 | 47 | 48 | 49 |

Combinators Example

50 |
51 |

This is a descendant paragraph (inside div).

52 |

This is a child paragraph (direct child of span).

 53 |
54 |

This paragraph is outside the container.

55 |

This paragraph follows the previous one (sibling).

56 |

The elements above are styled using descendant, child, and sibling combinators.

57 | 58 | -------------------------------------------------------------------------------- /CSS Fundamentals/01 CSS Basics/02 Linking CSS/linking_css.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | Linking CSS Example 46 | 47 | 52 | 53 | 54 | 55 | 56 |

Linking CSS Example

57 |

This paragraph uses inline CSS with the style attribute.

58 |

The h1 above uses internal CSS defined in the 56 | 57 | 58 | 59 | 60 | 61 |

62 | Critical CSS Example 63 |
64 | 65 |
66 | This content loads with the remaining CSS. 67 |
68 |

The header uses inlined critical CSS for faster rendering, while the rest is loaded separately.

69 | 70 | -------------------------------------------------------------------------------- /CSS Fundamentals/10 CSS Variables/03 Dynamic Theming with Variables/dynamic_theming.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | Dynamic Theming Example 46 | 47 | 48 | 49 |

Dynamic Theming Example

50 | 51 |
52 | This box changes color based on the theme. 53 |
54 |

55 | This text also changes color dynamically. 56 |

57 |

The CSS file uses variables for dynamic theming, updated via JavaScript on button click.

58 | 73 | 74 | -------------------------------------------------------------------------------- /CSS Fundamentals/15 CSS Frameworks/02 Bootstrap/bootstrap.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | Bootstrap Example 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 |
55 |

Bootstrap Example

56 | 57 |
58 |
59 |
60 |
61 |
Card 1
62 |

This is a Bootstrap card in a grid layout.

63 |
64 |
65 |
66 |
67 |
68 |
69 |
Card 2
70 |

This is another card in the grid.

71 |
72 |
73 |
74 |
75 |
76 |
77 |
Card 3
78 |

This card completes the row.

79 |
80 |
81 |
82 |
83 | 84 |
85 | 86 |
87 |
88 |

This example uses Bootstrap’s grid system and components.

89 | 90 | -------------------------------------------------------------------------------- /CSS Fundamentals/15 CSS Frameworks/03 Customizing Frameworks/customize_framework.html: -------------------------------------------------------------------------------- 1 | 41 | 42 | 43 | 44 | 45 | Customizing Frameworks Example 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 |
55 |

Customizing Frameworks Example

56 | 57 |
58 |
59 |
60 |
61 |
Custom Card 1
62 |

This card has customized styles.

63 |
64 |
65 |
66 |
67 |
68 |
69 |
Custom Card 2
70 |

This card also has customized styles.

71 |
72 |
73 |
74 |
75 |
76 |
77 |
Custom Card 3
78 |

Custom styles applied here too.

79 |
80 |
81 |
82 |
83 | 84 |
85 | 86 |
87 |
88 |

This example customizes Bootstrap styles with additional CSS.

89 | 90 | --------------------------------------------------------------------------------