CSS Fundamentals
CSS brings your HTML to life. These lessons cover how to select elements, control layout, and style pages with confidence.
Basics
Understanding CSS
Learn what CSS is, how it works alongside HTML and JavaScript, and what you'll build in this course.
Setting Up CSS
Install VS Code, create your project folder, connect a CSS file, and get Live Server running before writing your first line of CSS.
CSS Selectors
Target HTML elements precisely using tag, class, and ID selectors to style specific sections.
Colors & Backgrounds
Colors
Use hex codes, RGB, RGBA, and background images to bring your Netflix clone to life.
Background Color
Set background colors on any element using hex codes, color names, and RGBA to start building the dark Netflix look.
CSS Gradients
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.
Text & Fonts
CSS Font Family
Use the font-family property to choose a typeface, set fallback stacks, and mix fonts across headings and body text.
Google Fonts
Add beautiful free fonts to any project in thirty seconds using Google Fonts and the font-family property.
CSS Font Size
Control text size using px, rem, and em — and learn which unit to reach for and why.
CSS Font Weight and Style
Control text thickness and italics using font-weight and font-style to create visual hierarchy on your page.
CSS Text Align and Decoration
Control text alignment, decoration, transformation, and letter spacing to polish every line of text on your page.
CSS Line Height
Control the vertical space between lines of text to make your page comfortable and easy to read.
Box Model
CSS Padding
Add breathing room inside your elements using padding — the space between your content and the edges of its box.
CSS Margin
Add space outside your elements using margin — and learn the margin: 0 auto trick for centering anything on the page.
CSS Border
Add lines around your elements using border — control the width, style, and color, and learn the ghost button pattern used everywhere in modern design.
CSS Border Radius
Round the corners of any element using border-radius — from subtle softened buttons to perfect circles and pill shapes.
CSS Outline
Understand how outline differs from border, control focus styles for accessibility, and learn the box-shadow trick for rounded elements.
CSS Box Shadow
Add depth and dimension to cards, buttons, and sections using box-shadow — and learn the colored shadow technique used on every modern landing page.
CSS Box Sizing
Understand why elements grow larger than expected when you add padding, and fix it forever with box-sizing: border-box.
Layout
CSS Display
Control how elements sit on the page using display — block, inline, inline-block, and none — and start building the Netflix navbar layout.
CSS Width and Height
Control the size of any element using fixed values, percentages, viewport units, and min/max constraints — and build a full-screen Netflix hero section.
CSS Overflow
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.
Flexbox Layout
Build the Netflix navbar and hero section using display flex, justify-content, and align-items.
CSS Grid
Build the Netflix movie card grid using display grid, columns, and gap.
Positioning
Fix the Netflix navbar to the top and overlay text on movie cards using CSS positioning.
CSS Z-index
Control which elements sit on top when things overlap — fix navbars, badges, modals, and stacking context issues.
Visual Styling
CSS Opacity
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.
CSS Visibility
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.
CSS Filter
Add visual effects to images and elements using filter — grayscale unavailable cards, blur backgrounds, and brighten thumbnails on hover.
CSS Object Fit
Control how images fill their containers using object-fit and object-position — and never deal with a stretched or squished image again.
Interactivity
Pseudo-elements
Use ::before and ::after to add gradient overlays and decorative effects to movie cards.
Transitions
Add smooth hover animations to Netflix movie cards using CSS transitions and transform.
CSS Animations and Keyframes
Make elements animate automatically on their own using @keyframes — build a pulsing logo, loading spinner, and staggered page entrance.
CSS Transform
Rotate, scale, move, and skew elements using transform — and build the signature Netflix card hover effect that lifts cards off the page.
Responsive Design
Best Practices
CSS Variables
Define colors, fonts, and spacing once in :root and reuse them everywhere — the foundation of every professional design system.
CSS Normalize
Understand the difference between a CSS Reset and CSS Normalize — and learn when to reach for each one in your projects.
CSS Reset and Organizing CSS
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.
Projects
Project: Netflix Clone
Put it all together. Build a complete Netflix-style homepage step by step using everything you've learned.
Build a Netflix Clone With CSS
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.
Also Read
CSS Outline
Understand how outline differs from border, control focus styles for accessibility, and learn the box-shadow trick for rounded elements.
CSS Visibility
Learn the third way to hide elements in CSS — visibility: hidden keeps the space while making the element fully invisible and non-interactive.
CSS Normalize
Understand the difference between a CSS Reset and CSS Normalize — and learn when to reach for each one in your projects.
CSS BEM Naming
Write scalable, readable CSS class names using the Block Element Modifier convention used by professional teams worldwide.