HTML5
& CSS3

/* ── CONTAINER ── */
.flex-container {
  display: flex;
  flex-direction: row;        /* row | column | row-reverse | column-reverse */
  flex-wrap: wrap;            /* nowrap | wrap | wrap-reverse */
  justify-content: space-between; /* main-axis alignment */
  align-items: center;       /* cross-axis alignment */
  align-content: flex-start;  /* multi-line cross-axis */
  gap: 16px 12px;             /* row-gap column-gap */
}

/* ── CHILDREN ── */
.flex-item {
  flex-grow: 1;               /* how much extra space to absorb */
  flex-shrink: 0;             /* 0 = don't shrink */
  flex-basis: 200px;          /* initial size */
  flex: 1 0 200px;            /* shorthand: grow shrink basis */
  align-self: flex-end;       /* override parent align-items */
  order: 2;                   /* visual reordering */
}

/* ── CONTAINER ── */
.grid {
  display: grid;

  /* Named column tracks */
  grid-template-columns: repeat(3, 1fr);

  /* Named row tracks */
  grid-template-rows: 80px auto 60px;

  /* Named areas 
     — match via grid-area on children */
  grid-template-areas:
    "header header header"
    "sidebar main   main"
    "footer footer footer";

  gap: 16px;

  /* Auto-responsive columns */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* ── ITEMS ── */
.header { grid-area: header; }
.sidebar{ grid-area: sidebar; }

.span-two {
  grid-column: span 2;   /* span 2 column tracks */
  grid-row: 1 / 3;        /* rows 1 through 3 */
}

/* Mobile-first approach (recommended) */
.layout {
  display: grid;
  grid-template-columns: 1fr; /* single column on mobile */
}

/* Tablet */
@media (min-width: 768px) {
  .layout { grid-template-columns: 1fr 1fr; }
}

/* Desktop */
@media (min-width: 1024px) {
  .layout { grid-template-columns: 240px 1fr 1fr; }
}

/* Dark mode preference */
@media (prefers-color-scheme: dark) {
  body { background: #111; color: #eee; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; }
}

/* Print */
@media print {
  .sidebar, .ads { display: none; }
}

/* Orientation */
@media (orientation: landscape) { ... }

/* Container Queries (CSS4) */
.card-wrapper { container-type: inline-size; }
@container (min-width: 400px) {
  .card { flex-direction: row; }
}

/* Linear — angle, position, to side */
background: linear-gradient(135deg, #00e5ff, #7cfc00);
background: linear-gradient(to right, red, blue);

/* Multi-stop */
background: linear-gradient(to right,
  #ff6b6b 0%,
  #ffb347 25%,
  #00e5ff 75%,
  #7cfc00 100%);

/* Radial — shape at position */
background: radial-gradient(circle at center, cyan, navy);
background: radial-gradient(ellipse at top, #b392f0, #111);

/* Conic — sweeps around a center point */
background: conic-gradient(red, blue, green, red);
background: conic-gradient(from 45deg, cyan 90deg, navy 90deg);

/* Gradient on text! */
h1 {
  background: linear-gradient(90deg, #00e5ff, #7cfc00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Grid pattern using multiple gradients */
background:
  linear-gradient(#ccc 1px, transparent 1px),
  linear-gradient(90deg, #ccc 1px, transparent 1px),
  white;
background-size: 24px 24px;

/* ── TRANSITIONS ── */
.button {
  transition: all 0.3s ease;

  /* Fine-grained: property duration easing delay */
  transition:
    background 0.3s ease,
    transform  0.2s cubic-bezier(0.34,1.56,0.64,1),
    box-shadow 0.3s ease;
}

/* ── @KEYFRAMES ── */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-30px); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.element {
  animation-name: bounce;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
  animation-delay: 0.2s;

  /* Shorthand */
  animation: bounce 1s ease-in-out 0.2s infinite alternate;

  /* Multiple animations separated by comma */
  animation: spin 2s linear infinite, morph 4s ease infinite;
}

/* Typewriter using steps() */
.typewriter {
  overflow: hidden;
  border-right: 2px solid cyan;
  white-space: nowrap;
  animation: typing 3s steps(30, end) infinite;
}
@keyframes typing {
  from { width: 0; }
  to   { width: 100%; }
}

/* Individual transforms */
transform: translateX(20px);
transform: translateY(-50%);      /* % = % of element itself */
transform: translate(-50%, -50%); /* centering trick */
transform: rotate(45deg);
transform: scale(1.2);
transform: scaleX(-1);            /* horizontal flip */
transform: skewX(15deg);
transform: skewY(5deg);

/* Chained — applied right to left */
transform: rotate(30deg) scale(1.1) translateX(10px);

/* Origin point */
transform-origin: top left;
transform-origin: 50% 0;  /* top center */

/* 3D Transforms */
transform: rotateY(45deg);
transform: perspective(400px) rotateY(30deg);
transform-style: preserve-3d;
perspective: 800px;           /* on parent for 3D context */

/* Individual transform properties (newer) */
translate: 10px 20px;
rotate: 45deg;
scale: 1.2;

img {
  /* Single */
  filter: blur(4px);
  filter: brightness(0.5);      /* 0=black, 1=normal, 2=2× bright */
  filter: contrast(200%);
  filter: grayscale(100%);
  filter: hue-rotate(90deg);
  filter: invert(1);
  filter: opacity(0.5);
  filter: saturate(3);
  filter: sepia(100%);
  filter: drop-shadow(4px 4px 8px rgba(0,0,0,.5));

  /* Stacked filters (applied left-to-right) */
  filter: contrast(1.4) saturate(1.8) brightness(0.9);

  /* Hover effect: color → greyscale */
  filter: grayscale(100%);
  transition: filter 0.4s;
}
img:hover { filter: grayscale(0%); }

/* backdrop-filter — blur behind an element */
.glass-card {
  backdrop-filter: blur(12px) saturate(1.5);
  background: rgba(255,255,255,0.1);
}

/* Basic shapes */
clip-path: circle(50%);
clip-path: ellipse(50% 35% at 50% 50%);
clip-path: inset(10px 20px round 8px);

/* Polygon — list of x/y vertices */
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

/* Diagonal section divider */
.hero {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

/* Animated clip-path */
.expand {
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 0.5s ease;
}
.expand:hover {
  clip-path: circle(100% at 50% 50%);
}

/* SVG path reference */
clip-path: path("M10,30 A20,20,0,0,1,50,30 ...");

/* ── DEFINITION ── */
:root {
  --primary: #00e5ff;
  --primary-dark: hsl(188, 90%, 30%);
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --radius: 10px;
  --shadow: 0 8px 32px rgba(0,0,0,0.3);
}

/* ── USAGE ── */
.card {
  background: var(--primary);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--spacing-md);

  /* Fallback value */
  color: var(--text-color, #ffffff);
}

/* ── LOCAL SCOPE ── */
.danger-card {
  --primary: #ff6b6b; /* overrides for this element + children */
}

/* ── JAVASCRIPT ACCESS ── */
// Read
getComputedStyle(document.documentElement)
  .getPropertyValue('--primary');

// Write
document.documentElement.style
  .setProperty('--primary', '#ff6b6b');

/* ── CALC WITH VARIABLES ── */
.container {
  --cols: 3;
  width: calc(100% / var(--cols) - var(--spacing-md));
}

/* calc() — arithmetic with mixed units */
.sidebar {
  width: calc(33.33% - 24px);
  height: calc(100vh - 60px);
  margin: calc(var(--gap) * 2);
}

/* min() — use the smallest value */
.card   { width: min(400px, 90%); }

/* max() — use the largest value */
.btn    { padding: 0 max(20px, 3vw); }

/* clamp(min, preferred, max) — fluid sizing */
h1 {
  font-size: clamp(1.5rem, 5vw, 4rem);
}
.container {
  padding: clamp(16px, 4vw, 60px);
}

/* env() — safe areas (mobile notch) */
.app {
  padding-bottom: env(safe-area-inset-bottom, 16px);
}

/* color functions */
color: rgb(0 229 255);
color: hsl(188 100% 50%);
color: oklch(0.75 0.2 200);   /* perceptual */
color: color-mix(in srgb, cyan 60%, navy);

<form novalidate>
  <!-- Built-in validation -->
  <input type="email"
         required
         minlength="5"
         placeholder="user@example.com">

  <!-- Pattern regex -->
  <input type="text"
         pattern="[A-Z]{3}-[0-9]{4}"
         title="Format: ABC-1234">

  <!-- Datalist autocomplete -->
  <input list="colors" placeholder="Pick a color">
  <datalist id="colors">
    <option value="Red">
    <option value="Green">
    <option value="Blue">
  </datalist>

  <!-- meter and progress -->
  <meter value="0.6" low="0.3" high="0.8" optimum="1"></meter>
  <progress value="65" max="100"></progress>

  <!-- CSS-only validation styling -->
</form>
/* :valid / :invalid pseudo-classes */
input:valid:not(:placeholder-shown)   { border-color: lime; }
input:invalid:not(:placeholder-shown) { border-color: red;  }

const canvas = document.getElementById('myCanvas');
const ctx    = canvas.getContext('2d');

/* Rectangles */
ctx.fillStyle    = '#00e5ff';
ctx.fillRect(10, 10, 100, 60);        // x,y,w,h
ctx.strokeRect(10, 10, 100, 60);      // outline only
ctx.clearRect(0, 0, canvas.width, canvas.height);

/* Paths */
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 100);
ctx.lineTo(50, 150);
ctx.closePath();
ctx.stroke();                          // draw outline
ctx.fill();                            // fill inside

/* Circles / arcs */
ctx.beginPath();
ctx.arc(200, 100, 50, 0, Math.PI * 2); // cx,cy,r,start,end
ctx.fill();

/* Text */
ctx.font        = 'bold 24px DM Mono';
ctx.fillStyle  = 'white';
ctx.fillText('Hello Canvas', 50, 50);

/* Gradients on canvas */
const grad = ctx.createLinearGradient(0,0,200,0);
grad.addColorStop(0,   '#00e5ff');
grad.addColorStop(1,   '#7cfc00');
ctx.fillStyle = grad;

/* Transform the canvas context */
ctx.save();
ctx.translate(100, 100);
ctx.rotate(Math.PI / 4);
ctx.scale(1.5, 1.5);
ctx.restore();

/* Animation loop */
function loop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  draw();
  requestAnimationFrame(loop);
}