Welcome to CodeHarborHub
+Edit the CSS variables below to customize this component live!
+ +`} + defaultCss={`:root { + --primary-color: #2563eb; + --accent-color: #3b82f6; + --text-color: #ffffff; + --radius: 12px; +} + +.hero-card { + background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); + color: var(--text-color); + padding: 2rem; + border-radius: var(--radius); + font-family: system-ui, sans-serif; + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); +} + +.hero-card h2 { + margin-bottom: 0.5rem; + font-size: 1.5rem; +} + +.hero-card p { + opacity: 0.9; + margin-bottom: 1.25rem; +} + +.btn { + background-color: #ffffff; + color: var(--primary-color); + border: none; + padding: 0.6rem 1.2rem; + border-radius: 6px; + font-weight: 600; + cursor: pointer; + transition: transform 0.2s ease; +} + +.btn:hover { + transform: translateY(-2px); +}`} + height="340px" +/> + +--- + +## What You Will Learn + +* **Rendering Engine Mechanics:** Understand DOM and CSSOM parsing, paint cycles, GPU layer creation, and browser rendering pipelines. +* **Layout Systems:** Build robust, flex-based, and multi-dimensional grid structures using CSS Grid and Flexbox without utility clutter. +* **Architecture & Specificity:** Master the cascade algorithm, specificity calculation rules, inheritance propagation, and native CSS layers (`@layer`). +* **Modern Responsive Design:** Transition from static media queries to modern content-aware container queries and dynamic fluid typography. + +--- + +## Course Curriculum Breakdown + +| Module | Lecture Title | Core Learning Objective | +| :--- | :--- | :--- | +| **Module 1: Foundations** | Lecture 1: What is CSS & How it Works | DOM tree generation, CSSOM, and rendering engine flow | +| | [Lecture 2: Parts of a CSS Rule](#) | Anatomical breakdown of selectors, declarations, properties, and values | +| | [Lecture 3: Types of CSS Rules](#) | Standard style rules vs. metadata directives and `@`-rules | +| | Lecture 4: The Cascade, Specificity & Inheritance | Specificity scoring math, cascade layers, and value inheritance | +| **Module 2: Selectors & Typography** | Lecture 5: CSS Selectors (Basic to Advanced) | Class, ID, attribute selectors, and relational combinators | +| | Lecture 6: Pseudo-Classes & Pseudo-Elements | Dynamic user state pseudo-classes and DOM insertion pseudo-elements | +| | Lecture 7: Typography & Text Styling | Web font integration via `@font-face`, line heights, and fluid sizing | +| **Module 3: Box Model & Layouts** | Lecture 8: The CSS Box Model | Content-box vs. border-box sizing calculations and margin collapsing | +| | Lecture 9: Display & Positioning | Document flow context, absolute/relative offsets, and sticky placement | +| | Lecture 10: Flexbox Masterclass | Axis distributions, alignment properties, and flex item shrink/grow logic | +| | Lecture 11: CSS Grid Architecture | Two-dimensional template areas, track sizing, and auto-fit placement | +| **Module 4: Modern CSS** | Lecture 12: CSS Custom Properties | Scoped variables, dynamic runtime overrides, and dark mode themes | +| | Lecture 13: Responsive Design & Media Queries | Mobile-first breakpoints, viewport units, and container queries | +| | Lecture 14: Transitions, Transforms & Animations | Keyframe definitions, GPU hardware acceleration, and timing functions | + +--- + +## Prerequisites + +Before taking this course, you should have a basic understanding of: +1. **HTML Fundamentals:** Document structure, tags, attributes, and basic semantic elements. +2. **Text Editor Familiarity:** Basic experience writing code in VS Code or similar development environments. +3. **Browser DevTools:** Knowing how to right-click an element and select **Inspect** to view styles live. + +:::info Recommended Learning Path +Work through the lectures sequentially. Each lesson builds upon the rendering concepts established in prior modules. +::: + + + \ No newline at end of file diff --git a/courses/css/module-1-foundations/Quiz/index.jsx b/courses/css/module-1-foundations/Quiz/index.jsx new file mode 100644 index 000000000..824b9630d --- /dev/null +++ b/courses/css/module-1-foundations/Quiz/index.jsx @@ -0,0 +1,234 @@ +import React, { useState } from 'react'; +import BrowserOnly from '@docusaurus/BrowserOnly'; +import styles from './styles.module.css'; + +const quizData = [ + { + id: 1, + question: "During browser rendering, which tree is constructed by combining DOM elements with visual styles?", + options: [ + "CSSOM Tree", + "DOM Tree", + "Render Tree", + "Layout Tree" + ], + correctAnswer: 2, + explanation: "The Render Tree combines the visible DOM nodes with their associated CSSOM styles to determine what actually gets painted to the screen." + }, + { + id: 2, + question: "In the CSS rule `h1 { color: #2563eb; }`, what term describes the `color: #2563eb;` segment?", + options: [ + "Property", + "Declaration", + "Selector", + "Declaration Block" + ], + correctAnswer: 1, + explanation: "A single property-value pair (terminated by a semicolon) is called a Declaration. The entire set inside curly braces is the Declaration Block." + }, + { + id: 3, + question: "Which of the following `@`-rules MUST be placed at the very top of a stylesheet before standard style rules?", + options: [ + "@media", + "@keyframes", + "@import", + "@supports" + ], + correctAnswer: 2, + explanation: "`@import` and `@charset` directives must appear before any standard style rules; otherwise, browsers will invalidate them." + }, + { + id: 4, + question: "What is the calculated Specificity Vector (ID, Class, Type) for the selector `div#main .card p`?", + options: [ + "(1, 1, 2)", + "(0, 2, 2)", + "(1, 2, 1)", + "(0, 1, 3)" + ], + correctAnswer: 0, + explanation: "`#main` = 1 ID, `.card` = 1 Class, `div` and `p` = 2 Types. Thus, the specificity vector is (1, 1, 2)." + }, + { + id: 5, + question: "Which of these CSS properties is inherited by child DOM nodes by default?", + options: [ + "margin", + "background-color", + "color", + "padding" + ], + correctAnswer: 2, + explanation: "Typography-related properties like `color`, `font-family`, and `line-height` inherit naturally. Box-model properties like `margin` and `padding` do not." + } +]; + +function QuizContent() { + const [currentQuestion, setCurrentQuestion] = useState(0); + const [selectedAnswers, setSelectedAnswers] = useState({}); + const [showResults, setShowResults] = useState(false); + + const handleSelectOption = (optionIndex) => { + setSelectedAnswers({ + ...selectedAnswers, + [currentQuestion]: optionIndex + }); + }; + + const handleNext = () => { + if (currentQuestion < quizData.length - 1) { + setCurrentQuestion(currentQuestion + 1); + } else { + setShowResults(true); + } + }; + + const handlePrev = () => { + if (currentQuestion > 0) { + setCurrentQuestion(currentQuestion - 1); + } + }; + + const handleRestart = () => { + setSelectedAnswers({}); + setCurrentQuestion(0); + setShowResults(false); + }; + + const calculateScore = () => { + let score = 0; + quizData.forEach((q, index) => { + if (selectedAnswers[index] === q.correctAnswer) { + score += 1; + } + }); + return score; + }; + + const question = quizData[currentQuestion]; + const isAnswered = selectedAnswers[currentQuestion] !== undefined; + + return ( +
+
+ );
+}
+
+export default function Quiz(props) {
+ return (
+
+
+
+ {!showResults ? (
+ Module 1 Assessment: Foundations
+ {!showResults && ( + + Question {currentQuestion + 1} of {quizData.length} + + )} +
+
+ ) : (
+
+
+
+
+ {question.question}
+ +
+ {question.options.map((option, idx) => {
+ const isSelected = selectedAnswers[currentQuestion] === idx;
+ return (
+
+ );
+ })}
+
+
+ {isAnswered && (
+
+ Explanation: {question.explanation}
+
+ )}
+
+
+
+
+
+
+
+ )}
+
+ {calculateScore()}
+ / {quizData.length}
+
+
+ + {calculateScore() === quizData.length + ? 'π Outstanding! Perfect Score!' + : calculateScore() >= 3 + ? 'π Great Job! You know your CSS foundations well.' + : 'π Good effort! Review Module 1 and try again.'} +
+ +
+ {quizData.map((q, idx) => {
+ const userAns = selectedAnswers[idx];
+ const isCorrect = userAns === q.correctAnswer;
+ return (
+
+
+
+
+
+ );
+ })}
+ + Q{idx + 1}: {q.question} +
++ Your Answer: {q.options[userAns]} {isCorrect ? 'β ' : 'β'} +
+ {!isCorrect && ( ++ Correct Answer: {q.options[q.correctAnswer]} +
+ )} +`) inside `.card` must inherit the parent container's font settings automatically. +* The `.card-footer a` link must explicitly set `color: inherit` to match paragraph text rather than the browser's default user-agent blue (`#0000ee`). +* The `.reset-badge` span must set `color: initial` to revert directly to standard User-Agent rendering. + +```html title="Card Component Structure" +
+
+```
+
+## Interactive Coding Lab
+
+Refactor and debug the live sandbox below to complete all challenge requirements.
+
+Module 1 Completion Badge
+Your progress has been logged to the CodeHarborHub ecosystem.
+ +Module 1 Completion Badge
+Your progress has been logged to the CodeHarborHub ecosystem.
+ +`} +defaultCss={`/* Challenge 2: Refactor the CSS to use modern styling and correct inheritance */ +.card { + color: #475569; + font-family: system-ui, -apple-system, sans-serif; + background: #f8fafc; + padding: 1.5rem; + border-radius: 8px; + border: 1px solid #e2e8f0; +} +.card p { + color: inherit; + margin: 0.5rem 0 1rem 0; +} +.card-footer { + display: flex; + justify-content: space-between; + align-items: center; + font-size: 0.875rem; +} +.card-footer a { + color: #2563eb; + text-decoration: none; +} +.card-footer a:hover { + text-decoration: underline; +} +.reset-badge { + color: #059669; + font-weight: 500; +}`} + +height="480px" /> + +## Task Self-Check Scorecard + +In this challenge, you should have successfully applied the following CSS concepts: + +* **Specificity Math:** Calculated specificity vectors to resolve style conflicts. +* **Explicit Inheritance Control:** Used `inherit` and `initial` to manage property inheritance in nested elements. +* **Source Order Resolution:** Ensured that the order of CSS rules does not override specificity unless intended. +* **Modern CSS Practices:** Applied semantic class names, responsive design principles, and clean code formatting. \ No newline at end of file diff --git a/courses/css/module-1-foundations/lecture-1-what-is-css.md b/courses/css/module-1-foundations/lecture-1-what-is-css.md new file mode 100644 index 000000000..bfe573bac --- /dev/null +++ b/courses/css/module-1-foundations/lecture-1-what-is-css.md @@ -0,0 +1,175 @@ +--- +id: what-is-css +title: "What is CSS & How it Works" +sidebar_label: "Lecture 1" +sidebar_position: 1 +description: Understand what CSS is, how browsers process stylesheets, and the step-by-step rendering pipeline from DOM to pixels. +tags: ["css", "lecture", "foundations", "rendering", "browser"] +--- + +**CSS (Cascading Style Sheets)** is the language used to specify the presentation, layout, and visual formatting of web pages written in HTML. + +While **HTML** defines the structural raw content (headings, paragraphs, buttons) and **JavaScript** adds dynamic behavior, **CSS** controls visual layout, typography, colors, animations, and responsive screen adaptation. + +:::info Why "Cascading"? +The term "cascading" refers to the way CSS rules are applied in a hierarchical manner, where multiple rules can target the same element. The browser determines which rule takes precedence based on specificity, source order, and importance. +::: + +## How the Browser Engine Renders CSS + +To understand CSS deeply, you must understand how a browser rendering engine (like Blink, Gecko, or WebKit) converts raw code into actual pixels on a screen. + + +```mermaid +flowchart LR + A[HTML Document] -->|Parse| B(DOM Tree) + C[CSS Stylesheets] -->|Parse| D(CSSOM Tree) + B --> E(Render Tree) + D --> E + E --> F(Layout / Reflow) + F --> G(Painting) + G --> H(Compositing) + H --> I[Pixels on Screen] + +``` + +### 1. Constructing the DOM and CSSOM + +* **DOM (Document Object Model):** The browser parses HTML markup into a tree structure of nodes representing page elements. +* **CSSOM (CSS Object Model):** Simultaneously, the browser parses external stylesheets, style tags, and inline styles into a tree structure representing style rules. + +### 2. The Render Tree + +The browser combines the DOM and CSSOM trees into a **Render Tree**. Unlike the DOM, the Render Tree only includes nodes required for visual rendering. Elements styled with `display: none` are excluded entirely from the Render Tree (though elements with `visibility: hidden` remain included). + +### 3. Layout (Reflow) + +The rendering engine calculates the exact geometryβwidth, height, and spatial coordinates (`x, y`)βfor every node in the Render Tree relative to the viewport. + +### 4. Painting + +The engine converts calculated geometry into visual pixels, drawing text, borders, colors, shadows, and backgrounds across software paint layers. + +### 5. Compositing + +The browser merges separate paint layers into a single image displayed on the screen, offloading transformed or animated elements to the GPU (Graphics Processing Unit) when GPU acceleration is triggered. + +--- + +## Interactive Playground: The Impact of CSS + +Explore how plain HTML elements transform when styling rules are applied. Edit the CSS below to observe live rendering changes: + +Browser Rendering
+HTML provides structure. CSS provides typography, color, spacing, and layout context.
+ +`} + defaultCss={`.card-container { + background-color: #0f172a; + color: #f8fafc; + padding: 1.5rem; + border-radius: 12px; + border: 1px solid #1e293b; + font-family: system-ui, sans-serif; +} + +.badge { + background-color: #38bdf8; + color: #0f172a; + font-size: 0.75rem; + font-weight: 700; + padding: 0.25rem 0.5rem; + border-radius: 4px; + text-transform: uppercase; +} + +.card-container h2 { + margin: 0.75rem 0 0.5rem 0; + font-size: 1.25rem; +} + +.card-container p { + color: #94a3b8; + font-size: 0.9rem; + line-height: 1.5; + margin-bottom: 1rem; +} + +.action-btn { + background-color: #2563eb; + color: #ffffff; + border: none; + padding: 0.5rem 1rem; + border-radius: 6px; + font-weight: 600; + cursor: pointer; + transition: background-color 0.2s; +} + +.action-btn:hover { + background-color: #1d4ed8; +}`} + height="360px" +/> + +--- + +## Three Methods to Link CSS to HTML + +There are three ways to apply CSS to HTML documents: + +### 1. External Stylesheet (Recommended) +Links an independent `.css` file via the `` tag placed inside the `` of your HTML document. + +```html title="index.html" + + + +``` + +:::tip Why External? +External stylesheets encourage clean separation of concerns, allow rule caching across pages, and promote scalable styling patterns across large web platforms like CodeHarborHub. +::: + +### 2. Internal Style Tag + +Embeds CSS directly within a ` + + +``` + +### 3. Inline Styles + +Applies styling rules directly to individual HTML elements using the `style` attribute. + +```html title="index.html" +CodeHarborHub
+``` + +:::caution Avoid Inline Styles +Inline styles override external stylesheet rules, bypass the cascade, clutter HTML semantics, and create severe maintainability challenges in large applications. +::: + +--- + +## Summary Checklist + +| Topic | Key Concept | +| --- | --- | +| **DOM Tree** | Structural tree built from HTML elements | +| **CSSOM Tree** | Style tree built from parsed CSS rules | +| **Render Tree** | Combined tree containing visible nodes with styled attributes | +| **Reflow / Layout** | Phase calculating geometric positions and dimensions | +| **Repaint / Paint** | Phase rasterizing visual pixels onto screen layers | \ No newline at end of file diff --git a/courses/css/module-1-foundations/lecture-2-parts-of-a-css-rule.md b/courses/css/module-1-foundations/lecture-2-parts-of-a-css-rule.md new file mode 100644 index 000000000..f14a7121a --- /dev/null +++ b/courses/css/module-1-foundations/lecture-2-parts-of-a-css-rule.md @@ -0,0 +1,146 @@ +--- +id: parts-of-a-css-rule +title: "Parts of a CSS Rule" +sidebar_label: "Lecture 2" +sidebar_position: 2 +description: "Learn the precise anatomical breakdown of a CSS rule set including selectors, properties, values, declarations, and declaration blocks." +tags: ["css", "lecture", "foundations", "syntax", "selectors", "properties", "values"] +keywords: ["css", "lecture", "foundations", "syntax", "selectors", "properties", "values"] +--- + +To write clean, predictable stylesheets, you need a precise understanding of CSS syntax. A stylesheet consists of individual **rule sets** (often called **rules**) that instruct the browser how to style specific elements in the document tree. + +## Anatomical Breakdown of a CSS Rule + +A single CSS rule set is composed of five distinct components: + +```css title="Example CSS Rule" +h1 { + color: #2563eb; + font-size: 2rem; +} +``` + +**Where:** + + + +|Component | Code Segment | Description | +|:----------|:--------------|:-------------| +|Selector | h1 | The target pattern that tells the browser which HTML elements to style. | +|Declaration Block | `{ ... }` | The pair of curly braces containing one or more style declarations. | +|Property | color, font-size | The specific human-readable visual characteristic you want to change. | +|Value | #2563eb, 2rem | The specific parameter or metric assigned to a property. | +|Declaration | color: #2563eb; | A single property-value pair separated by a colon (:) and terminated by a semicolon (;). | + +## Detailed Component Analysis + +### 1. The Selector + +The selector sits outside the declaration block. It can target elements based on their tag name, class name, ID, attributes, relationship in the DOM tree, or dynamic user interaction states. + +```css title="Example Selectors" +/* Element Selector */ +p { line-height: 1.6; } + +/* Class Selector */ +.card { padding: 1rem; } + +/* ID Selector */ +#main-header { background-color: #0f172a; } +``` + +### 2. The Declaration Block + +Enclosed by opening `{` and closing `}` curly braces, the declaration block acts as a container for all style rules applied to the selector. + +```css title="Example Declaration Block" +.badge { + /* Everything inside these braces is the declaration block */ + display: inline-block; + padding: 0.25rem 0.5rem; + font-weight: 600; +} +``` + +### 3. Properties and Values + +A property names the feature (e.g., margin, background-color, border-radius), while a value sets its visual outcome. Values can take many forms: + +* **Keywords:** `bold`, `flex`, `relative`, `center` +* **Numeric Units:** `16px`, `1.5rem`, `50%`, `2vh` +* **Colors:** Named colors (`navy`), Hex values (`#2563eb`), RGB/RGBA (`rgb(37, 99, 235)`), HSL/HSLA (`hsl(221, 83%, 53%)`) +* **Functions:** `calc(100% - 2rem)`, `var(--primary-color)`, `linear-gradient(...)` + +:::caution The Essential Semicolon +Every declaration must end with a semicolon ;. Omitting a semicolon causes the parser to merge two consecutive declarations together, rendering both invalid. +::: + +## Interactive Playground: Dissecting a Rule + +Use the editor below to modify the selectors, properties, and values inside the declaration block. Observe how changing property parameters alters the live preview instantly: + +Welcome to CodeHarborHub
+Learn CSS with interactive examples!
+ +`} +defaultCss={`.card { + background-color: #0f172a; + color: #f8fafc; + padding: 1.5rem; + border-radius: 12px; + border: 1px solid #1e293b; + font-family: system-ui, sans-serif; +} +.action-btn { + background-color: #2563eb; + color: #ffffff; + border: none; + padding: 0.5rem 1rem; + border-radius: 6px; + font-weight: 600; + cursor: pointer; + transition: background-color 0.2s; + margin-top: 1rem; +} +.action-btn:hover { + background-color: #1d4ed8; +}`} +/> + +## Common Formatting Practices + +While whitespace (spaces, tabs, line breaks) is ignored by the CSS parser, clean formatting improves readability and team collaboration on platform projects: + +### Single-line vs. Multi-line Rules + +```css title="Single-line vs Multi-line CSS Rules" +/* Multi-line Format (Recommended for readability) */ +.user-avatar { + width: 48px; + height: 48px; + border-radius: 50%; + object-fit: cover; +} + +/* Single-line Format (Used occasionally for small utility classes) */ +.text-center { text-align: center; } +.hidden { display: none; } +``` + +:::tip CodeHarborHub Style Guide +Stick to multi-line rules with 2-space indentation for regular components. Keep property names in lowercase and always include a space after the colon separating properties from values (color: #2563eb;). +::: + +## Summary Checklist + +| Concept | Structure | Quick Example | +|----------|--------------|----------------| +|Rule Set |Selector + Declaration Block |`h1 { color: red; }`| +|Selector |Targets DOM node(s) |`.button`, `#app`, `div`| +|Declaration |Property + Value pair |font-size: 16px;| +|Delimiter |Separates property & value |`:` (Colon)| +|Terminator |Concludes a declaration |`;` (Semicolon)| \ No newline at end of file diff --git a/courses/css/module-1-foundations/lecture-3-types-of-css-rules.md b/courses/css/module-1-foundations/lecture-3-types-of-css-rules.md new file mode 100644 index 000000000..cbe287b5b --- /dev/null +++ b/courses/css/module-1-foundations/lecture-3-types-of-css-rules.md @@ -0,0 +1,176 @@ +--- +id: types-of-css-rules +title: "Types of CSS Rules" +sidebar_label: "Lecture 3" +sidebar_position: 3 +description: "Learn the two primary types of CSS rules: Style Rules and At-Rules. Understand how they differ in syntax, purpose, and behavior within a stylesheet." +tags: ["css", "lecture", "foundations", "syntax", "style rules", "at-rules"] +keywords: ["css", "lecture", "foundations", "syntax", "style rules", "at-rules"] +--- + +Not all CSS rules behave the same way. While most rules target HTML elements to apply styles directly, CSS also provides specialized directives that control how stylesheets parse, handle responsive viewports, import assets, or define complex animation logic. + +In CSS, rules are categorized into two primary types: **Style Rules** and **At-Rules (`@`)**. + +## 1. Style Rules + +**Style Rules** are the backbone of CSS. A style rule selects elements in the DOM tree and applies visual declarations inside a standard declaration block. + +```css title="Example Style Rule" +.hero-title { + font-size: 2.5rem; + color: #0f172a; + line-height: 1.2; +} +``` + +Every standard style rule follows the pattern learned in Lecture 2: a selector followed by a declaration block `{ ... }`. + +## 2. At-Rules (`@`) + +At-Rules are special directives that start with an `@` symbol (e.g., `@import`, `@media`). They instruct the CSS engine on metadata parsing, browser environments, custom typography loading, or conditional rendering logic. + +At-rules fall into two sub-categories based on their syntax structure: + +### A. Statement At-Rules + +These directives end with a single semicolon ; and do not contain nested CSS blocks. + +* `@charset`: Specifies the character encoding used by the stylesheet (must be placed at line 1). +* `@import`: Loads external CSS files into the current stylesheet. + +```css title="Example Statement At-Rules" +@charset "UTF-8"; +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap'); +``` + +:::warning Parsing Order Rule +`@charset` and `@import` directives must appear before any standard style rules in your document. Any standard style rule placed above an `@import` will cause the browser to invalidate that import. +::: + +### B. Nested Block At-Rules + +These directives contain nested declaration blocks enclosed in `{ ... }`. They apply styles conditionally or create reusable browser instructions. + +|Directive | Purpose | Example Use Case | +|---|---|---| +|`@media` | Applies styles conditionally based on media queries (screen width, dark mode, resolution). | Responsive mobile-first layouts | +|`@keyframes`| Defines animation frames and property values across a timeline. |Keyframe animations | +|`@font-face` | Registers external font files for use across the document. |Custom brand typography | +|`@supports` | Applies styles only if the browser supports a specific CSS feature (Feature Query). | Progressive enhancement | +|`@layer` | Assigns styles to explicit cascade layers to solve specificity conflicts cleanly. | Modern architecture & resets | + +## Code Example: At-Rules in Action + +### 1. The @media Rule (Responsive Conditional Logic) + +```css title="Example Media Query At-Rule" +/* Base style for mobile devices */ +.nav-menu { + display: flex; + flex-direction: column; +} + +/* At-Rule overriding styles for tablet screens and above */ +@media (min-width: 768px) { + .nav-menu { + flex-direction: row; + justify-content: space-between; + } +} +``` + +### 2. The @keyframes Rule (Animation Keyframes) + +```css title="Example Keyframe Animation At-Rule" +@keyframes pulse { + 0% { transform: scale(1); opacity: 1; } + 50% { transform: scale(1.05); opacity: 0.8; } + 100% { transform: scale(1); opacity: 1; } +} + +.badge-live { + animation: pulse 2s infinite ease-in-out; +} +``` + +## Interactive Playground: Style Rules vs. At-Rules + +Experiment with the interactive editor below. Try adjusting the `@keyframes `animation parameters or changing the conditional properties inside the `@media `rule to see how the live preview reacts: + +` default font size, `` underline).
+* **User Styles:** Custom styles defined by the user (e.g., custom accessibility fonts or dark mode overrides).
+* **Author Styles:** Styles written by web developers in the application code.
+
+When calculating priority, `!important` flags invert the default origin hierarchy:
+
+| Priority Order | Origin & Importance Level |
+| :--- | :--- |
+| **1 (Highest)** | Transition declarations |
+| **2** | User Agent `!important` |
+| **3** | User `!important` |
+| **4** | Author `!important` |
+| **5** | Animation declarations |
+| **6** | Normal Author Styles |
+| **7** | Normal User Styles |
+| **8 (Lowest)** | Normal User Agent Styles |
+
+:::danger The `!important` Trap
+`!important` does not add specificityβit alters the cascade origin. Overusing `!important` breaks natural cascade flow and creates maintainability bottlenecks. Use it only for utility classes or overriding third-party library styles when no other method exists.
+:::
+
+## 2. Specificity Calculation Math
+
+When competing rules come from the same origin level, the browser calculates the **Specificity Score** of their selectors.
+
+Specificity is represented as a tuple of three distinct component counts: **`(A, B, C)`**.
+
+```
+( A , B , C )
+ | | |
+ | | βββ Type Selectors (h1, p) & Pseudo-elements (::before)
+ | βββββββ Class (.card), Attribute ([type="text"]), & Pseudo-classes (:hover)
+ βββββββββββ ID Selectors (#header)
+
+```
+
+### Specificity Value Matrix
+
+| Selector Category | Represented Vector | Score Component | Example Selectors |
+| :--- | :---: | :---: | :--- |
+| **Inline Styles** | `style="..."` | Overrides (A, B, C) | `` |
+| **A: ID Selectors** | `(1, 0, 0)` | **A** Component | `#nav-main`, `#user-profile` |
+| **B: Classes, Attributes & Pseudo-classes** | `(0, 1, 0)` | **B** Component | `.btn`, `[type="submit"]`, `:hover`, `:nth-child(2)` |
+| **C: Type Selectors & Pseudo-elements** | `(0, 0, 1)` | **C** Component | `h1`, `p`, `div`, `::before`, `::after` |
+| **Universal & Combinators** | `(0, 0, 0)` | None | `*`, `>`, `+`, `~`, `:where()` |
+
+:::note Vector Comparison Rule
+Specificity vectors are compared **column by column from left to right**, not as base-10 numbers. An ID selector `(1, 0, 0)` will always beat 1,000 stacked class selectors `(0, 1000, 0)`.
+:::
+
+### Scoring Examples
+
+| Selector | (A, B, C) Vector | Total Calculated Weight |
+| :--- | :---: | :--- |
+| `p` | `(0, 0, 1)` | 1 Type |
+| `.card p` | `(0, 1, 1)` | 1 Class + 1 Type |
+| `#main-content .card p` | `(1, 1, 1)` | 1 ID + 1 Class + 1 Type |
+| `#main-content .card p:hover` | `(1, 2, 1)` | 1 ID + 1 Class + 1 Pseudo-class + 1 Type |
+| `ul.nav > li a:hover::after` | `(0, 2, 3)` | 1 Class + 1 Pseudo-class + 3 Types + 1 Pseudo-element |
+
+### Source Order (The Tie-Breaker)
+
+If two competing rules have the exact same specificity vector score, **the rule defined latest in the stylesheet wins**.
+
+```css title="Example Source Order Tie-Breaker"
+/* Specificity: (0, 1, 0) */
+.button-primary { background-color: #2563eb; }
+
+/* Specificity: (0, 1, 0) β WINS because it appears later */
+.button-danger { background-color: #dc2626; }
+```
+
+## 3. Structural Inheritance
+
+Inheritance is the mechanism by which property values applied to a parent HTML node are automatically passed down to its child DOM nodes.
+
+Not all properties inherit by default:
+
+* **Inherited Properties (Text-related):** color, font-family, font-size, line-height, text-align, letter-spacing, visibility.
+* **Non-Inherited Properties (Box Model & Position):** margin, padding, border, background, width, height, display, position.
+
+### Explicit Control Keywords
+
+CSS provides four universal value keywords to control inheritance on any property explicitly:
+
+1. **inherit:** Forces a child element to take the property value of its parent node.
+2. **initial:** Resets a property to its default value defined in the W3C CSS specification.
+3. **unset:** Acts as inherit if the property is naturally inherited, or initial if it is not.
+4. **revert:** Rolls back the property to the browser's default User Agent stylesheet.
+
+```css title="Example Inheritance Control"
+.card-content p {
+ /* Forces margin to inherit from parent card even though margin is non-inherited */
+ margin: inherit;
+ /* Resets color back to browser default */
+ color: initial;
+}
+```
+
+## Interactive Playground: Conflict Resolution
+
+Test your understanding of specificity and source order in the editor below. Try adding IDs, classes, or !important declarations to observe which rule takes control of the preview component:
+
+
+ Card Title
+ This is a sample card description.
+
+ `}
+defaultCss={`.card {
+ background-color: #f8fafc;
+ padding: 1.5rem;
+ border-radius: 12px;
+ border: 1px solid #e2e8f0;
+}
+
+#main-title {
+ color: #2563eb;
+}
+
+.card-text {
+ color: #1e293b;
+ font-size: 1rem;
+ line-height: 1.5rem;
+}
+
+.btn {
+ background-color: #2563eb;
+ color: #ffffff;
+ padding: 0.5rem 1rem;
+ border-radius: 6px;
+ font-weight: 600;
+ cursor: pointer;
+}
+.btn:hover {
+ background-color: #1d4ed8;
+}
+`}
+
+/>
\ No newline at end of file
diff --git a/courses/css/module-1-foundations/quiz.md b/courses/css/module-1-foundations/quiz.md
new file mode 100644
index 000000000..cc98b1809
--- /dev/null
+++ b/courses/css/module-1-foundations/quiz.md
@@ -0,0 +1,14 @@
+---
+id: quiz
+title: "Quiz - Module 1: Foundations"
+sidebar_label: "Quiz Module 1"
+sidebar_position: 5
+tags: ["css", "quiz", "foundations"]
+keywords: ["css", "quiz", "foundations"]
+---
+
+import Quiz from './Quiz';
+
+Take this quiz to test your understanding of the concepts covered in this module. Each question is designed to reinforce your learning and help you apply what you've learned about CSS foundations, including the cascade, specificity, and inheritance.
+
+` to scale dynamically between 1.5rem (min) and 2.5rem (max), with a preferred fluid width calculation of 4vw.
+2. Apply a unitless `line-height: 1.25` for the title and `1.6` for the body text.
+3. Configure button focus states using `:focus-visible` to display an offset outline ring (`3px solid #38bdf8`, `outline-offset: 3px`) when navigated via keyboard.
+4. Style the first paragraph inside the card body as a lead paragraph using `:first-of-type` with `font-size: 1.1rem` and `color: #cbd5e1`.
+
+## Interactive Coding Lab
+
+Refactor and debug the live sandbox below to complete all challenge requirements.
+
+
+
+
+ Internal Navigation
+ This is the lead paragraph acting as the main summary for the internal card component.
+ This is a secondary paragraph containing an internal dashboard link.
+
+ View Details
+
+
+
+
+
+
+ External Resources
+ This is the lead paragraph acting as the main summary for the external resource component.
+ Discover advanced layouts by reading the documentation on the MDN Web Docs website.
+
+ Explore CSS
+
+
+
+
+`}
+defaultCss={`
+
+/* Base Container Styling */
+.challenge-wrapper {
+display: grid;
+gap: 1.5rem;
+padding: 1rem;
+background-color: #0f172a;
+font-family: system-ui, -apple-system, sans-serif;
+}
+
+.card {
+background-color: #1e293b;
+border: 1px solid #334155;
+padding: 1.5rem;
+border-radius: 10px;
+color: #f8fafc;
+}
+
+/* TASK 1.3: Apply border to card IF it contains an external link (https://) /
+/ Write the :has() selector here */
+
+/* TASK 2.1 & 2.2: Fluid Title with clamp() and unitless line-height /
+.card-title {
+/ Replace static font-size with clamp(1.5rem, 4vw, 2.5rem) */
+font-size: 1.5rem;
+line-height: 1.5;
+margin-top: 0.5rem;
+margin-bottom: 0.75rem;
+color: #ffffff;
+}
+
+/* TASK 2.4: Target first paragraph as lead copy */
+.card-body:first-of-type {
+font-size: 1.1rem;
+color: #cbd5e1;
+line-height: 1.6;
+}
+
+.card-body {
+font-size: 0.95rem;
+line-height: 1.6;
+color: #94a3b8;
+}
+
+/* TASK 1.2: Add external link indicator with ::after and ^= */
+a[href^="https://"]::after {
+content: " β";
+color: #38bdf8;
+}
+
+/* Action Buttons & Focus States */
+.card-actions {
+display: flex;
+gap: 1rem;
+margin-top: 1.25rem;
+}
+
+.btn-link, .btn-reset {
+padding: 0.5rem 1rem;
+border-radius: 6px;
+font-size: 0.875rem;
+font-weight: 600;
+text-decoration: none;
+display: inline-block;
+transition: all 0.2s ease;
+}
+
+.btn-link {
+background-color: #2563eb;
+color: #ffffff;
+}
+
+.btn-reset {
+background-color: #334155;
+color: #f8fafc;
+}
+
+/* TASK 2.3: Keyboard accessibility focus-visible ring */
+.btn-link:focus-visible,
+.btn-reset:focus-visible {
+outline: 3px solid #38bdf8;
+outline-offset: 3px;
+}`}
+height="460px"
+/>
+
+## Challenge Verification Matrix
+
+|Challenge | Target Objective | Verification Step |
+|---|---|---|
+|Relational Parent|Style `.card` based on nested external link| Card 1 displays a `#38bdf8` border; Card 2 does not |
+|Attribute Matcher|Append `β` icon to HTTPS links automatically|External link displays generated text node via `::after`|
+|Fluid Clamp |`clamp(1.5rem, 4vw, 2.5rem)` |Resizing preview pane dynamically alters `` font size |
+|Accessibility Focus| Focus ring on keyboard navigation | Pressing `Tab` renders an outlined indicator ring |
diff --git a/courses/css/module-2-selectors-typography/lecture-5-css-selectors.md b/courses/css/module-2-selectors-typography/lecture-5-css-selectors.md
new file mode 100644
index 000000000..87089d810
--- /dev/null
+++ b/courses/css/module-2-selectors-typography/lecture-5-css-selectors.md
@@ -0,0 +1,190 @@
+---
+id: css-selectors
+title: "CSS Selectors"
+sidebar_label: "Lecture 5"
+sidebar_position: 1
+description: "Learn about CSS selectors and how to style text effectively."
+tags: ["css", "lecture", "selectors", "typography"]
+keywords: ["css", "lecture", "selectors", "typography"]
+---
+
+CSS selectors are the targeting system of the web. They instruct the browser rendering engine exactly which DOM nodes to select and style. As layout complexity scales, writing clean, maintainable selectors becomes essential for preventing specificity bloat and redundant rule chains.
+
+## 1. Core Selector Taxonomy
+
+CSS selectors range from fundamental type matchers to advanced functional pseudo-classes:
+
+```txt
+ [ CSS Selectors ]
+ |
+βββββββββββββββββββ¬βββββββ΄ββββββββ¬βββββββββββββββββββ
+βΌ βΌ βΌ βΌ
+Simple Attribute Combinators Pseudo-Classes /
+Selectors Selectors (& Relational) Elements
+(type, class, ([attr=val]) (>, +, ~) (:hover, ::before,
+id, universal) :is(), :has())
+
+```
+
+### Basic & Combinator Reference
+
+| Type | Syntax Example | Description | Specificity Vector |
+| :--- | :--- | :--- | :---: |
+| **Universal** | `*` | Targets every element in the document scope | `(0, 0, 0)` |
+| **Type (Element)** | `h1`, `p`, `article` | Matches nodes by HTML tag name | `(0, 0, 1)` |
+| **Class** | `.card`, `.btn` | Matches nodes with a specific `class` attribute value | `(0, 1, 0)` |
+| **ID** | `#main-header` | Matches the unique element with a specific `id` attribute | `(1, 0, 0)` |
+| **Descendant** | `article p` | Matches `p` anywhere nested inside `article` | `(0, 0, 2)` |
+| **Child** | `ul > li` | Matches `li` that is a direct child of `ul` | `(0, 0, 2)` |
+| **Next Sibling** | `h2 + p` | Matches `p` immediately following `h2` at the same DOM level | `(0, 0, 2)` |
+| **Subsequent Sibling** | `h2 ~ p` | Matches all `p` elements following `h2` at the same DOM level | `(0, 0, 2)` |
+
+## 2. Advanced Attribute Matching
+
+Attribute selectors target elements based on the presence, exact value, or partial matching of their HTML attributes.
+
+```css title="Attribute Selector Examples"
+/* 1. Exact match */
+input[type="text"] { border-color: #cbd5e1; }
+
+/* 2. Contains word in space-separated list (~=) */
+[class~="primary"] { font-weight: 700; }
+
+/* 3. Starts with prefix, followed by hyphen or exact (-=) */
+[lang|="en"] { quotes: "β" "β"; }
+
+/* 4. Starts with exact substring (^=) */
+a[href^="https://"] { color: #059669; }
+
+/* 5. Ends with exact substring ($=) */
+a[href$=".pdf"] { padding-right: 1.5rem; }
+
+/* 6. Contains substring anywhere (*=) */
+[class*="nav-item"] { opacity: 0.9; }
+
+/* 7. Case-insensitive matching flag (i) */
+input[placeholder*="search" i] { background-color: #f1f5f9; }
+```
+
+## 3. Modern Pseudo-Classes: `:is()`, `:where()`, and `:has()`
+
+Modern CSS introduces functional pseudo-classes that dramatically streamline complex rule sets and introduce relational selector logic.
+
+### `:is()` β Grouping & Forgiving Lists
+
+Reduces repetition when applying styles across multiple matching trees. The specificity of `:is()` equals the highest-specificity selector in its argument list.
+
+```css
+/* Legacy repetitive approach */
+header h1, header h2, main h1, main h2 {
+ margin-bottom: 1rem;
+}
+
+/* Modern clean approach with :is() */
+:is(header, main) :is(h1, h2) {
+ margin-bottom: 1rem;
+}
+```
+
+### `:where()` β Zero-Specificity Abstraction
+
+Functions identically to `:is()`, but always maintains a specificity vector of `(0, 0, 0)`, making it ideal for base resets and design systems that users can easily override.
+
+```css
+/* Specificity is strictly (0, 0, 0) regardless of internal arguments */
+:where(header, main) :where(h1, h2) {
+ color: #1e293b;
+}
+
+/* Easily overridden by a single type selector (0, 0, 1) */
+h1 {
+ color: #2563eb;
+}
+```
+
+### `:has()` β The Parent & Relational Selector
+
+Matches a parent element based on its children or sibling relationships.
+
+```css
+/* Target a .card parent ONLY if it contains an image */
+.card:has(img) {
+ grid-template-columns: 120px 1fr;
+}
+
+/* Target an h2 ONLY when directly followed by a sub-heading p */
+h2:has(+ p.subtitle) {
+ margin-bottom: 0.25rem;
+}
+```
+
+## Interactive Playground: Selector Precision
+
+Experiment with basic combinators, attribute matching, and functional pseudo-classes in the sandbox below:
+
+
+
+
+
+ Advanced CSS Selectors
+ This card has an external link. The entire container gets a unique box shadow.
+ Visit External Site
+
+
+
+
+ New
+ Web Development Masters
+ This link ends with "/course", which automatically appends an arrow icon.
+ View our comprehensive
+
+
+
+`}
+defaultCss={`/* 2. Parent Selector (:has) β style container if it contains an external link */
+.card:has(a[href^="https://"]) {
+ box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
+}
+/* 3. Attribute End Substring ($=) */
+a[href$="/course"]::after {
+ content: " β";
+}
+/* 4. Zero Specificity Reset with :where() */
+:where(.card) h3 {
+ margin-top: 0;color: #0f172a;font-family: system-ui, sans-serif;
+}
+/* 5. Child Combinator (>) */
+.card > .badge {
+ display: inline-block;
+ font-size: 0.75rem;
+ padding: 0.25rem 0.5rem;
+ border-radius: 4px;
+ background-color: #cbd5e1;
+ color: #334155;
+}
+/* Base Container Styling */
+.demo-wrapper {
+ display: grid;
+ gap: 1rem;
+ padding: 1rem;
+ background-color: #f8fafc;
+}
+.card {
+ padding: 1.25rem;
+ border-radius: 8px;
+ background-color: #ffffff;
+ border: 1px solid #e2e8f0;
+}`}
+height="420px"
+/>
+
+## Summary Reference Table
+
+| Selector / Pseudo-Class | Primary Use Case | Specificity Impact |
+|---|---|---|
+|`[attr^="val"]`|Matches starting value (e.g., protocol links)|Counts as 1 Class `(0, 1, 0)`|
+|`[attr$="val"]`|Matches ending value (e.g., file extensions)|Counts as 1 Class `(0, 1, 0)`|
+|`:is(A, B)`|Dry up duplicate selector trees|Highest argument in list|
+|`:where(A, B)`|Low-specificity design system defaults|Always zero `(0, 0, 0)`|
+|`:has(Selector)`|Relational parent/sibling conditional styling|Highest argument in condition|
\ No newline at end of file
diff --git a/courses/css/module-2-selectors-typography/lecture-6-pseudo-classes-elements.md b/courses/css/module-2-selectors-typography/lecture-6-pseudo-classes-elements.md
new file mode 100644
index 000000000..4f23374e6
--- /dev/null
+++ b/courses/css/module-2-selectors-typography/lecture-6-pseudo-classes-elements.md
@@ -0,0 +1,194 @@
+---
+id: pseudo-classes-elements
+title: "Pseudo-classes & Pseudo-elements"
+sidebar_label: "Lecture 6"
+sidebar_position: 2
+description: "Learn target states with pseudo-classes and generate non-DOM visual nodes using pseudo-elements for clean, maintainable UI patterns."
+tags: [css, pseudo-classes, elements]
+---
+
+While standard selectors target elements based on their HTML tag, attributes, or structural classes, **pseudo-classes** and **pseudo-elements** allow you to style elements based on dynamic user state, structural position, or virtual sub-parts of the DOM tree.
+
+## 1. Pseudo-classes vs. Pseudo-elements
+
+The core syntax difference lies in the colon notation defined in CSS3 specifications:
+* **Pseudo-classes (`:`)** select existing DOM elements during specific dynamic states or structural conditions.
+* **Pseudo-elements (`::`)** generate virtual abstraction nodes that do not explicitly exist in the HTML source code.
+
+```
+[ Dynamic State or Structural Condition ]
+ β
+ βββββββββββββββ΄ββββββββββββββ
+ βΌ βΌ
+Pseudo-class ( : ) Pseudo-element ( :: )
+Targets an existing node Creates/Targets a virtual sub-node
+Example: a:hover Example: p::before
+```
+
+## 2. Deep Dive: Pseudo-Classes
+
+Pseudo-classes alter an element's appearance based on user interaction, navigation history, or form field status.
+
+### User Action & State Pseudo-Classes
+
+| Pseudo-class | Trigger Condition | Common Use Case |
+| :--- | :--- | :--- |
+| `:hover` | Pointer device moves over element | Interactive button/link state |
+| `:focus` | Keyboard or mouse focuses form input/link | Accessibility outline indicators |
+| `:focus-visible` | Keyboard navigation focuses element (suppresses mouse focus outlines) | Clean modern accessibility indicators |
+| `:active` | Element is currently being clicked/pressed | Tactile "pressed" button feedback |
+| `:disabled` | Form control has `disabled` attribute | Dimmed styling for un-interactive inputs |
+| `:checked` | Checkbox or radio button is selected | Custom toggles and radio UI |
+
+### Structural Pseudo-Classes
+
+Structural pseudo-classes target elements based on their position within their parent container's child list:
+
+* `:first-child` / `:last-child`: Targets the absolute first or last child of a parent.
+* `:nth-child(n)`: Selects elements based on an algebraic formula ($an + b$) or keywords (`odd`, `even`).
+* `:not(selector)`: Negates a matching condition.
+
+```css
+/* Selects every even table row */
+tr:nth-child(even) {
+ background-color: #f8fafc;
+}
+
+/* Selects every 3rd list item starting from index 1 (1, 4, 7...) */
+li:nth-child(3n+1) {
+ font-weight: 700;
+}
+
+/* Styles buttons that DO NOT have the .btn-primary class */
+button:not(.btn-primary) {
+ border: 1px solid #cbd5e1;
+}
+```
+
+## 3. Deep Dive: Pseudo-Elements
+
+Pseudo-elements allow you to style specific fragments of an element's content or inject generated cosmetic elements into the render tree without polluting HTML markup.
+
+### Generated Content (`::before` & `::after`)
+`::before` and `::after` insert inline visual sub-nodes as the first or last child inside the targeted element. They strictly require the content property to render.
+
+```css
+/* Creates a decorative external link arrow */
+a.external-link::after {
+ content: " β";
+ font-size: 0.8em;
+ color: #2563eb;
+}
+
+/* Tooltip container indicator */
+.tooltip::before {
+ content: "";
+ display: block;
+ width: 8px;
+ height: 8px;
+ background-color: #0f172a;
+}
+```
+
+### Typographic & Selection Pseudo-Elements
+* `::first-letter:` Styles the very first letter of a block container (ideal for drop caps).
+* `::first-line:` Styles the first rendered line of text dynamically.
+* `::selection:` Controls the background and text color when a user highlights text on the page.
+
+```css
+::selection {
+ background-color: #38bdf8;
+ color: #0f172a;
+}
+```
+
+## Interactive Playground: State & Generated Content
+
+Test dynamic state pseudo-classes alongside structural pseudo-elements in the live editor:
+
+
+ First item (Highlighted via :first-child)
+ Second item
+ Third item
+ Fourth item (Tagged via :nth-child)
+
+
+
+
+`}
+
+defaultCss={`
+
+/* List Item Pseudo-Classes */
+.custom-list {
+list-style: none;
+padding-left: 0;
+margin-bottom: 1.5rem;
+}
+
+.custom-list li {
+padding: 0.6rem 0.8rem;
+margin-bottom: 0.4rem;
+background-color: #1e293b;
+color: #ccc;
+border-radius: 6px;
+position: relative;
+}
+
+/* Structural :first-child */
+.custom-list li:first-child {
+border-left: 4px solid #38bdf8;
+color: #38bdf8;
+}
+
+/* Structural :nth-child with ::after Generated Content */
+.custom-list li:nth-child(4)::after {
+content: "NEW";
+position: absolute;
+right: 12px;
+font-size: 0.65rem;
+font-weight: 700;
+padding: 0.15rem 0.4rem;
+background-color: #059669;
+color: #ffffff;
+border-radius: 4px;
+}
+
+/* Button State Transitions */
+.btn {
+background-color: #2563eb;
+color: #ffffff;
+border: none;
+padding: 0.6rem 1.2rem;
+border-radius: 6px;
+font-weight: 600;
+cursor: pointer;
+transition: all 0.2s ease;
+margin-right: 0.5rem;
+}
+
+/* Interaction States */
+.btn:hover {
+background-color: #1d4ed8;
+transform: translateY(-1px);
+}
+
+.btn:focus-visible {
+outline: 2px solid #38bdf8;
+outline-offset: 3px;
+}
+
+.btn:active {
+transform: translateY(1px);
+}`}
+height="420px"
+/>
+
+## Best Practices & Gotchas
+
+| Feature | Recommended Practice | Common Anti-Pattern |
+|---|---|---|
+|Colon Notation|Use double colons `::` for pseudo-elements (`::before`) and single colon `:` for pseudo-classes (`:hover`).| Mixing up `::hover` or `:before` across modern codebases.|
+|Accessibility | Pair `:hover` styles with matching `:focus` or `:focus-visible` rules for keyboard users. | Removing outline focus indicators (`outline: none`) without custom alternatives. | Generated Content | Keep decorative visual icons inside `::before` / `::after.Putting` critical semantic textual content inside a CSS `content:""` declaration.|
\ No newline at end of file
diff --git a/courses/css/module-2-selectors-typography/lecture-7-typography-text-styling.md b/courses/css/module-2-selectors-typography/lecture-7-typography-text-styling.md
new file mode 100644
index 000000000..9098201d7
--- /dev/null
+++ b/courses/css/module-2-selectors-typography/lecture-7-typography-text-styling.md
@@ -0,0 +1,193 @@
+---
+id: typography-fonts
+title: "Typography, Web Fonts & Variable Fonts"
+sidebar_label: "Lecture 7"
+sidebar_position: 3
+description: "Master CSS typography fundamentals, font-face declarations, web font performance optimization, vertical rhythm, and modern variable fonts."
+tags: ['css', 'Typography', 'Web Fonts', 'Variable Fonts']
+---
+
+Typography makes up over 90% of the web's content. Mastering web typography requires balancing visual hierarchy, readability, performance, and responsive scaling across devices.
+
+## 1. The Core Typography Stack
+
+CSS provides properties to control every aspect of text rendering.
+
+```
+ββββββββββββββββββββββββββββββββββββββββββββ
+β Line Height β
+β ββββββββββββββββββββββββββββββββββββββ β
+β β Font Size β β
+β β ββββββββββββββββββββββββββββββββ β β
+β β β Letter Spacing (Tracking) β β β
+β β β βββββββββββββββββββββββββ β β β
+β β β β CodeHarborHub Text β β β β
+β β β βββββββββββββββββββββββββ β β β
+β β ββββββββββββββββββββββββββββββββ β β
+β ββββββββββββββββββββββββββββββββββββββ β
+ββββββββββββββββββββββββββββββββββββββββββββ
+```
+
+### Core Property Reference
+
+| Property | Typical Values | Best Practice / Rule |
+| :--- | :--- | :--- |
+| `font-family` | System stacks, Custom web fonts | Always supply generic fallbacks (`sans-serif`, `serif`, `monospace`). |
+| `font-size` | `rem`, `em`, `px`, `clamp()` | Use `rem` for accessibility so user browser zoom preferences are respected. |
+| `line-height` | Unitless multiplier (e.g., `1.5`, `1.2`) | Avoid fixed `px` values. Use `1.2β1.3` for headings and `1.5β1.6` for body copy. |
+| `font-weight` | `100` to `900`, `bold`, `normal` | Ensure custom web fonts support every declared weight. |
+| `letter-spacing` | `em`, `px` | Tighten large headings (`-0.02em`); widen small uppercase text (`0.05em`). |
+
+## 2. System Font Stacks vs. Custom `@font-face`
+
+### System Font Stacks
+
+System stacks load instantaneously with zero network overhead because they rely on pre-installed operating system fonts.
+
+```css
+/* Modern Clean System Sans-Serif Stack */
+body {
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+}
+```
+
+### Loading Web Fonts with `@font-face`
+
+Custom web fonts require explicit `@font-face` definitions. Always prioritize modern, compressed web formats like WOFF2.
+
+```css
+@font-face {
+ font-family: 'Geist';
+ src: url('/fonts/geist-regular.woff2') format('woff2');
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap; /* Prevents Invisible Text (FOIT) */
+}
+```
+
+:::info The font-display Property
+* **swap:** Renders fallbacks immediately and swaps to the web font once loaded (minimizes render blocking).
+* **optional:** Gives the browser a tiny window to download the font; if missed, it stays on the fallback for that session.
+:::
+
+## 3. Modern Variable Fonts
+
+Variable Fonts store multiple typographic variations (weight, width, slant, optical size) within a single file, replacing the need to load multiple static font files (`regular.woff2`, `bold.woff2`, `italic.woff2`).
+
+```css
+/* Loading a single variable font file supporting weights 100 through 900 */
+@font-face {
+ font-family: 'Inter Variable';
+ src: url('/fonts/inter-variable.woff2') format('woff2-variations');
+ font-weight: 100 900;
+}
+
+.heading-dynamic {
+ font-family: 'Inter Variable', sans-serif;
+ /* Precise numeric weight adjustment */
+ font-weight: 650;
+ /* Fine-tuning axis properties */
+ font-variation-settings: 'wght' 650, 'slnt' -5;
+}
+```
+
+## 4. Fluid Typography with `clamp()`
+
+Instead of managing font sizes across multiple `@media` breakpoint rules, use the mathematical `clamp()` function for responsive fluid typography.
+
+$$
+\text{clamp}(\text{MIN}, \text{VAL}, \text{MAX})
+$$
+
+```css
+h1 {
+ /* Min: 2rem (32px), Preferred: 5vw, Max: 3.5rem (56px) */
+ font-size: clamp(2rem, 5vw, 3.5rem);
+ line-height: 1.15;
+ letter-spacing: -0.03em;
+}
+```
+
+## Interactive Playground: Fluid & Variable Typography
+
+Experiment with responsive typography scale, line-height ratios, and letter-spacing adjustments live:
+
+
+
+
+ Design Systems
+
+
+ Fluid Typography is the Future
+
+
+
+ Modern CSS techniques allow layout and typography to scale dynamically relative to the viewport size. This eliminates the need for rigid media queries.
+
+
+
+
+ By using the modern clamp() function, we establish clear minimum and maximum size boundaries. This ensures that text remains highly readable on small mobile screens as well as massive ultra-wide desktop monitors.
+
+
+
+
+`}
+defaultCss={`
+/* Uppercase Category Eyebrow */
+.eyebrow {
+display: inline-block;
+font-size: 0.75rem;
+font-weight: 700;
+letter-spacing: 0.1em;
+text-transform: uppercase;
+color: #38bdf8;
+margin-bottom: 0.5rem;
+}
+
+/* Fluid Heading Scaling /
+.fluid-title {
+/ clamp(min, preferred, max) */
+font-size: clamp(1.75rem, 4vw, 3rem);
+line-height: 1.1;
+font-weight: 800;
+letter-spacing: -0.025em;
+color: #ffffff;
+margin-top: 0;
+margin-bottom: 1rem;
+}
+
+/* Lead Paragraph Typography */
+.lead-body {
+font-size: 1.125rem;
+line-height: 1.5;
+color: #cbd5e1;
+margin-bottom: 1rem;
+}
+
+/* Standard Body Typography */
+.regular-body {
+font-size: 0.95rem;
+line-height: 1.6;
+color: #94a3b8;
+}
+
+.regular-body code {
+color: #38bdf8;
+background-color: rgba(56, 189, 248, 0.1);
+padding: 0.15rem 0.4rem;
+border-radius: 4px;
+}`}
+height="420px"
+/>
+
+## Typographic Best Practices Checklist
+
+|Objective | Recommended Technique | Anti-Pattern |
+|---|---|---|
+| Line Length (Measure) | Keep copy between 45β75 characters per line (`max-width: 65ch`). | Ultra-wide paragraphs stretching full screen width. |
+| Line Height | Body copy: `1.5β1.6`; Headings: `1.1β1.3`. | Using `px` for `line-height` causing text overlapping when resized. |
+| Color Contrast | Maintain at least 4.5:1 WCAG contrast ratio for normal text. | Low contrast light grey text on white backgrounds (`#999999`).|
+| Performance | Load `woff2` formats; set `font-display: swap`. | Loading `.ttf` or `.otf` files without fallback strategies.|
\ No newline at end of file
diff --git a/courses/css/module-3-box-model-layouts/_category_.json b/courses/css/module-3-box-model-layouts/_category_.json
new file mode 100644
index 000000000..e69de29bb
diff --git a/courses/css/module-3-box-model-layouts/lecture-10-flexbox-masterclass.md b/courses/css/module-3-box-model-layouts/lecture-10-flexbox-masterclass.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/courses/css/module-3-box-model-layouts/lecture-11-css-grid-architecture.md b/courses/css/module-3-box-model-layouts/lecture-11-css-grid-architecture.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/courses/css/module-3-box-model-layouts/lecture-8-css-box-model.md b/courses/css/module-3-box-model-layouts/lecture-8-css-box-model.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/courses/css/module-3-box-model-layouts/lecture-9-display-and-positioning.md b/courses/css/module-3-box-model-layouts/lecture-9-display-and-positioning.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/courses/css/module-4-modern-css/_category_.json b/courses/css/module-4-modern-css/_category_.json
new file mode 100644
index 000000000..e69de29bb
diff --git a/courses/css/module-4-modern-css/lecture-12-css-custom-properties.md b/courses/css/module-4-modern-css/lecture-12-css-custom-properties.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/courses/css/module-4-modern-css/lecture-13-responsive-design-media-queries.md b/courses/css/module-4-modern-css/lecture-13-responsive-design-media-queries.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/courses/css/module-4-modern-css/lecture-14-transitions-transforms-animations.md b/courses/css/module-4-modern-css/lecture-14-transitions-transforms-animations.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/courses/html/_category_.json b/courses/html/_category_.json
index 3d1e28d90..380aa6df9 100644
--- a/courses/html/_category_.json
+++ b/courses/html/_category_.json
@@ -1,6 +1,6 @@
{
"label": "HTML",
- "position": 3,
+ "position": 2,
"link": {
"type": "generated-index",
"description": "Getting started with HTML, the language that powers the web."
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 5ed22002b..f3bfeb3f9 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -199,10 +199,11 @@ const config = {
{
type: "html",
value: ``,
},
diff --git a/package-lock.json b/package-lock.json
index 3b778f8af..74cb3c9c6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -59,6 +59,7 @@
"passport": "^0.7.0",
"passport-github": "^1.1.0",
"prism-react-renderer": "^2.3.1",
+ "prismjs": "^1.30.0",
"qr-code-styling": "^1.9.2",
"raw-loader": "^4.0.2",
"react": "^18.0.0",
@@ -69,7 +70,7 @@
"react-phone-input-2": "^2.15.1",
"react-popper": "^2.3.0",
"react-redux": "^9.1.0",
- "react-simple-code-editor": "^0.14.0",
+ "react-simple-code-editor": "^0.14.1",
"react-window": "^1.8.10",
"recharts": "^2.12.7",
"redux": "^5.0.1",
@@ -24326,7 +24327,6 @@
"version": "1.30.0",
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
"integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
- "license": "MIT",
"engines": {
"node": ">=6"
}
@@ -25213,7 +25213,6 @@
"version": "0.14.1",
"resolved": "https://registry.npmjs.org/react-simple-code-editor/-/react-simple-code-editor-0.14.1.tgz",
"integrity": "sha512-BR5DtNRy+AswWJECyA17qhUDvrrCZ6zXOCfkQY5zSmb96BVUbpVAv03WpcjcwtCwiLbIANx3gebHOcXYn1EHow==",
- "license": "MIT",
"peerDependencies": {
"react": ">=16.8.0",
"react-dom": ">=16.8.0"
diff --git a/package.json b/package.json
index 754e47ca9..ead3c8d76 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,7 @@
"passport": "^0.7.0",
"passport-github": "^1.1.0",
"prism-react-renderer": "^2.3.1",
+ "prismjs": "^1.30.0",
"qr-code-styling": "^1.9.2",
"raw-loader": "^4.0.2",
"react": "^18.0.0",
@@ -76,7 +77,7 @@
"react-phone-input-2": "^2.15.1",
"react-popper": "^2.3.0",
"react-redux": "^9.1.0",
- "react-simple-code-editor": "^0.14.0",
+ "react-simple-code-editor": "^0.14.1",
"react-window": "^1.8.10",
"recharts": "^2.12.7",
"redux": "^5.0.1",
diff --git a/src/components/CodePreview/index.jsx b/src/components/CodePreview/index.jsx
new file mode 100644
index 000000000..857f00a7c
--- /dev/null
+++ b/src/components/CodePreview/index.jsx
@@ -0,0 +1,138 @@
+import React, { useState } from 'react';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+import Editor from 'react-simple-code-editor';
+import { highlight, languages } from 'prismjs/components/prism-core';
+import 'prismjs/components/prism-clike';
+import 'prismjs/components/prism-markup';
+import 'prismjs/components/prism-css';
+import 'prismjs/themes/prism-tomorrow.css';
+import styles from './styles.module.css';
+
+function CodePreviewContent({ defaultHtml, defaultCss, height = '320px' }) {
+ const initialHtml = defaultHtml || '\n CodeHarborHub
\n Edit the CSS on the left to update this UI in real-time!
\n';
+ const initialCss = defaultCss || '.card {\n padding: 1.5rem;\n border-radius: 8px;\n background: #2563eb;\n color: white;\n font-family: system-ui, sans-serif;\n}';
+
+ const [html, setHtml] = useState(initialHtml);
+ const [css, setCss] = useState(initialCss);
+ const [activeTab, setActiveTab] = useState('css');
+
+ // Check if code has been modified from the default lesson props
+ const isModified = html !== initialHtml || css !== initialCss;
+
+ const handleReset = () => {
+ setHtml(initialHtml);
+ setCss(initialCss);
+ };
+
+ const srcDoc = `
+
+
+
+
+
+
+ ${html}
+
+
+ `;
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ {activeTab === 'css' ? (
+ setCss(code)}
+ highlight={(code) => highlight(code, languages.css || languages.clike, 'css')}
+ padding={16}
+ className={styles.prismEditor}
+ style={{
+ fontFamily: 'var(--ifm-font-family-monospace)',
+ fontSize: 14,
+ }}
+ />
+ ) : (
+ setHtml(code)}
+ highlight={(code) => highlight(code, languages.markup || languages.clike, 'html')}
+ padding={16}
+ className={styles.prismEditor}
+ style={{
+ fontFamily: 'var(--ifm-font-family-monospace)',
+ fontSize: 14,
+ }}
+ />
+ )}
+
+
+
+
+ Live Preview
+
+
+
+ );
+}
+
+export default function CodePreview(props) {
+ return (
+ Loading Interactive Editor...}>
+ {() =>
+ );
+}
\ No newline at end of file
diff --git a/src/components/CodePreview/styles.module.css b/src/components/CodePreview/styles.module.css
new file mode 100644
index 000000000..e0ed863d2
--- /dev/null
+++ b/src/components/CodePreview/styles.module.css
@@ -0,0 +1,134 @@
+.container {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ border: 1px solid var(--ifm-color-emphasis-300);
+ border-radius: var(--ifm-global-radius);
+ overflow: hidden;
+ margin: 1.5rem 0;
+ background-color: #1d1e22;
+ box-shadow: var(--ifm-global-shadow-lw);
+}
+
+@media (max-width: 768px) {
+ .container {
+ grid-template-columns: 1fr;
+ }
+}
+
+.editorPanel {
+ display: flex;
+ flex-direction: column;
+ border-right: 1px solid var(--ifm-color-emphasis-300);
+ background-color: #1d1e22;
+}
+
+.tabBar {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background-color: #141518;
+ border-bottom: 1px solid #2d2f36;
+ padding-right: 0.75rem;
+}
+
+.tabGroup {
+ display: flex;
+}
+
+.tabBtn {
+ padding: 0.6rem 1.2rem;
+ background: transparent;
+ border: none;
+ font-size: 0.85rem;
+ font-weight: 600;
+ color: #a0a5b1;
+ cursor: pointer;
+ transition: all 0.2s ease;
+}
+
+.tabBtn:hover {
+ color: #ffffff;
+}
+
+.activeTab {
+ background-color: #1d1e22;
+ color: var(--ifm-color-primary-lightest, #60a5fa);
+ border-bottom: 2px solid var(--ifm-color-primary, #2563eb);
+}
+
+.resetBtn {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.35rem;
+ padding: 0.3rem 0.6rem;
+ background: transparent;
+ border: 1px solid #374151;
+ border-radius: 4px;
+ font-size: 0.75rem;
+ font-weight: 600;
+ color: #6b7280;
+ cursor: not-allowed;
+ opacity: 0.5;
+ transition: all 0.2s ease;
+}
+
+.resetActive {
+ color: #f3f4f6;
+ border-color: #4b5563;
+ cursor: pointer;
+ opacity: 1;
+}
+
+.resetActive:hover {
+ background-color: #374151;
+ color: #ffffff;
+}
+
+.resetIcon {
+ display: block;
+}
+
+.editorScrollArea {
+ flex: 1;
+ max-height: 380px;
+ overflow-y: auto;
+ background-color: #1d1e22;
+}
+
+.prismEditor {
+ min-height: 250px;
+ color: #f8f8f2;
+}
+
+.prismEditor textarea {
+ outline: none !important;
+}
+
+.previewPanel {
+ display: flex;
+ flex-direction: column;
+ background-color: #ffffff;
+}
+
+.previewHeader {
+ padding: 0.5rem 1rem;
+ font-size: 0.75rem;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ font-weight: 700;
+ color: #4b5563;
+ background-color: #f3f4f6;
+ border-bottom: 1px solid #e5e7eb;
+}
+
+.previewIframe {
+ width: 100%;
+ border: none;
+ background: #ffffff;
+}
+
+.loadingState {
+ padding: 2rem;
+ text-align: center;
+ color: var(--ifm-color-emphasis-600);
+}
\ No newline at end of file
diff --git a/src/theme/MDXComponents.js b/src/theme/MDXComponents.js
index e0fc1acd0..567ab63e5 100644
--- a/src/theme/MDXComponents.js
+++ b/src/theme/MDXComponents.js
@@ -19,6 +19,7 @@ import Comming from "@site/src/components/Comming";
import Admonition from '@theme/Admonition';
import TOCInline from '@theme/TOCInline';
import CodePenEmbed from '@site/src/components/CodePenEmbed';
+import CodePreview from '@site/src/components/CodePreview';
export default {
// Re-use the default mapping
@@ -42,4 +43,5 @@ export default {
Admonition,
TOCInline,
CodePenEmbed,
+ CodePreview,
};
Card Title
+This is a sample card description.
+ +
+
+
+
+ Internal Navigation
+This is the lead paragraph acting as the main summary for the internal card component.
+This is a secondary paragraph containing an internal dashboard link.
+
+ View Details
+
+
+
+
+
+`}
+defaultCss={`
+
+/* Base Container Styling */
+.challenge-wrapper {
+display: grid;
+gap: 1.5rem;
+padding: 1rem;
+background-color: #0f172a;
+font-family: system-ui, -apple-system, sans-serif;
+}
+
+.card {
+background-color: #1e293b;
+border: 1px solid #334155;
+padding: 1.5rem;
+border-radius: 10px;
+color: #f8fafc;
+}
+
+/* TASK 1.3: Apply border to card IF it contains an external link (https://) /
+/ Write the :has() selector here */
+
+/* TASK 2.1 & 2.2: Fluid Title with clamp() and unitless line-height /
+.card-title {
+/ Replace static font-size with clamp(1.5rem, 4vw, 2.5rem) */
+font-size: 1.5rem;
+line-height: 1.5;
+margin-top: 0.5rem;
+margin-bottom: 0.75rem;
+color: #ffffff;
+}
+
+/* TASK 2.4: Target first paragraph as lead copy */
+.card-body:first-of-type {
+font-size: 1.1rem;
+color: #cbd5e1;
+line-height: 1.6;
+}
+
+.card-body {
+font-size: 0.95rem;
+line-height: 1.6;
+color: #94a3b8;
+}
+
+/* TASK 1.2: Add external link indicator with ::after and ^= */
+a[href^="https://"]::after {
+content: " β";
+color: #38bdf8;
+}
+
+/* Action Buttons & Focus States */
+.card-actions {
+display: flex;
+gap: 1rem;
+margin-top: 1.25rem;
+}
+
+.btn-link, .btn-reset {
+padding: 0.5rem 1rem;
+border-radius: 6px;
+font-size: 0.875rem;
+font-weight: 600;
+text-decoration: none;
+display: inline-block;
+transition: all 0.2s ease;
+}
+
+.btn-link {
+background-color: #2563eb;
+color: #ffffff;
+}
+
+.btn-reset {
+background-color: #334155;
+color: #f8fafc;
+}
+
+/* TASK 2.3: Keyboard accessibility focus-visible ring */
+.btn-link:focus-visible,
+.btn-reset:focus-visible {
+outline: 3px solid #38bdf8;
+outline-offset: 3px;
+}`}
+height="460px"
+/>
+
+## Challenge Verification Matrix
+
+|Challenge | Target Objective | Verification Step |
+|---|---|---|
+|Relational Parent|Style `.card` based on nested external link| Card 1 displays a `#38bdf8` border; Card 2 does not |
+|Attribute Matcher|Append `β` icon to HTTPS links automatically|External link displays generated text node via `::after`|
+|Fluid Clamp |`clamp(1.5rem, 4vw, 2.5rem)` |Resizing preview pane dynamically alters `External Resources
+This is the lead paragraph acting as the main summary for the external resource component.
+Discover advanced layouts by reading the documentation on the MDN Web Docs website.
+
+ Explore CSS
+
+
+ ` font size |
+|Accessibility Focus| Focus ring on keyboard navigation | Pressing `Tab` renders an outlined indicator ring |
diff --git a/courses/css/module-2-selectors-typography/lecture-5-css-selectors.md b/courses/css/module-2-selectors-typography/lecture-5-css-selectors.md
new file mode 100644
index 000000000..87089d810
--- /dev/null
+++ b/courses/css/module-2-selectors-typography/lecture-5-css-selectors.md
@@ -0,0 +1,190 @@
+---
+id: css-selectors
+title: "CSS Selectors"
+sidebar_label: "Lecture 5"
+sidebar_position: 1
+description: "Learn about CSS selectors and how to style text effectively."
+tags: ["css", "lecture", "selectors", "typography"]
+keywords: ["css", "lecture", "selectors", "typography"]
+---
+
+CSS selectors are the targeting system of the web. They instruct the browser rendering engine exactly which DOM nodes to select and style. As layout complexity scales, writing clean, maintainable selectors becomes essential for preventing specificity bloat and redundant rule chains.
+
+## 1. Core Selector Taxonomy
+
+CSS selectors range from fundamental type matchers to advanced functional pseudo-classes:
+
+```txt
+ [ CSS Selectors ]
+ |
+βββββββββββββββββββ¬βββββββ΄ββββββββ¬βββββββββββββββββββ
+βΌ βΌ βΌ βΌ
+Simple Attribute Combinators Pseudo-Classes /
+Selectors Selectors (& Relational) Elements
+(type, class, ([attr=val]) (>, +, ~) (:hover, ::before,
+id, universal) :is(), :has())
+
+```
+
+### Basic & Combinator Reference
+
+| Type | Syntax Example | Description | Specificity Vector |
+| :--- | :--- | :--- | :---: |
+| **Universal** | `*` | Targets every element in the document scope | `(0, 0, 0)` |
+| **Type (Element)** | `h1`, `p`, `article` | Matches nodes by HTML tag name | `(0, 0, 1)` |
+| **Class** | `.card`, `.btn` | Matches nodes with a specific `class` attribute value | `(0, 1, 0)` |
+| **ID** | `#main-header` | Matches the unique element with a specific `id` attribute | `(1, 0, 0)` |
+| **Descendant** | `article p` | Matches `p` anywhere nested inside `article` | `(0, 0, 2)` |
+| **Child** | `ul > li` | Matches `li` that is a direct child of `ul` | `(0, 0, 2)` |
+| **Next Sibling** | `h2 + p` | Matches `p` immediately following `h2` at the same DOM level | `(0, 0, 2)` |
+| **Subsequent Sibling** | `h2 ~ p` | Matches all `p` elements following `h2` at the same DOM level | `(0, 0, 2)` |
+
+## 2. Advanced Attribute Matching
+
+Attribute selectors target elements based on the presence, exact value, or partial matching of their HTML attributes.
+
+```css title="Attribute Selector Examples"
+/* 1. Exact match */
+input[type="text"] { border-color: #cbd5e1; }
+
+/* 2. Contains word in space-separated list (~=) */
+[class~="primary"] { font-weight: 700; }
+
+/* 3. Starts with prefix, followed by hyphen or exact (-=) */
+[lang|="en"] { quotes: "β" "β"; }
+
+/* 4. Starts with exact substring (^=) */
+a[href^="https://"] { color: #059669; }
+
+/* 5. Ends with exact substring ($=) */
+a[href$=".pdf"] { padding-right: 1.5rem; }
+
+/* 6. Contains substring anywhere (*=) */
+[class*="nav-item"] { opacity: 0.9; }
+
+/* 7. Case-insensitive matching flag (i) */
+input[placeholder*="search" i] { background-color: #f1f5f9; }
+```
+
+## 3. Modern Pseudo-Classes: `:is()`, `:where()`, and `:has()`
+
+Modern CSS introduces functional pseudo-classes that dramatically streamline complex rule sets and introduce relational selector logic.
+
+### `:is()` β Grouping & Forgiving Lists
+
+Reduces repetition when applying styles across multiple matching trees. The specificity of `:is()` equals the highest-specificity selector in its argument list.
+
+```css
+/* Legacy repetitive approach */
+header h1, header h2, main h1, main h2 {
+ margin-bottom: 1rem;
+}
+
+/* Modern clean approach with :is() */
+:is(header, main) :is(h1, h2) {
+ margin-bottom: 1rem;
+}
+```
+
+### `:where()` β Zero-Specificity Abstraction
+
+Functions identically to `:is()`, but always maintains a specificity vector of `(0, 0, 0)`, making it ideal for base resets and design systems that users can easily override.
+
+```css
+/* Specificity is strictly (0, 0, 0) regardless of internal arguments */
+:where(header, main) :where(h1, h2) {
+ color: #1e293b;
+}
+
+/* Easily overridden by a single type selector (0, 0, 1) */
+h1 {
+ color: #2563eb;
+}
+```
+
+### `:has()` β The Parent & Relational Selector
+
+Matches a parent element based on its children or sibling relationships.
+
+```css
+/* Target a .card parent ONLY if it contains an image */
+.card:has(img) {
+ grid-template-columns: 120px 1fr;
+}
+
+/* Target an h2 ONLY when directly followed by a sub-heading p */
+h2:has(+ p.subtitle) {
+ margin-bottom: 0.25rem;
+}
+```
+
+## Interactive Playground: Selector Precision
+
+Experiment with basic combinators, attribute matching, and functional pseudo-classes in the sandbox below:
+
+
+
+
+
+ Advanced CSS Selectors
+ This card has an external link. The entire container gets a unique box shadow.
+ Visit External Site
+
+
+
+
+ New
+ Web Development Masters
+ This link ends with "/course", which automatically appends an arrow icon.
+ View our comprehensive
+
+
+
+`}
+defaultCss={`/* 2. Parent Selector (:has) β style container if it contains an external link */
+.card:has(a[href^="https://"]) {
+ box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
+}
+/* 3. Attribute End Substring ($=) */
+a[href$="/course"]::after {
+ content: " β";
+}
+/* 4. Zero Specificity Reset with :where() */
+:where(.card) h3 {
+ margin-top: 0;color: #0f172a;font-family: system-ui, sans-serif;
+}
+/* 5. Child Combinator (>) */
+.card > .badge {
+ display: inline-block;
+ font-size: 0.75rem;
+ padding: 0.25rem 0.5rem;
+ border-radius: 4px;
+ background-color: #cbd5e1;
+ color: #334155;
+}
+/* Base Container Styling */
+.demo-wrapper {
+ display: grid;
+ gap: 1rem;
+ padding: 1rem;
+ background-color: #f8fafc;
+}
+.card {
+ padding: 1.25rem;
+ border-radius: 8px;
+ background-color: #ffffff;
+ border: 1px solid #e2e8f0;
+}`}
+height="420px"
+/>
+
+## Summary Reference Table
+
+| Selector / Pseudo-Class | Primary Use Case | Specificity Impact |
+|---|---|---|
+|`[attr^="val"]`|Matches starting value (e.g., protocol links)|Counts as 1 Class `(0, 1, 0)`|
+|`[attr$="val"]`|Matches ending value (e.g., file extensions)|Counts as 1 Class `(0, 1, 0)`|
+|`:is(A, B)`|Dry up duplicate selector trees|Highest argument in list|
+|`:where(A, B)`|Low-specificity design system defaults|Always zero `(0, 0, 0)`|
+|`:has(Selector)`|Relational parent/sibling conditional styling|Highest argument in condition|
\ No newline at end of file
diff --git a/courses/css/module-2-selectors-typography/lecture-6-pseudo-classes-elements.md b/courses/css/module-2-selectors-typography/lecture-6-pseudo-classes-elements.md
new file mode 100644
index 000000000..4f23374e6
--- /dev/null
+++ b/courses/css/module-2-selectors-typography/lecture-6-pseudo-classes-elements.md
@@ -0,0 +1,194 @@
+---
+id: pseudo-classes-elements
+title: "Pseudo-classes & Pseudo-elements"
+sidebar_label: "Lecture 6"
+sidebar_position: 2
+description: "Learn target states with pseudo-classes and generate non-DOM visual nodes using pseudo-elements for clean, maintainable UI patterns."
+tags: [css, pseudo-classes, elements]
+---
+
+While standard selectors target elements based on their HTML tag, attributes, or structural classes, **pseudo-classes** and **pseudo-elements** allow you to style elements based on dynamic user state, structural position, or virtual sub-parts of the DOM tree.
+
+## 1. Pseudo-classes vs. Pseudo-elements
+
+The core syntax difference lies in the colon notation defined in CSS3 specifications:
+* **Pseudo-classes (`:`)** select existing DOM elements during specific dynamic states or structural conditions.
+* **Pseudo-elements (`::`)** generate virtual abstraction nodes that do not explicitly exist in the HTML source code.
+
+```
+[ Dynamic State or Structural Condition ]
+ β
+ βββββββββββββββ΄ββββββββββββββ
+ βΌ βΌ
+Pseudo-class ( : ) Pseudo-element ( :: )
+Targets an existing node Creates/Targets a virtual sub-node
+Example: a:hover Example: p::before
+```
+
+## 2. Deep Dive: Pseudo-Classes
+
+Pseudo-classes alter an element's appearance based on user interaction, navigation history, or form field status.
+
+### User Action & State Pseudo-Classes
+
+| Pseudo-class | Trigger Condition | Common Use Case |
+| :--- | :--- | :--- |
+| `:hover` | Pointer device moves over element | Interactive button/link state |
+| `:focus` | Keyboard or mouse focuses form input/link | Accessibility outline indicators |
+| `:focus-visible` | Keyboard navigation focuses element (suppresses mouse focus outlines) | Clean modern accessibility indicators |
+| `:active` | Element is currently being clicked/pressed | Tactile "pressed" button feedback |
+| `:disabled` | Form control has `disabled` attribute | Dimmed styling for un-interactive inputs |
+| `:checked` | Checkbox or radio button is selected | Custom toggles and radio UI |
+
+### Structural Pseudo-Classes
+
+Structural pseudo-classes target elements based on their position within their parent container's child list:
+
+* `:first-child` / `:last-child`: Targets the absolute first or last child of a parent.
+* `:nth-child(n)`: Selects elements based on an algebraic formula ($an + b$) or keywords (`odd`, `even`).
+* `:not(selector)`: Negates a matching condition.
+
+```css
+/* Selects every even table row */
+tr:nth-child(even) {
+ background-color: #f8fafc;
+}
+
+/* Selects every 3rd list item starting from index 1 (1, 4, 7...) */
+li:nth-child(3n+1) {
+ font-weight: 700;
+}
+
+/* Styles buttons that DO NOT have the .btn-primary class */
+button:not(.btn-primary) {
+ border: 1px solid #cbd5e1;
+}
+```
+
+## 3. Deep Dive: Pseudo-Elements
+
+Pseudo-elements allow you to style specific fragments of an element's content or inject generated cosmetic elements into the render tree without polluting HTML markup.
+
+### Generated Content (`::before` & `::after`)
+`::before` and `::after` insert inline visual sub-nodes as the first or last child inside the targeted element. They strictly require the content property to render.
+
+```css
+/* Creates a decorative external link arrow */
+a.external-link::after {
+ content: " β";
+ font-size: 0.8em;
+ color: #2563eb;
+}
+
+/* Tooltip container indicator */
+.tooltip::before {
+ content: "";
+ display: block;
+ width: 8px;
+ height: 8px;
+ background-color: #0f172a;
+}
+```
+
+### Typographic & Selection Pseudo-Elements
+* `::first-letter:` Styles the very first letter of a block container (ideal for drop caps).
+* `::first-line:` Styles the first rendered line of text dynamically.
+* `::selection:` Controls the background and text color when a user highlights text on the page.
+
+```css
+::selection {
+ background-color: #38bdf8;
+ color: #0f172a;
+}
+```
+
+## Interactive Playground: State & Generated Content
+
+Test dynamic state pseudo-classes alongside structural pseudo-elements in the live editor:
+
+
+ First item (Highlighted via :first-child)
+ Second item
+ Third item
+ Fourth item (Tagged via :nth-child)
+
+
+
+
+`}
+
+defaultCss={`
+
+/* List Item Pseudo-Classes */
+.custom-list {
+list-style: none;
+padding-left: 0;
+margin-bottom: 1.5rem;
+}
+
+.custom-list li {
+padding: 0.6rem 0.8rem;
+margin-bottom: 0.4rem;
+background-color: #1e293b;
+color: #ccc;
+border-radius: 6px;
+position: relative;
+}
+
+/* Structural :first-child */
+.custom-list li:first-child {
+border-left: 4px solid #38bdf8;
+color: #38bdf8;
+}
+
+/* Structural :nth-child with ::after Generated Content */
+.custom-list li:nth-child(4)::after {
+content: "NEW";
+position: absolute;
+right: 12px;
+font-size: 0.65rem;
+font-weight: 700;
+padding: 0.15rem 0.4rem;
+background-color: #059669;
+color: #ffffff;
+border-radius: 4px;
+}
+
+/* Button State Transitions */
+.btn {
+background-color: #2563eb;
+color: #ffffff;
+border: none;
+padding: 0.6rem 1.2rem;
+border-radius: 6px;
+font-weight: 600;
+cursor: pointer;
+transition: all 0.2s ease;
+margin-right: 0.5rem;
+}
+
+/* Interaction States */
+.btn:hover {
+background-color: #1d4ed8;
+transform: translateY(-1px);
+}
+
+.btn:focus-visible {
+outline: 2px solid #38bdf8;
+outline-offset: 3px;
+}
+
+.btn:active {
+transform: translateY(1px);
+}`}
+height="420px"
+/>
+
+## Best Practices & Gotchas
+
+| Feature | Recommended Practice | Common Anti-Pattern |
+|---|---|---|
+|Colon Notation|Use double colons `::` for pseudo-elements (`::before`) and single colon `:` for pseudo-classes (`:hover`).| Mixing up `::hover` or `:before` across modern codebases.|
+|Accessibility | Pair `:hover` styles with matching `:focus` or `:focus-visible` rules for keyboard users. | Removing outline focus indicators (`outline: none`) without custom alternatives. | Generated Content | Keep decorative visual icons inside `::before` / `::after.Putting` critical semantic textual content inside a CSS `content:""` declaration.|
\ No newline at end of file
diff --git a/courses/css/module-2-selectors-typography/lecture-7-typography-text-styling.md b/courses/css/module-2-selectors-typography/lecture-7-typography-text-styling.md
new file mode 100644
index 000000000..9098201d7
--- /dev/null
+++ b/courses/css/module-2-selectors-typography/lecture-7-typography-text-styling.md
@@ -0,0 +1,193 @@
+---
+id: typography-fonts
+title: "Typography, Web Fonts & Variable Fonts"
+sidebar_label: "Lecture 7"
+sidebar_position: 3
+description: "Master CSS typography fundamentals, font-face declarations, web font performance optimization, vertical rhythm, and modern variable fonts."
+tags: ['css', 'Typography', 'Web Fonts', 'Variable Fonts']
+---
+
+Typography makes up over 90% of the web's content. Mastering web typography requires balancing visual hierarchy, readability, performance, and responsive scaling across devices.
+
+## 1. The Core Typography Stack
+
+CSS provides properties to control every aspect of text rendering.
+
+```
+ββββββββββββββββββββββββββββββββββββββββββββ
+β Line Height β
+β ββββββββββββββββββββββββββββββββββββββ β
+β β Font Size β β
+β β ββββββββββββββββββββββββββββββββ β β
+β β β Letter Spacing (Tracking) β β β
+β β β βββββββββββββββββββββββββ β β β
+β β β β CodeHarborHub Text β β β β
+β β β βββββββββββββββββββββββββ β β β
+β β ββββββββββββββββββββββββββββββββ β β
+β ββββββββββββββββββββββββββββββββββββββ β
+ββββββββββββββββββββββββββββββββββββββββββββ
+```
+
+### Core Property Reference
+
+| Property | Typical Values | Best Practice / Rule |
+| :--- | :--- | :--- |
+| `font-family` | System stacks, Custom web fonts | Always supply generic fallbacks (`sans-serif`, `serif`, `monospace`). |
+| `font-size` | `rem`, `em`, `px`, `clamp()` | Use `rem` for accessibility so user browser zoom preferences are respected. |
+| `line-height` | Unitless multiplier (e.g., `1.5`, `1.2`) | Avoid fixed `px` values. Use `1.2β1.3` for headings and `1.5β1.6` for body copy. |
+| `font-weight` | `100` to `900`, `bold`, `normal` | Ensure custom web fonts support every declared weight. |
+| `letter-spacing` | `em`, `px` | Tighten large headings (`-0.02em`); widen small uppercase text (`0.05em`). |
+
+## 2. System Font Stacks vs. Custom `@font-face`
+
+### System Font Stacks
+
+System stacks load instantaneously with zero network overhead because they rely on pre-installed operating system fonts.
+
+```css
+/* Modern Clean System Sans-Serif Stack */
+body {
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+}
+```
+
+### Loading Web Fonts with `@font-face`
+
+Custom web fonts require explicit `@font-face` definitions. Always prioritize modern, compressed web formats like WOFF2.
+
+```css
+@font-face {
+ font-family: 'Geist';
+ src: url('/fonts/geist-regular.woff2') format('woff2');
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap; /* Prevents Invisible Text (FOIT) */
+}
+```
+
+:::info The font-display Property
+* **swap:** Renders fallbacks immediately and swaps to the web font once loaded (minimizes render blocking).
+* **optional:** Gives the browser a tiny window to download the font; if missed, it stays on the fallback for that session.
+:::
+
+## 3. Modern Variable Fonts
+
+Variable Fonts store multiple typographic variations (weight, width, slant, optical size) within a single file, replacing the need to load multiple static font files (`regular.woff2`, `bold.woff2`, `italic.woff2`).
+
+```css
+/* Loading a single variable font file supporting weights 100 through 900 */
+@font-face {
+ font-family: 'Inter Variable';
+ src: url('/fonts/inter-variable.woff2') format('woff2-variations');
+ font-weight: 100 900;
+}
+
+.heading-dynamic {
+ font-family: 'Inter Variable', sans-serif;
+ /* Precise numeric weight adjustment */
+ font-weight: 650;
+ /* Fine-tuning axis properties */
+ font-variation-settings: 'wght' 650, 'slnt' -5;
+}
+```
+
+## 4. Fluid Typography with `clamp()`
+
+Instead of managing font sizes across multiple `@media` breakpoint rules, use the mathematical `clamp()` function for responsive fluid typography.
+
+$$
+\text{clamp}(\text{MIN}, \text{VAL}, \text{MAX})
+$$
+
+```css
+h1 {
+ /* Min: 2rem (32px), Preferred: 5vw, Max: 3.5rem (56px) */
+ font-size: clamp(2rem, 5vw, 3.5rem);
+ line-height: 1.15;
+ letter-spacing: -0.03em;
+}
+```
+
+## Interactive Playground: Fluid & Variable Typography
+
+Experiment with responsive typography scale, line-height ratios, and letter-spacing adjustments live:
+
+
+
+
+ Design Systems
+
+
+ Fluid Typography is the Future
+
+
+
+ Modern CSS techniques allow layout and typography to scale dynamically relative to the viewport size. This eliminates the need for rigid media queries.
+
+
+
+
+ By using the modern clamp() function, we establish clear minimum and maximum size boundaries. This ensures that text remains highly readable on small mobile screens as well as massive ultra-wide desktop monitors.
+
+
+
+
+`}
+defaultCss={`
+/* Uppercase Category Eyebrow */
+.eyebrow {
+display: inline-block;
+font-size: 0.75rem;
+font-weight: 700;
+letter-spacing: 0.1em;
+text-transform: uppercase;
+color: #38bdf8;
+margin-bottom: 0.5rem;
+}
+
+/* Fluid Heading Scaling /
+.fluid-title {
+/ clamp(min, preferred, max) */
+font-size: clamp(1.75rem, 4vw, 3rem);
+line-height: 1.1;
+font-weight: 800;
+letter-spacing: -0.025em;
+color: #ffffff;
+margin-top: 0;
+margin-bottom: 1rem;
+}
+
+/* Lead Paragraph Typography */
+.lead-body {
+font-size: 1.125rem;
+line-height: 1.5;
+color: #cbd5e1;
+margin-bottom: 1rem;
+}
+
+/* Standard Body Typography */
+.regular-body {
+font-size: 0.95rem;
+line-height: 1.6;
+color: #94a3b8;
+}
+
+.regular-body code {
+color: #38bdf8;
+background-color: rgba(56, 189, 248, 0.1);
+padding: 0.15rem 0.4rem;
+border-radius: 4px;
+}`}
+height="420px"
+/>
+
+## Typographic Best Practices Checklist
+
+|Objective | Recommended Technique | Anti-Pattern |
+|---|---|---|
+| Line Length (Measure) | Keep copy between 45β75 characters per line (`max-width: 65ch`). | Ultra-wide paragraphs stretching full screen width. |
+| Line Height | Body copy: `1.5β1.6`; Headings: `1.1β1.3`. | Using `px` for `line-height` causing text overlapping when resized. |
+| Color Contrast | Maintain at least 4.5:1 WCAG contrast ratio for normal text. | Low contrast light grey text on white backgrounds (`#999999`).|
+| Performance | Load `woff2` formats; set `font-display: swap`. | Loading `.ttf` or `.otf` files without fallback strategies.|
\ No newline at end of file
diff --git a/courses/css/module-3-box-model-layouts/_category_.json b/courses/css/module-3-box-model-layouts/_category_.json
new file mode 100644
index 000000000..e69de29bb
diff --git a/courses/css/module-3-box-model-layouts/lecture-10-flexbox-masterclass.md b/courses/css/module-3-box-model-layouts/lecture-10-flexbox-masterclass.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/courses/css/module-3-box-model-layouts/lecture-11-css-grid-architecture.md b/courses/css/module-3-box-model-layouts/lecture-11-css-grid-architecture.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/courses/css/module-3-box-model-layouts/lecture-8-css-box-model.md b/courses/css/module-3-box-model-layouts/lecture-8-css-box-model.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/courses/css/module-3-box-model-layouts/lecture-9-display-and-positioning.md b/courses/css/module-3-box-model-layouts/lecture-9-display-and-positioning.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/courses/css/module-4-modern-css/_category_.json b/courses/css/module-4-modern-css/_category_.json
new file mode 100644
index 000000000..e69de29bb
diff --git a/courses/css/module-4-modern-css/lecture-12-css-custom-properties.md b/courses/css/module-4-modern-css/lecture-12-css-custom-properties.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/courses/css/module-4-modern-css/lecture-13-responsive-design-media-queries.md b/courses/css/module-4-modern-css/lecture-13-responsive-design-media-queries.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/courses/css/module-4-modern-css/lecture-14-transitions-transforms-animations.md b/courses/css/module-4-modern-css/lecture-14-transitions-transforms-animations.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/courses/html/_category_.json b/courses/html/_category_.json
index 3d1e28d90..380aa6df9 100644
--- a/courses/html/_category_.json
+++ b/courses/html/_category_.json
@@ -1,6 +1,6 @@
{
"label": "HTML",
- "position": 3,
+ "position": 2,
"link": {
"type": "generated-index",
"description": "Getting started with HTML, the language that powers the web."
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 5ed22002b..f3bfeb3f9 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -199,10 +199,11 @@ const config = {
{
type: "html",
value: ``,
},
diff --git a/package-lock.json b/package-lock.json
index 3b778f8af..74cb3c9c6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -59,6 +59,7 @@
"passport": "^0.7.0",
"passport-github": "^1.1.0",
"prism-react-renderer": "^2.3.1",
+ "prismjs": "^1.30.0",
"qr-code-styling": "^1.9.2",
"raw-loader": "^4.0.2",
"react": "^18.0.0",
@@ -69,7 +70,7 @@
"react-phone-input-2": "^2.15.1",
"react-popper": "^2.3.0",
"react-redux": "^9.1.0",
- "react-simple-code-editor": "^0.14.0",
+ "react-simple-code-editor": "^0.14.1",
"react-window": "^1.8.10",
"recharts": "^2.12.7",
"redux": "^5.0.1",
@@ -24326,7 +24327,6 @@
"version": "1.30.0",
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
"integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
- "license": "MIT",
"engines": {
"node": ">=6"
}
@@ -25213,7 +25213,6 @@
"version": "0.14.1",
"resolved": "https://registry.npmjs.org/react-simple-code-editor/-/react-simple-code-editor-0.14.1.tgz",
"integrity": "sha512-BR5DtNRy+AswWJECyA17qhUDvrrCZ6zXOCfkQY5zSmb96BVUbpVAv03WpcjcwtCwiLbIANx3gebHOcXYn1EHow==",
- "license": "MIT",
"peerDependencies": {
"react": ">=16.8.0",
"react-dom": ">=16.8.0"
diff --git a/package.json b/package.json
index 754e47ca9..ead3c8d76 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,7 @@
"passport": "^0.7.0",
"passport-github": "^1.1.0",
"prism-react-renderer": "^2.3.1",
+ "prismjs": "^1.30.0",
"qr-code-styling": "^1.9.2",
"raw-loader": "^4.0.2",
"react": "^18.0.0",
@@ -76,7 +77,7 @@
"react-phone-input-2": "^2.15.1",
"react-popper": "^2.3.0",
"react-redux": "^9.1.0",
- "react-simple-code-editor": "^0.14.0",
+ "react-simple-code-editor": "^0.14.1",
"react-window": "^1.8.10",
"recharts": "^2.12.7",
"redux": "^5.0.1",
diff --git a/src/components/CodePreview/index.jsx b/src/components/CodePreview/index.jsx
new file mode 100644
index 000000000..857f00a7c
--- /dev/null
+++ b/src/components/CodePreview/index.jsx
@@ -0,0 +1,138 @@
+import React, { useState } from 'react';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+import Editor from 'react-simple-code-editor';
+import { highlight, languages } from 'prismjs/components/prism-core';
+import 'prismjs/components/prism-clike';
+import 'prismjs/components/prism-markup';
+import 'prismjs/components/prism-css';
+import 'prismjs/themes/prism-tomorrow.css';
+import styles from './styles.module.css';
+
+function CodePreviewContent({ defaultHtml, defaultCss, height = '320px' }) {
+ const initialHtml = defaultHtml || '\n CodeHarborHub
\n Edit the CSS on the left to update this UI in real-time!
\n';
+ const initialCss = defaultCss || '.card {\n padding: 1.5rem;\n border-radius: 8px;\n background: #2563eb;\n color: white;\n font-family: system-ui, sans-serif;\n}';
+
+ const [html, setHtml] = useState(initialHtml);
+ const [css, setCss] = useState(initialCss);
+ const [activeTab, setActiveTab] = useState('css');
+
+ // Check if code has been modified from the default lesson props
+ const isModified = html !== initialHtml || css !== initialCss;
+
+ const handleReset = () => {
+ setHtml(initialHtml);
+ setCss(initialCss);
+ };
+
+ const srcDoc = `
+
+
+
+
+
+
+ ${html}
+
+
+ `;
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ {activeTab === 'css' ? (
+ setCss(code)}
+ highlight={(code) => highlight(code, languages.css || languages.clike, 'css')}
+ padding={16}
+ className={styles.prismEditor}
+ style={{
+ fontFamily: 'var(--ifm-font-family-monospace)',
+ fontSize: 14,
+ }}
+ />
+ ) : (
+ setHtml(code)}
+ highlight={(code) => highlight(code, languages.markup || languages.clike, 'html')}
+ padding={16}
+ className={styles.prismEditor}
+ style={{
+ fontFamily: 'var(--ifm-font-family-monospace)',
+ fontSize: 14,
+ }}
+ />
+ )}
+
+
+
+
+ Live Preview
+
+
+
+ );
+}
+
+export default function CodePreview(props) {
+ return (
+ Loading Interactive Editor...}>
+ {() =>
+ );
+}
\ No newline at end of file
diff --git a/src/components/CodePreview/styles.module.css b/src/components/CodePreview/styles.module.css
new file mode 100644
index 000000000..e0ed863d2
--- /dev/null
+++ b/src/components/CodePreview/styles.module.css
@@ -0,0 +1,134 @@
+.container {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ border: 1px solid var(--ifm-color-emphasis-300);
+ border-radius: var(--ifm-global-radius);
+ overflow: hidden;
+ margin: 1.5rem 0;
+ background-color: #1d1e22;
+ box-shadow: var(--ifm-global-shadow-lw);
+}
+
+@media (max-width: 768px) {
+ .container {
+ grid-template-columns: 1fr;
+ }
+}
+
+.editorPanel {
+ display: flex;
+ flex-direction: column;
+ border-right: 1px solid var(--ifm-color-emphasis-300);
+ background-color: #1d1e22;
+}
+
+.tabBar {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background-color: #141518;
+ border-bottom: 1px solid #2d2f36;
+ padding-right: 0.75rem;
+}
+
+.tabGroup {
+ display: flex;
+}
+
+.tabBtn {
+ padding: 0.6rem 1.2rem;
+ background: transparent;
+ border: none;
+ font-size: 0.85rem;
+ font-weight: 600;
+ color: #a0a5b1;
+ cursor: pointer;
+ transition: all 0.2s ease;
+}
+
+.tabBtn:hover {
+ color: #ffffff;
+}
+
+.activeTab {
+ background-color: #1d1e22;
+ color: var(--ifm-color-primary-lightest, #60a5fa);
+ border-bottom: 2px solid var(--ifm-color-primary, #2563eb);
+}
+
+.resetBtn {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.35rem;
+ padding: 0.3rem 0.6rem;
+ background: transparent;
+ border: 1px solid #374151;
+ border-radius: 4px;
+ font-size: 0.75rem;
+ font-weight: 600;
+ color: #6b7280;
+ cursor: not-allowed;
+ opacity: 0.5;
+ transition: all 0.2s ease;
+}
+
+.resetActive {
+ color: #f3f4f6;
+ border-color: #4b5563;
+ cursor: pointer;
+ opacity: 1;
+}
+
+.resetActive:hover {
+ background-color: #374151;
+ color: #ffffff;
+}
+
+.resetIcon {
+ display: block;
+}
+
+.editorScrollArea {
+ flex: 1;
+ max-height: 380px;
+ overflow-y: auto;
+ background-color: #1d1e22;
+}
+
+.prismEditor {
+ min-height: 250px;
+ color: #f8f8f2;
+}
+
+.prismEditor textarea {
+ outline: none !important;
+}
+
+.previewPanel {
+ display: flex;
+ flex-direction: column;
+ background-color: #ffffff;
+}
+
+.previewHeader {
+ padding: 0.5rem 1rem;
+ font-size: 0.75rem;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ font-weight: 700;
+ color: #4b5563;
+ background-color: #f3f4f6;
+ border-bottom: 1px solid #e5e7eb;
+}
+
+.previewIframe {
+ width: 100%;
+ border: none;
+ background: #ffffff;
+}
+
+.loadingState {
+ padding: 2rem;
+ text-align: center;
+ color: var(--ifm-color-emphasis-600);
+}
\ No newline at end of file
diff --git a/src/theme/MDXComponents.js b/src/theme/MDXComponents.js
index e0fc1acd0..567ab63e5 100644
--- a/src/theme/MDXComponents.js
+++ b/src/theme/MDXComponents.js
@@ -19,6 +19,7 @@ import Comming from "@site/src/components/Comming";
import Admonition from '@theme/Admonition';
import TOCInline from '@theme/TOCInline';
import CodePenEmbed from '@site/src/components/CodePenEmbed';
+import CodePreview from '@site/src/components/CodePreview';
export default {
// Re-use the default mapping
@@ -42,4 +43,5 @@ export default {
Admonition,
TOCInline,
CodePenEmbed,
+ CodePreview,
};
+
+
+
+ Advanced CSS Selectors
+This card has an external link. The entire container gets a unique box shadow.
+ Visit External Site +
+ New
+
+
+
+`}
+defaultCss={`/* 2. Parent Selector (:has) β style container if it contains an external link */
+.card:has(a[href^="https://"]) {
+ box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
+}
+/* 3. Attribute End Substring ($=) */
+a[href$="/course"]::after {
+ content: " β";
+}
+/* 4. Zero Specificity Reset with :where() */
+:where(.card) h3 {
+ margin-top: 0;color: #0f172a;font-family: system-ui, sans-serif;
+}
+/* 5. Child Combinator (>) */
+.card > .badge {
+ display: inline-block;
+ font-size: 0.75rem;
+ padding: 0.25rem 0.5rem;
+ border-radius: 4px;
+ background-color: #cbd5e1;
+ color: #334155;
+}
+/* Base Container Styling */
+.demo-wrapper {
+ display: grid;
+ gap: 1rem;
+ padding: 1rem;
+ background-color: #f8fafc;
+}
+.card {
+ padding: 1.25rem;
+ border-radius: 8px;
+ background-color: #ffffff;
+ border: 1px solid #e2e8f0;
+}`}
+height="420px"
+/>
+
+## Summary Reference Table
+
+| Selector / Pseudo-Class | Primary Use Case | Specificity Impact |
+|---|---|---|
+|`[attr^="val"]`|Matches starting value (e.g., protocol links)|Counts as 1 Class `(0, 1, 0)`|
+|`[attr$="val"]`|Matches ending value (e.g., file extensions)|Counts as 1 Class `(0, 1, 0)`|
+|`:is(A, B)`|Dry up duplicate selector trees|Highest argument in list|
+|`:where(A, B)`|Low-specificity design system defaults|Always zero `(0, 0, 0)`|
+|`:has(Selector)`|Relational parent/sibling conditional styling|Highest argument in condition|
\ No newline at end of file
diff --git a/courses/css/module-2-selectors-typography/lecture-6-pseudo-classes-elements.md b/courses/css/module-2-selectors-typography/lecture-6-pseudo-classes-elements.md
new file mode 100644
index 000000000..4f23374e6
--- /dev/null
+++ b/courses/css/module-2-selectors-typography/lecture-6-pseudo-classes-elements.md
@@ -0,0 +1,194 @@
+---
+id: pseudo-classes-elements
+title: "Pseudo-classes & Pseudo-elements"
+sidebar_label: "Lecture 6"
+sidebar_position: 2
+description: "Learn target states with pseudo-classes and generate non-DOM visual nodes using pseudo-elements for clean, maintainable UI patterns."
+tags: [css, pseudo-classes, elements]
+---
+
+While standard selectors target elements based on their HTML tag, attributes, or structural classes, **pseudo-classes** and **pseudo-elements** allow you to style elements based on dynamic user state, structural position, or virtual sub-parts of the DOM tree.
+
+## 1. Pseudo-classes vs. Pseudo-elements
+
+The core syntax difference lies in the colon notation defined in CSS3 specifications:
+* **Pseudo-classes (`:`)** select existing DOM elements during specific dynamic states or structural conditions.
+* **Pseudo-elements (`::`)** generate virtual abstraction nodes that do not explicitly exist in the HTML source code.
+
+```
+[ Dynamic State or Structural Condition ]
+ β
+ βββββββββββββββ΄ββββββββββββββ
+ βΌ βΌ
+Pseudo-class ( : ) Pseudo-element ( :: )
+Targets an existing node Creates/Targets a virtual sub-node
+Example: a:hover Example: p::before
+```
+
+## 2. Deep Dive: Pseudo-Classes
+
+Pseudo-classes alter an element's appearance based on user interaction, navigation history, or form field status.
+
+### User Action & State Pseudo-Classes
+
+| Pseudo-class | Trigger Condition | Common Use Case |
+| :--- | :--- | :--- |
+| `:hover` | Pointer device moves over element | Interactive button/link state |
+| `:focus` | Keyboard or mouse focuses form input/link | Accessibility outline indicators |
+| `:focus-visible` | Keyboard navigation focuses element (suppresses mouse focus outlines) | Clean modern accessibility indicators |
+| `:active` | Element is currently being clicked/pressed | Tactile "pressed" button feedback |
+| `:disabled` | Form control has `disabled` attribute | Dimmed styling for un-interactive inputs |
+| `:checked` | Checkbox or radio button is selected | Custom toggles and radio UI |
+
+### Structural Pseudo-Classes
+
+Structural pseudo-classes target elements based on their position within their parent container's child list:
+
+* `:first-child` / `:last-child`: Targets the absolute first or last child of a parent.
+* `:nth-child(n)`: Selects elements based on an algebraic formula ($an + b$) or keywords (`odd`, `even`).
+* `:not(selector)`: Negates a matching condition.
+
+```css
+/* Selects every even table row */
+tr:nth-child(even) {
+ background-color: #f8fafc;
+}
+
+/* Selects every 3rd list item starting from index 1 (1, 4, 7...) */
+li:nth-child(3n+1) {
+ font-weight: 700;
+}
+
+/* Styles buttons that DO NOT have the .btn-primary class */
+button:not(.btn-primary) {
+ border: 1px solid #cbd5e1;
+}
+```
+
+## 3. Deep Dive: Pseudo-Elements
+
+Pseudo-elements allow you to style specific fragments of an element's content or inject generated cosmetic elements into the render tree without polluting HTML markup.
+
+### Generated Content (`::before` & `::after`)
+`::before` and `::after` insert inline visual sub-nodes as the first or last child inside the targeted element. They strictly require the content property to render.
+
+```css
+/* Creates a decorative external link arrow */
+a.external-link::after {
+ content: " β";
+ font-size: 0.8em;
+ color: #2563eb;
+}
+
+/* Tooltip container indicator */
+.tooltip::before {
+ content: "";
+ display: block;
+ width: 8px;
+ height: 8px;
+ background-color: #0f172a;
+}
+```
+
+### Typographic & Selection Pseudo-Elements
+* `::first-letter:` Styles the very first letter of a block container (ideal for drop caps).
+* `::first-line:` Styles the first rendered line of text dynamically.
+* `::selection:` Controls the background and text color when a user highlights text on the page.
+
+```css
+::selection {
+ background-color: #38bdf8;
+ color: #0f172a;
+}
+```
+
+## Interactive Playground: State & Generated Content
+
+Test dynamic state pseudo-classes alongside structural pseudo-elements in the live editor:
+
+Web Development Masters
+This link ends with "/course", which automatically appends an arrow icon.
+ View our comprehensive +Fluid Typography is the Future
+ + ++ Modern CSS techniques allow layout and typography to scale dynamically relative to the viewport size. This eliminates the need for rigid media queries. +
+ + +
+ By using the modern clamp() function, we establish clear minimum and maximum size boundaries. This ensures that text remains highly readable on small mobile screens as well as massive ultra-wide desktop monitors.
+
\n
';
+ const initialCss = defaultCss || '.card {\n padding: 1.5rem;\n border-radius: 8px;\n background: #2563eb;\n color: white;\n font-family: system-ui, sans-serif;\n}';
+
+ const [html, setHtml] = useState(initialHtml);
+ const [css, setCss] = useState(initialCss);
+ const [activeTab, setActiveTab] = useState('css');
+
+ // Check if code has been modified from the default lesson props
+ const isModified = html !== initialHtml || css !== initialCss;
+
+ const handleReset = () => {
+ setHtml(initialHtml);
+ setCss(initialCss);
+ };
+
+ const srcDoc = `
+
+
+
+
+
+
+ ${html}
+
+
+ `;
+
+ return (
+ CodeHarborHub
\nEdit the CSS on the left to update this UI in real-time!
\n
+
+ );
+}
+
+export default function CodePreview(props) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {activeTab === 'css' ? (
+ setCss(code)}
+ highlight={(code) => highlight(code, languages.css || languages.clike, 'css')}
+ padding={16}
+ className={styles.prismEditor}
+ style={{
+ fontFamily: 'var(--ifm-font-family-monospace)',
+ fontSize: 14,
+ }}
+ />
+ ) : (
+ setHtml(code)}
+ highlight={(code) => highlight(code, languages.markup || languages.clike, 'html')}
+ padding={16}
+ className={styles.prismEditor}
+ style={{
+ fontFamily: 'var(--ifm-font-family-monospace)',
+ fontSize: 14,
+ }}
+ />
+ )}
+
+
+
+ Live Preview
+
+