Lecture 01 · Foundations

What is CSS?

Beginner ~30 min No prerequisites

Definition & History

CSS (Cascading Style Sheets) is the language used to describe the presentation of a document written in HTML or XML. It defines how elements are rendered on screen, paper, or in other media.

1994 – First CSS 1 specification released.
1998 – CSS 2 added positioning, media queries, and more.
2011 – CSS 3 split into modular “levels” (Flexbox, Grid, Animations, etc.).

✅ Quick fact

The “cascading” part means that multiple style rules can apply to the same element, and the browser decides which one wins based on specificity and source order.

Hello World – Minimal HTML + CSS

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Demo</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: #f4f4f4;
            margin: 2rem;
        }
        h1 {
            color: #f97316;
        }
    </style>
</head>
<body>
    <h1>Hello, CSS!</h1>
    <p>This paragraph inherits the body’s font and background.</p>
</body>
</html>

🎯 Exercise 1.1

Create a file called index.html, paste the snippet above, open it in a browser and verify the colours and fonts. Experiment by changing the color and background values.

Lecture 02 · Foundations

Including CSS

Beginner ~35 min Requires: Lecture 01

Three ways to add CSS

Inline style – <h1 style="color:red;">…</h1>
Embedded style sheet – inside <style> tags in the <head>.
External stylesheet – linked with <link rel="stylesheet" href="styles.css">.

External stylesheet best practice

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

The external file keeps markup clean and enables caching across pages.

styles.css

/* Global reset */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Open Sans', sans-serif;
    background: #fafafa;
    color: #333;
    line-height: 1.6;
}

🎯 Exercise 2.1

Create an index.html that links to an external styles.css file. Add a few HTML elements (headings, paragraphs, a list) and style them globally (fonts, colours, spacing).

Lecture 03 · Foundations

Selectors

Beginner ~45 min Requires: Lecture 02

Basic selector types

Element selector – p { … }
Class selector – .card { … }
ID selector – #main { … }
Universal selector – * { … }

Combinators & hierarchy

Combinator	Example	Meaning
Descendant ( )	`ul li`	any `li` inside a `ul`
Child (`>`)	`nav > a`	direct children only
Adjacent sibling (`+`)	`h2 + p`	the first `p` after an `h2`
General sibling (`~`)	`h2 ~ p`	any `p` after an `h2`

Attribute selectors

a[href^="https"] { text-decoration: underline; }
input[type="text"] { border: 1px solid #ccc; }

selector-demo.css

/* Element + class */
nav .nav-item {
    display: block;
    padding: 0.5rem 1rem;
    color: #666;
}

/* ID selector */
#hero {
    background: url('hero.jpg') center/cover;
    color: #fff;
    text-align: center;
    padding: 4rem 0;
}

/* Attribute selector */
a[target="_blank"] {
    position: relative;
}
a[target="_blank"]::after {
    content: "↗";
    font-size: 0.8rem;
    margin-left: 0.2rem;
}

🎯 Exercise 3.1

Write a stylesheet that styles:

All h2 elements with a bottom border.
Any link that points to an external site (starts with http) with a small arrow after it.
Paragraphs that are the first child of a section with a different text colour.

Lecture 04 · Foundations

Box Model & Positioning

Beginner ~45 min Requires: Lecture 03

CSS Box Model

Every element is a rectangular box with four parts (from inside‑out):

Content – the actual text or image.
Padding – space inside the border.
Border – outlines the element.
Margin – space outside the border.

box-model.css

.box {
    width: 200px;
    padding: 20px;
    border: 2px solid #f97316;
    margin: 30px;
    background: #fff;
}

Box‑sizing

Set box-sizing: border-box; so width includes padding and border – easier layout calculations.

Positioning schemes

Position	Key properties	Behaviour
`static`	—	Normal flow (default).
`relative`	`top / right / bottom / left`	Shifted relative to its original spot.
`absolute`	`top / right / …`	Removed from flow; positioned against nearest positioned ancestor.
`fixed`	`top / …`	Anchored to the viewport.
`sticky`	`top / …`	Acts like `relative` until scroll reaches the threshold, then becomes `fixed`.

Example – sticky header

header {
    position: sticky;
    top: 0;
    background: #111;
    color: #fff;
    padding: 1rem;
    z-index: 10;
}

🎯 Exercise 4.1

Create a page with a header, a sidebar and a content area. Use position: fixed for the header, position: sticky for a sub‑navigation inside the sidebar, and practice padding/margin changes to see how the box model works.

Lecture 05 · Foundations

Flexbox

Beginner ~45 min Requires: Lecture 04

Why Flexbox?

Flexbox provides a one‑dimensional layout model (row or column) that makes aligning, spacing and reordering items trivial.

Key properties

display: flex; – establishes a flex container.
flex-direction – row (default) or column.
justify-content – alignment on the main axis (e.g. center, space-between).
align-items – alignment on the cross axis.
flex, flex-grow, flex-shrink, flex-basis – control item sizing.
gap – space between flex items (modern browsers).

flex-demo.css

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #111827;
    padding: 1rem 2rem;
    gap: 1.5rem;
}
.nav a {
    color: #e2e8f0;
    text-decoration: none;
}
.nav a:hover {
    color: #38bdf8;
}

Simple responsive navigation bar

<nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
</nav>

🎯 Exercise 5.1

Build a three‑column layout using Flexbox that collapses into a single column on screens narrower than 600 px (use a media query to change flex-direction).

Lecture 06 · Core Concepts

CSS Grid

Intermediate ~55 min Requires: Lecture 05

Two‑dimensional layout

CSS Grid lets you define rows and columns and place items precisely in that matrix.

Defining a grid container

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);   /* 4 equal columns */
    grid-template-rows: auto 200px auto;     /* three rows */
    gap: 1rem;
}

Placing items

.item‑a { grid-column: 1 / 3; grid-row: 1; }
.item‑b { grid-column: 3 / 5; grid-row: 1 / 3; }
.item‑c { grid-column: 1;   grid-row: 2; }

grid-demo.css

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 150px;
    gap: 1rem;
}
.grid > div {
    background: #38bdf8;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}
.item‑large {
    grid-column: 1 / span 2;
    background: #f97316;
}

Responsive grid example

@media (max-width: 800px) {
    .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
    .grid { grid-template-columns: 1fr; }
}

🎯 Exercise 6.1

Design a simple photo‑gallery using CSS Grid: a 4‑column layout on desktop, 2‑column on tablets, and 1‑column on mobile. Add a hover overlay that shows the image caption.

Lecture 07 · Core Concepts

Typography & Fonts

Intermediate ~45 min Requires: Lecture 06

Font‑family stacks

body {
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}

Web‑safe vs web‑fonts

Web‑safe – fonts that are pre‑installed on most OSes (Arial, Times, Verdana, …).
Web‑fonts – delivered via @font-face or services like Google Fonts.

Google Fonts example

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

body {
    font-family: 'Roboto', sans-serif;
}

Text properties

Property	Values
`font-size`	`16px`, `1rem`, `clamp(1rem,2vw,2rem)`
`font-weight`	`400`, `700`, `bold`
`line-height`	`1.5`, `150%`
`letter-spacing`	`0.05em`
`text-align`	`left`, `center`, `justify`

Responsive typography with `clamp()`

h1 {
    font-size: clamp(2rem, 5vw, 4rem);
}

🎯 Exercise 7.1

Import a Google Font, set a typographic scale (h1‑h6) using clamp(), and create a paragraph with a custom line‑height and letter‑spacing. Verify the result at different viewport widths.

Lecture 08 · Core Concepts

Custom Properties (CSS Variables)

Intermediate ~40 min Requires: Lecture 07

Defining & using variables

:root {
    --primary: #f97316;
    --bg: #fafafa;
    --text: #111827;
}
body {
    background: var(--bg);
    color: var(--text);
}
a {
    color: var(--primary);
}

Scope & inheritance

Variables obey the normal cascade – a variable defined on a parent is available to its children unless overridden.

Theme switching (simple JavaScript example)

/* CSS */
:root {
    --bg: #fafafa;
    --text: #111;
}
.dark {
    --bg: #111;
    --text: #fafafa;
}

/* JS */
document.getElementById('theme-btn')
        .addEventListener('click', () => document.body.classList.toggle('dark'));

🎯 Exercise 8.1

Build a colour‑scheme switcher: define a light and a dark theme using custom properties, add a button that toggles the theme, and ensure all elements (background, text, links, borders) adapt correctly.

Lecture 09 · Advanced

Transitions & Animations

Intermediate ~50 min Requires: Lecture 08

CSS Transitions

.btn {
    background: var(--primary);
    color: #fff;
    padding: 0.75rem 1.5rem;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s;
}
.btn:hover {
    background: #fb923c;
    transform: translateY(-2px);
}

Keyframe animations

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.icon {
    animation: spin 2s linear infinite;
}

Animating multiple properties

.pulse {
    animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
    0%   { transform: scale(1);   opacity: 1; }
    50%  { transform: scale(1.1); opacity: .7; }
    100% { transform: scale(1);   opacity: 1; }
}

🎯 Exercise 9.1

Create a button that on hover fades its background colour, slides upwards, and adds a subtle box‑shadow. Also make an SVG icon that continuously rotates using a keyframe animation.

Lecture 10 · Advanced

Responsive Design

Intermediate ~55 min Requires: Lecture 09

Media Queries

@media (max-width: 992px) {
    .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .grid { grid-template-columns: 1fr; }
}

Mobile‑first approach

Start with the default (mobile) styles, then use min-width breakpoints to add features for larger screens.

/* Base (mobile) */
.container { padding: 1rem; }

/* Tablet */
@media (min-width: 600px) {
    .container { padding: 2rem; }
}

/* Desktop */
@media (min-width: 992px) {
    .container { padding: 3rem; }
}

Fluid typography with `clamp()`

html {
    font-size: clamp(14px, 1vw, 18px);
}

Responsive images

<img src="small.jpg"
     srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w"
     sizes="(max-width: 600px) 480px,
            (max-width: 900px) 768px,
            1200px"
     alt="Responsive example">

🎯 Exercise 10.1

Turn the three‑column layout from Lecture 5 into a fully responsive layout that collapses to two columns at 800 px and to a single column at 500 px. Add a responsive navigation bar that switches to a hamburger menu (you can reuse the existing sidebar toggle).

Lecture 11 · Advanced

SCSS & Pre‑processors

Intermediate ~45 min Requires: Lecture 10

Why preprocess?

Variables ($primary: #f97316;)
Nesting – clearer hierarchy.
Mixins – reusable blocks of CSS.
Functions – compute values.
Partial files & imports for modular code.

Variables & nesting example

$primary: #f97316;
$spacing: 1rem;

body {
    font-family: 'Open Sans', sans-serif;
    color: #111;
    a {
        color: $primary;
        &:hover { color: darken($primary, 10%); }
    }
    .section {
        padding: $spacing * 2;
    }
}

Mixin for clearfix

@mixin clearfix {
   &::after {
       content: "";
       display: table;
       clear: both;
   }
}
.container { @include clearfix; }

Using partials

// _variables.scss
$primary: #f97316;

// main.scss
@import 'variables';
@import 'components/buttons';

🎯 Exercise 11.1

Set up a simple SCSS project (you can use an online compiler like SassMeister). Create a _buttons.scss partial with a mixin that generates primary, secondary and disabled button styles. Import the partial into a main stylesheet and demonstrate the three button variants in HTML.

Lecture 12 · Capstone

Capstone Project – Responsive Landing Page

Advanced ~90 min Requires: All Lectures

Build a **single‑page landing site** that showcases everything you’ve learned:

Semantic HTML structure (header, hero, features, testimonial, footer).
External stylesheet using CSS variables for a colour scheme.
Flexbox for the navigation bar and testimonial carousel.
CSS Grid for the feature cards.
Responsive typography with clamp().
Transition effects on buttons and links.
Keyframe animation for a decorative element.
Responsive media queries for mobile, tablet, desktop.
Optional SCSS source files (if you prefer a pre‑processor).

Project skeleton

index.html
styles/
   │─ main.css
   │─ components/
   │     └─ _buttons.css
   └─ utils/
         └─ _variables.css
assets/
   ├─ img/
   └─ fonts/

Starter HTML (feel free to expand)