CSS Fundamentals

Learn what CSS is, how it works alongside HTML and JavaScript, and what you'll build in this course.

Install VS Code, create your project folder, connect a CSS file, and get Live Server running before writing your first line of CSS.

Target HTML elements precisely using tag, class, and ID selectors to style specific sections.

Use hex codes, RGB, RGBA, and background images to bring your Netflix clone to life.

Set background colors on any element using hex codes, color names, and RGBA to start building the dark Netflix look.

Use linear and radial gradients to blend colors, create dramatic backgrounds, and overlay images with the technique used by Netflix and every modern landing page.

Use the font-family property to choose a typeface, set fallback stacks, and mix fonts across headings and body text.

Add beautiful free fonts to any project in thirty seconds using Google Fonts and the font-family property.

Control text size using px, rem, and em — and learn which unit to reach for and why.

Control text thickness and italics using font-weight and font-style to create visual hierarchy on your page.

Control text alignment, decoration, transformation, and letter spacing to polish every line of text on your page.

Control the vertical space between lines of text to make your page comfortable and easy to read.

Add breathing room inside your elements using padding — the space between your content and the edges of its box.

Add space outside your elements using margin — and learn the margin: 0 auto trick for centering anything on the page.

Add lines around your elements using border — control the width, style, and color, and learn the ghost button pattern used everywhere in modern design.

Round the corners of any element using border-radius — from subtle softened buttons to perfect circles and pill shapes.

Understand how outline differs from border, control focus styles for accessibility, and learn the box-shadow trick for rounded elements.

Add depth and dimension to cards, buttons, and sections using box-shadow — and learn the colored shadow technique used on every modern landing page.

Understand why elements grow larger than expected when you add padding, and fix it forever with box-sizing: border-box.

Control how elements sit on the page using display — block, inline, inline-block, and none — and start building the Netflix navbar layout.

Control the size of any element using fixed values, percentages, viewport units, and min/max constraints — and build a full-screen Netflix hero section.

Control what happens when content is too big for its container — clip it, scroll it, or let it spill — and build a horizontal scrolling Netflix movie row.

Build the Netflix navbar and hero section using display flex, justify-content, and align-items.

Build the Netflix movie card grid using display grid, columns, and gap.

Fix the Netflix navbar to the top and overlay text on movie cards using CSS positioning.

Control which elements sit on top when things overlap — fix navbars, badges, modals, and stacking context issues.

Control transparency on elements using opacity — fade cards on hover, hide elements while preserving layout, and understand when to use opacity versus visibility and RGBA.

Learn the third way to hide elements in CSS — visibility: hidden keeps the space while making the element fully invisible and non-interactive, unlike opacity: 0 and display: none.

Add visual effects to images and elements using filter — grayscale unavailable cards, blur backgrounds, and brighten thumbnails on hover.

Control how images fill their containers using object-fit and object-position — and never deal with a stretched or squished image again.

Use ::before and ::after to add gradient overlays and decorative effects to movie cards.

Add smooth hover animations to Netflix movie cards using CSS transitions and transform.

Make elements animate automatically on their own using @keyframes — build a pulsing logo, loading spinner, and staggered page entrance.

Rotate, scale, move, and skew elements using transform — and build the signature Netflix card hover effect that lifts cards off the page.

Choose the right unit for every situation — px, %, rem, em, vw, and vh — and understand when to use each one for accessible, responsive layouts.

Use media queries to make the Netflix clone look great on phones, tablets, and desktops.

Define colors, fonts, and spacing once in :root and reuse them everywhere — the foundation of every professional design system.

Understand the difference between a CSS Reset and CSS Normalize — and learn when to reach for each one in your projects.

Strip browser default styles with a modern CSS reset and structure your CSS file the way professional developers do — with clear sections, variables, and comments.

Put it all together. Build a complete Netflix-style homepage step by step using everything you've learned.

Build a Netflix-style homepage from scratch in 12 focused steps — navbar, hero, email form, movie cards, and responsive design all in one beginner project.