Pixel Perfect: HTML and CSS from Zero to Pro
Complete HTML5 and CSS3 course: from first tag to professional web development. Flexbox, Grid, responsive design, animations, SCSS, BEM, accessibility, and modern CSS 2025.
Course Curriculum
Semantic tags: <header>, <nav>, <main>, <footer>
10 tasks
Sections and Articles: <section>, <article>, <aside>
10 tasks
Headings: <h1>-<h6> and Page Hierarchy
8 tasks
Text Tags: p, strong, em, span, br
6 tasks
Lists: `<ul>`, `<ol>`, `<li>`, `<dl>`, `<dt>`, `<dd>`
8 tasks
Links with `<a>`: Addresses, Anchors, and Behavior
9 tasks
Images: <img> and the alt attribute
6 tasks
Tables: table, thead, tbody, tr, td, th
7 tasks
Media: video, audio, picture, and source
6 tasks
Forms: <form>, <input>, <label>, <button>
10 tasks
Input Types: text, email, tel, number, date, checkbox, radio
8 tasks
`<select>`, `<textarea>`, `<fieldset>`, and `<legend>`
6 tasks
Module Final Project: HTML Portfolio
8 tasks
Connecting CSS With link, style, and Inline Styles
8 tasks
Type, Class, and ID Selectors
6 tasks
Combined Selectors: Descendants, Direct Children, and Siblings
6 tasks
Attribute Selectors: [attr], [attr="val"], [attr^="val"]
8 tasks
Specificity: How the Browser Chooses a CSS Rule
10 tasks
Cascade: Style Sources and Order
8 tasks
Inheritance: What Is Inherited and What Is Not
7 tasks
CSS units: px, %, em, rem
8 tasks
Viewport units: vw, vh, vmin, vmax, dvh
8 tasks
CSS Color: hex, rgb(), and rgba()
9 tasks
CSS Color: hsl(), oklch(), color-mix(), and currentColor
8 tasks
DevTools: Working With CSS
8 tasks
Module Final Project: Styled Portfolio
7 tasks
Box Model: Content, Padding, Border, Margin
7 tasks
`box-sizing: border-box`: why it became the standard
7 tasks
display: block, inline, and inline-block
6 tasks
`display: none` vs `visibility: hidden` vs `opacity: 0`
9 tasks
CSS Sizing: width, height, min and max limits
8 tasks
`overflow`: `hidden`, `scroll`, `auto`, `clip`
8 tasks
`position: static` and `position: relative`
8 tasks
position: absolute and z-index
8 tasks
position: fixed
6 tasks
position: sticky
6 tasks
`margin: auto` and Block Centering
7 tasks
Module Final Project: Card Interface
6 tasks
What Flexbox Is: Container and Items
8 tasks
`flex-direction`: row, column, and reverse values
8 tasks
`justify-content`: main-axis alignment
8 tasks
`align-items`: alignment on the cross axis
8 tasks
`flex-wrap` and `align-content`
6 tasks
`gap`, `row-gap`, `column-gap`
6 tasks
`flex-grow`: how elements expand
10 tasks
`flex-shrink`: How Flex Items Shrink
8 tasks
`flex-basis` and the `flex` shorthand
10 tasks
`align-self` and `order`
10 tasks
Holy Grail Layout Pattern with Flexbox
10 tasks
Pattern: Perfect Centering with Flexbox
8 tasks
Module Final Project: Flexbox Landing Page
7 tasks
What CSS Grid Is: Rows And Columns
7 tasks
`grid-template-columns` and the `fr` Unit
6 tasks
`grid-template-rows` and `auto`
8 tasks
`gap` in CSS Grid
10 tasks
`grid-column` and `grid-row`: placing items
8 tasks
`grid-template-areas`: Named Areas
7 tasks
`minmax()`: Adaptive Columns
8 tasks
`auto-fill` and `auto-fit`: automatic columns
8 tasks
`justify-items`, `align-items`, and `place-items` in Grid
10 tasks
`justify-content` and `align-content` in Grid
6 tasks
`justify-self`, `align-self`, `place-self`
6 tasks
`dense` packing with `grid-auto-flow: dense`
7 tasks
Subgrid: Aligning Nested Grid Elements
6 tasks
Grid and Flexbox: When to Use Each
5 tasks
Module Final Project: Analytics Dashboard
7 tasks
Viewport: What It Is and Why It Matters
6 tasks
Mobile-first approach: why it is the standard
7 tasks
Media Queries: `@media` Syntax
6 tasks
Standard Breakpoints: Mobile, Tablet, Desktop
6 tasks
Responsive Typography: `clamp()` for Font Sizes
5 tasks
Responsive Images: srcset, sizes, and picture
6 tasks
Responsive Flexbox: flex-wrap and Media Queries
7 tasks
Responsive Grid: auto-fit and Media Queries
6 tasks
Media Queries for Dark Theme: `prefers-color-scheme`
5 tasks
`prefers-reduced-motion`: Respecting User Preferences
6 tasks
DevTools: Device Emulation
6 tasks
Module Project: Responsive Portfolio
6 tasks
Declaring and Using CSS Variables
6 tasks
:root and global variables
6 tasks
Fallback Values: var(--x, fallback)
6 tasks
CSS Variables and JavaScript: setProperty
6 tasks
Dark Theme with Variables and `data-theme`
6 tasks
Design Tokens: Colors, Spacing, Radii, and Shadows
6 tasks
Module Final Project: Design System with Themes
6 tasks
`font-family`, System Fonts, and Font Stack
6 tasks
Google Fonts: Loading and Optimization
6 tasks
`@font-face`: self-hosting a font
5 tasks
`font-display`: font loading strategies
5 tasks
Variable Fonts: One File for a Range of Styles
8 tasks
`font-size`, `line-height`, `letter-spacing`, and `word-spacing`
7 tasks
`font-weight`, `font-style`, and `font-variant`
7 tasks
`text-transform`, `text-decoration`, `text-shadow`
8 tasks
Text Truncation: `text-overflow: ellipsis` and `line-clamp`
6 tasks
Module Final Project: Typography System
6 tasks
`::before` and `::after`: decorative content
6 tasks
Typographic pseudo-elements: first line, first letter, and selection
6 tasks
The `::placeholder`, `::marker`, and `::backdrop` Pseudo-elements
6 tasks
State Pseudo-classes: :hover, :focus, :active
6 tasks
Form pseudo-classes: :checked, :disabled, :valid, :invalid, :placeholder-shown
7 tasks
Structural pseudo-classes: :first-child, :last-child, and :nth-child()
5 tasks
:nth-of-type(), :only-child, :empty, and :not()
6 tasks
:is(), :where(), and :has(): modern pseudo-classes
6 tasks
`:focus-visible` vs `:focus`: Smart Focus
5 tasks
`:target`: Styling Anchor Navigation
6 tasks
Module Final Project: Interactive Components
8 tasks
`transition`: Basic Transitions
6 tasks
`transition-timing-function`: Easing Functions
5 tasks
What to Animate Cheaply: Compositor-Only Properties
7 tasks
`@keyframes`: CSS Animation Syntax
5 tasks
`animation`: applying `@keyframes`
6 tasks
`animation-fill-mode`: states before and after animation
6 tasks
`animation-play-state`: Pausing and Starting Animations
7 tasks
Fade-in on Viewport Entry
6 tasks
`prefers-reduced-motion`: Safe Animations
5 tasks
Module Final Project: Animated Hero and Loader
6 tasks
Moving Elements with transform: translate()
6 tasks
`scale()`: Scaling
6 tasks
`rotate()` and `skew()`
6 tasks
`transform-origin`: Transform Point
6 tasks
Multiple Transform Functions
7 tasks
`perspective` and 3D Space
6 tasks
rotateX(), rotateY(), rotateZ(), and translateZ()
6 tasks
`backface-visibility`: the reverse side of a 3D card
7 tasks
Module Final Project: 3D Flip Cards
5 tasks
`calc()`: Calculations in CSS
7 tasks
`min()` and `max()`: Limiting Values
6 tasks
`clamp()`: Fluid Scaling
6 tasks
Container Queries: @container
6 tasks
Container Size Units: cqi and cqb
6 tasks
:has() as a Parent Selector
7 tasks
:is() and :where(): Grouping Selectors
6 tasks
CSS Nesting: Native Nesting Without a Preprocessor
6 tasks
@layer: Cascade Layers
6 tasks
Module Final Project: Modern Component
5 tasks
Basic SVG Syntax
6 tasks
SVG Shapes: `<rect>`, `<circle>`, `<ellipse>`, `<line>`, `<path>`
5 tasks
Embedding SVG: <img> vs inline vs <use>
5 tasks
Styling SVG with CSS: fill, stroke, currentColor
5 tasks
CSS Animations for SVG
6 tasks
Responsive SVG: preserveAspectRatio
6 tasks
Module Final Project: SVG Icons and Illustration
5 tasks
CSS Scroll Snap: scroll-snap-type
5 tasks
`scroll-snap-align` and `scroll-snap-stop`
7 tasks
`scroll-padding` and `scroll-margin`
6 tasks
Controlling Scroll with overscroll-behavior
5 tasks
CSS Logical Properties: inline and block
6 tasks
Logical Properties: `padding-block`, `border-inline`, `inset-block`
5 tasks
Module Project: Snap Slider and RTL Component
5 tasks
Why Accessibility Matters: WCAG 2.1 AA
6 tasks
Semantics: the First Layer of Accessibility
5 tasks
ARIA Roles: role, aria-label, and aria-labelledby
5 tasks
ARIA States: aria-expanded, aria-hidden, aria-live
6 tasks
Keyboard Focus and Navigation
6 tasks
Color Contrast: Tools and Metrics
6 tasks
Screen reader testing with VoiceOver and NVDA
6 tasks
`prefers-reduced-motion` and `prefers-contrast`
5 tasks
Module Final Project: Portfolio A11y Audit
6 tasks