Day 2: CSS Styling

Dive into styling with Cascading Style Sheets — colors, layouts, animations, and responsive design.

Today's Lessons

1 Introduction to CSS

What is CSS? How does it work with HTML to style web pages?

Start here →

2 CSS Syntax

Rules, declarations, properties, and values — the language of CSS.

Fundamentals →

3 CSS Selectors

Target elements with class, ID, attribute, and pseudo-selectors.

Targeting elements →

4 Box Model

Content, padding, border, and margin — the foundation of layout.

Layout basics →

5 Typography

Font families, sizes, weights, line-height, and text decoration.

Text styling →

6 Colors

Hex, RGB, HSL, opacity, and color theory for web design.

Color systems →

7 CSS Variables & Functions

Custom properties, calc(), min(), max(), and clamp().

Dynamic values →

8 Backgrounds

Background colors, images, gradients, and positioning.

Visual effects →

9 Units & Shadows

px, em, rem, vw, vh, and box/text shadow effects.

Sizing & depth →

10 Animations

Transitions, keyframes, and bringing elements to life.

Motion design →

11 Positioning

Static, relative, absolute, fixed, sticky — element placement.

Element placement →

12 Flexbox

One-dimensional layouts with flexible alignment and distribution.

Flex layouts →

13 CSS Grid

Two-dimensional layouts with rows, columns, and areas.

Grid layouts →

14 Responsive Design

Media queries, mobile-first, and adapting to any screen size.

Multi-device →