01. What CSS Is and How to Add It

CSS (Cascading Style Sheets) controls the visual presentation of HTML documents. While HTML provides semantic meaning and content structure (headings, paragraphs, buttons, forms), CSS handles typography, colors, responsive layouts, spacing, and micro-interactions.

1.1 The Three Ways to Add CSS

There are three primary methods to inject CSS into an HTML webpage:

Method 1

Inline Styles

Applied directly on individual HTML elements via the style attribute. Avoid in production due to lack of reusability.

<p style="color: red; font-size: 20px;">Hello</p>

Method 2

Internal Stylesheet

Defined inside a <style> block inside the document <head>. Useful for single-page standalone documents.

<head>
  <style>
    p { color: red; }
  </style>
</head>

Method 3 ★ Best Practice

External Stylesheet

Linked via a <link> tag pointing to a dedicated .css file. Enables browser caching, modularity, and clean separation of concerns.

<head>
  <link rel="stylesheet" href="styles.css">
</head>

1.2 Basic CSS Syntax & Rule Anatomy

Every CSS rule consists of a selector and a declaration block enclosed in curly braces:

/* Anatomy of a CSS Rule */
selector {
  property: value;      /* Declaration 1 */
  property-two: value;  /* Declaration 2 */
}

/* Real-world example */
h1 {
  color: #1e3a8a;       /* Deep navy blue */
  font-size: 32px;
  line-height: 1.25;
}

02. Selectors: How You Target Elements

Selectors determine which HTML elements your styling rules apply to. Mastering combinators, pseudo-classes, and pseudo-elements allows you to write clean, maintainable styles without cluttering HTML with unnecessary helper classes.

/* 1. Element Selector: Targets all matching tag names */
p { color: #1f2937; }

/* 2. Class Selector: Targets elements with class="highlight" (reusable) */
.highlight { background-color: #fef08a; }

/* 3. ID Selector: Targets a single unique element with id="header" */
#header { background-color: #1e40af; }

/* 4. Universal Selector: Targets every element on the page */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* 5. Group Selector: Shares rules across multiple selectors */
h1, h2, h3 { font-family: 'Inter', system-ui, sans-serif; }

/* 6. Descendant Selector (space): Any <p> anywhere inside a <div> */
div p { color: #4b5563; }

/* 7. Child Selector (>): Only DIRECT child <p> elements */
div > p { color: #15803d; }

/* 8. Adjacent Sibling (+): The <p> immediately following an <h1> */
h1 + p { font-weight: 600; font-size: 1.125rem; }

/* 9. General Sibling (~): All <p> siblings following an <h1> */
h1 ~ p { color: #6b21a8; }

/* 10. Attribute Selectors: Match based on HTML attributes */
input[type="text"] { border: 1px solid #d1d5db; border-radius: 6px; }
a[target="_blank"] { color: #dc2626; }

/* 11. Pseudo-classes: Match dynamic UI states */
a:hover { color: #ea580c; text-decoration: underline; }
input:focus { outline: 2px solid #2563eb; }
li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; }
li:nth-child(2) { background-color: #f3f4f6; }
li:nth-child(odd) { background-color: #fafafa; }

/* 12. Pseudo-elements: Target sub-parts of an element or inject visual accents */
p::first-line { font-weight: bold; font-size: 1.1rem; }
p::before { content: "→ "; color: #3b82f6; }
p::after { content: " ★"; color: #eab308; }

Example — Combining Selectors for Clean UI:

<div class="card">
  <h2>Product Title</h2>
  <p>First paragraph — acts as a lead summary.</p>
  <p>Second paragraph — detailed description.</p>
</div>

.card h2 { color: #0f766e; }
.card p:first-of-type { font-style: italic; font-size: 1.05rem; }

03. The Box Model & box-sizing: border-box

In CSS, every visible HTML element is rendered as a rectangular box. The box model is composed of four distinct concentric layers:

Margin (Space outside border)

Border (Border line)

Padding (Space inside border around text)

Content (Text, Images, Video)

.box {
  width: 200px;
  height: 100px;
  padding: 20px;          /* Inner space around content */
  border: 5px solid #111; /* Surrounding stroke */
  margin: 30px;           /* External distance pushing away siblings */
}

/* The Essential Modern CSS Reset:
   By default (content-box), width = content only.
   Adding 20px padding + 5px border makes total width = 200 + 40 + 10 = 250px!
   'border-box' locks total computed width to 200px. */
*, *::before, *::after {
  box-sizing: border-box;
}

Clockwise Shorthand Notation

Margin and padding share the clockwise direction order: Top → Right → Bottom → Left (TRBL).

/* 4 Values: top | right | bottom | left */
margin: 10px 20px 15px 5px;

/* 2 Values: top/bottom | left/right */
margin: 10px 20px;

/* 1 Value: all 4 sides */
margin: 10px;

/* Individual side overrides */
padding-top: 5px;
padding-right: 15px;

04. Colors, Units, and Values

CSS offers multiple ways to define color values and responsive length units.

.colors {
  color: red;                       /* Named Keyword */
  color: #ff0000;                   /* 6-digit Hexadecimal */
  color: #f00;                      /* 3-digit Shorthand Hex */
  color: rgb(255, 0, 0);            /* RGB (Red, Green, Blue) */
  color: rgba(255, 0, 0, 0.5);      /* RGB + Alpha (50% opacity) */
  color: hsl(0, 100%, 50%);         /* Hue (0-360), Saturation (%), Lightness (%) */
  color: hsla(0, 100%, 50%, 0.5);   /* HSL + Alpha */
}

CSS Length Units Comparison

Unit	Type	Relative To	Practical Example
px	Absolute	Screen pixels	border: 1px solid #ccc;
%	Relative	Parent container's dimensions	width: 50%;
em	Relative	Direct parent font size (compounds!)	padding: 1.5em;
rem	Relative	Root (<html>) font size (Usually 16px)	font-size: 1.25rem; (20px)
vw / vh	Viewport	1% of browser viewport width / height	min-height: 100vh;
vmin / vmax	Viewport	Smaller / larger of viewport width or height	font-size: 4vmin;

05. Typography & Custom Web Fonts

Clean typography forms 90% of web design. CSS gives you complete control over font weights, line rhythm, letter spacing, and text casing.

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 1rem;            /* 16px base */
  font-weight: 400;           /* 100 (Thin) to 900 (Black) */
  line-height: 1.6;           /* Relative line height for readable paragraphs */
  letter-spacing: -0.01em;    /* Tighten headings, relax body */
  text-align: left;           /* left | right | center | justify */
  text-transform: capitalize; /* uppercase | lowercase | capitalize */
  text-decoration: none;      /* underline | line-through | none */
}

/* Loading Custom Self-Hosted Web Fonts with @font-face */
@font-face {
  font-family: 'CustomSans';
  src: url('/fonts/custom-sans.woff2') format('woff2'),
       url('/fonts/custom-sans.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap; /* Avoid Flash of Invisible Text (FOIT) */
}

h1 {
  font-family: 'CustomSans', sans-serif;
  font-size: 2.5rem;
  letter-spacing: -0.03em;
}

06. Backgrounds, Gradients & Rounded Borders (CSS3)

CSS3 introduced high-performance background styling, linear/radial gradients, border radiuses, and depth shadows.

.card {
  background-color: #ffffff;
  background-image: url('/assets/pattern.svg');
  background-size: cover;          /* cover | contain | auto | 100% 100% */
  background-position: center;     /* x y coordinate positioning */
  background-repeat: no-repeat;

  border: 1px solid #e5e7eb;
  border-radius: 1rem;             /* 16px rounded corners */
  
  /* box-shadow: x-offset | y-offset | blur-radius | spread-radius | color */
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1),
              0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* Gradients in CSS3 */
.linear-gradient {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
}

.radial-gradient {
  background: radial-gradient(circle at center, #60a5fa, #1e3a8a);
}

/* Image Overlay with Multi-Background Stacking */
.hero {
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
              url('/assets/hero.jpg') center/cover no-repeat;
}

07. Display & Positioning (Absolute, Fixed, Sticky)

Understanding how elements flow into the document and how to position modals, floating buttons, and sticky headers is crucial for every UI engineer.

Display Types:

display: block; — Starts on a new line and takes 100% available container width (e.g. <div>, <p>).
display: inline; — Flows horizontally with text. Ignores width, height, top/bottom margins (e.g. <span>, <a>).
display: inline-block; — Flows inline with text, but respects custom width, height, padding, and margins.
display: none; — Completely removes element from DOM rendering and accessibility tree without taking space.

CSS Positioning Paradigms:

/* 1. static (Default): Follows normal page document flow */
.normal { position: static; }

/* 2. relative: Offset from its normal position; creates positioning context for children */
.parent {
  position: relative;
  top: 10px;
  left: 5px;
}

/* 3. absolute: Removed from flow; positioned relative to nearest ancestor with position != static */
.badge {
  position: absolute;
  top: -8px;
  right: -8px;
}

/* 4. fixed: Locked to viewport window; stays permanently visible during scroll */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
}

/* 5. sticky: Scrolls normally until reaching threshold (e.g., top: 0), then sticks! */
.sticky-header {
  position: sticky;
  top: 0;
  z-index: 50;
}

08. Flexbox: The 1D Layout System

Flexbox (Flexible Box Layout) is designed for 1-dimensional layouts (either a single row or a single column). It excels at aligning items, distributing available space, and handling dynamic content sizes.

.flex-container {
  display: flex;
  flex-direction: row;        /* row | column | row-reverse | column-reverse */
  justify-content: center;    /* Main Axis: flex-start | center | flex-end | space-between | space-around | space-evenly */
  align-items: center;        /* Cross Axis: flex-start | center | flex-end | stretch | baseline */
  flex-wrap: wrap;            /* nowrap | wrap | wrap-reverse */
  gap: 1.5rem;                /* Gap between flex items */
}

/* Child item controls */
.flex-item {
  /* flex: [flex-grow] [flex-shrink] [flex-basis] */
  flex: 1 1 200px;
  align-self: flex-start;     /* Individual item cross-axis alignment override */
}

Real-World Responsive Navbar Example:

<nav class="navbar">
  <div class="brand">OutlineDev</div>
  <ul class="nav-links">
    <li><a href="#courses">Courses</a></li>
    <li><a href="#mentors">Mentors</a></li>
    <li><a href="#pricing">Pricing</a></li>
  </ul>
  <button class="btn-primary">Get Started</button>
</nav>

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}

09. CSS Grid: The 2D Multi-Column Layout Master

While Flexbox is 1D (rows or columns), CSS Grid is a true 2D layout engine that arranges elements in both rows and columns simultaneously.

/* 1. Basic 3-Column Grid using Fractional Units (fr) */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* Middle column twice as wide */
  grid-template-rows: auto 1fr auto;
  gap: 24px;
}

/* 2. Responsive Auto-Fitting Gallery (Zero Media Queries!) */
.responsive-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

/* 3. Named Grid Areas — Highly Readable Layouts */
.dashboard-layout {
  display: grid;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
  grid-template-columns: 260px 1fr;
  grid-template-rows: 70px 1fr 50px;
  min-height: 100vh;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer  { grid-area: footer; }

10. CSS3 Transitions for Fluid Hover States

Transitions let you smoothly interpolate property changes over time rather than jumping abruptly between states.

/* Transition Shorthand: property duration timing-function delay */
.button {
  background-color: #3b82f6;
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  
  /* Smoothly transition background and transform on hover */
  transition: background-color 0.25s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.button:hover {
  background-color: #1d4ed8;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.button:active {
  transform: translateY(0);
}

11. 2D & 3D Transforms (translate, rotate, scale, skew)

Transforms modify the coordinate space of CSS elements using hardware acceleration without triggering expensive document reflows.

.box {
  transform: translate(20px, 10px);  /* Move along X and Y */
  transform: rotate(15deg);          /* Rotate clockwise */
  transform: scale(1.1);             /* Zoom in by 10% */
  transform: skew(10deg, 5deg);      /* Slant */

  /* Chaining multiple transforms */
  transform: translate(10px, -5px) rotate(4deg) scale(1.05);
}

/* 3D Perspective Card Flip Effect */
.card-3d-wrapper {
  perspective: 1000px; /* Establishes 3D depth context */
}

.card-3d {
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}

.card-3d-wrapper:hover .card-3d {
  transform: rotateY(180deg);
}

12. CSS3 Keyframe Animations (@keyframes)

While transitions interpolate between two states on user trigger, @keyframes enable continuous, multi-step standalone animations.

/* 1. Define Keyframes */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-18px);
  }
}

@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(59, 130, 246, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  }
}

/* 2. Apply to Element */
/* Shorthand: name duration timing-function delay iteration-count direction fill-mode */
.notification-badge {
  animation: pulseGlow 2s infinite ease-out;
}

.jumping-icon {
  animation: bounce 1s ease-in-out infinite;
}

/* Page load fadeIn */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(15px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-banner {
  animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

13. Responsive Design & Mobile-First Media Queries

Mobile-First Architecture: Write default CSS for smartphones (0px+), then add @media (min-width: ...) queries to progressively enhance layouts for tablets and wide screens.

/* 1. Base Mobile Styles (0px - 767px) */
.container {
  width: 100%;
  padding: 1rem;
}

.nav-links {
  display: none; /* Collapsed mobile drawer */
}

/* 2. Tablet & Small Laptop (min-width: 768px) */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
  }
  .nav-links {
    display: flex;
  }
}

/* 3. Desktop & Wide Monitors (min-width: 1024px) */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem;
  }
}

14. CSS Custom Properties (Variables) & Dark Mode

CSS Variables (Custom Properties) are dynamic, cascade down the DOM, and can be modified on the fly with JavaScript or media queries.

/* 1. Declare Global Design Tokens on :root */
:root {
  --primary-color: #4f46e5;
  --primary-hover: #4338ca;
  --bg-color: #ffffff;
  --text-color: #111827;
  --border-radius: 0.75rem;
  --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* 2. Dark Mode Override using @media (prefers-color-scheme) or class */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #0f172a;
    --text-color: #f8fafc;
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  }
}

/* 3. Usage throughout CSS */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

.btn {
  background-color: var(--primary-color);
  border-radius: var(--border-radius);
  color: white;
}

.btn:hover {
  background-color: var(--primary-hover);
}

15. Modern Helpers: clamp(), calc(), :has(), object-fit

Modern CSS engines offer mathematical functions and parent-aware selectors that eliminate lines of boilerplate JavaScript.

/* 1. Fluid Typography with clamp(min, preferred, max) */
/* Scales smoothly between 24px and 48px depending on viewport width */
h1 {
  font-size: clamp(1.5rem, 4vw + 1rem, 3rem);
}

/* 2. calc() for Mixed Units */
.sidebar-layout {
  width: calc(100% - 280px);
}

/* 3. min() and max() Boundary Clamping */
.responsive-modal {
  width: min(90vw, 640px);
}

/* 4. aspect-ratio — Lock Video & Image Proportions */
.video-player {
  aspect-ratio: 16 / 9;
  width: 100%;
}

/* 5. object-fit & object-position for Clean Image Cropping */
.avatar {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
}

/* 6. The :has() Parent Selector (CSS Game-Changer!) */
/* Style the card container if it contains an image */
.card:has(img) {
  padding-top: 0;
}

/* Change navbar background if active modal exists */
body:has(.modal-open) {
  overflow: hidden;
}

16. Putting It Together: Full Responsive Layout

Here is a complete, runnable HTML & CSS blueprint combining custom variables, Flexbox navbars, Grid cards, and keyframe animations into a unified architecture.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS3 Modern Architecture Demo</title>
  <style>
    :root {
      --primary: #6366f1;
      --primary-hover: #4f46e5;
      --bg-surface: #ffffff;
      --text-main: #0f172a;
      --text-muted: #64748b;
      --radius: 12px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background-color: #f8fafc;
      color: var(--text-main);
      line-height: 1.5;
    }

    .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem 2rem;
      background-color: var(--bg-surface);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    .hero {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 5rem 1.5rem;
      background: linear-gradient(135deg, var(--primary), #a855f7);
      color: white;
    }

    .hero h1 {
      font-size: clamp(2rem, 5vw, 3.5rem);
      margin-bottom: 1rem;
    }

    .cards-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 1.5rem;
      max-width: 1200px;
      margin: -2rem auto 4rem auto;
      padding: 0 1.5rem;
    }

    .card {
      background: var(--bg-surface);
      border-radius: var(--radius);
      padding: 1.75rem;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.07);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .card:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.12);
    }
  </style>
</head>
<body>
  <nav class="navbar">
    <strong>OutlineDev</strong>
    <span>CSS3 Masterclass</span>
  </nav>
  <header class="hero">
    <h1>Modern CSS3 Architecture</h1>
    <p>Built with CSS Variables, Flexbox, and CSS Grid.</p>
  </header>
  <main class="cards-grid">
    <div class="card"><h3>01. Flexbox 1D</h3><p>Perfect alignment along single row or column axes.</p></div>
    <div class="card"><h3>02. CSS Grid 2D</h3><p>Responsive multi-column galleries with auto-fit.</p></div>
    <div class="card"><h3>03. Custom Tokens</h3><p>Dynamic variables powering dark mode theming.</p></div>
  </main>
</body>
</html>

17. Interactive Homework & Coding Challenges

Test your understanding with these three real-world frontend challenges.

Challenge 1

Build a Centered Modal with Pure CSS

Task: Center a 400px wide modal card horizontally and vertically on screen using both (A) Flexbox and (B) Absolute positioning with transforms.

View Solution & Explanation

/* Approach A: Modern Flexbox Wrapper */
.modal-overlay {
  position: fixed;
  inset: 0; /* top: 0; right: 0; bottom: 0; left: 0; */
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-card { width: min(90vw, 400px); background: white; border-radius: 12px; }

/* Approach B: Absolute + 50% Translate */
.modal-card-standalone {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(90vw, 400px);
}

Challenge 2

Responsive Image Gallery without Media Queries

Task: Create a gallery where cards shrink/expand smoothly. On mobile they stack 1 per row, on tablet 2 per row, and on wide screens 4 per row — without using a single @media breakpoint.

View Solution & Explanation

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}
.gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
}

Challenge 3

Pulsing Call-To-Action (CTA) Button

Task: Create a primary button that radiates an infinite, expanding glow ring using CSS @keyframes and ::after pseudo-element.

View Solution & Explanation

.btn-pulse {
  position: relative;
  background: #10b981;
  color: white;
  padding: 0.875rem 2rem;
  border-radius: 9999px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

.btn-pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid #10b981;
  animation: pulseRing 1.8s cubic-bezier(0.24, 0, 0.38, 1) infinite;
}

@keyframes pulseRing {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

CSS & CSS3: The Complete Step-by-Step Guide for Frontend Developers (Beginner to Advanced)

CSS & CSS3: The Complete Step-by-Step Guide

01. What CSS Is and How to Add It

1.1 The Three Ways to Add CSS

Inline Styles

Internal Stylesheet

External Stylesheet

1.2 Basic CSS Syntax & Rule Anatomy

02. Selectors: How You Target Elements

Example — Combining Selectors for Clean UI:

03. The Box Model & box-sizing: border-box

Clockwise Shorthand Notation

04. Colors, Units, and Values

CSS Length Units Comparison

05. Typography & Custom Web Fonts

06. Backgrounds, Gradients & Rounded Borders (CSS3)

07. Display & Positioning (Absolute, Fixed, Sticky)

Display Types:

CSS Positioning Paradigms:

08. Flexbox: The 1D Layout System

Real-World Responsive Navbar Example:

09. CSS Grid: The 2D Multi-Column Layout Master

10. CSS3 Transitions for Fluid Hover States

11. 2D & 3D Transforms (translate, rotate, scale, skew)

12. CSS3 Keyframe Animations (@keyframes)

13. Responsive Design & Mobile-First Media Queries

14. CSS Custom Properties (Variables) & Dark Mode

15. Modern Helpers: clamp(), calc(), :has(), object-fit

16. Putting It Together: Full Responsive Layout

17. Interactive Homework & Coding Challenges

Build a Centered Modal with Pure CSS

Responsive Image Gallery without Media Queries

Pulsing Call-To-Action (CTA) Button