Overview
CSS Layouts & Styling
Flexbox, grid, positioning - learn how to build layouts that actually work.
Introduction to CSS
Learn how CSS styles HTML, understand selectors, colors, typography, spacing, and basic layouts.
Project To Build
Follow the Traversy Media tutorial from start to finish and build everything alongside the instructor. Focus on selectors, colors, spacing, typography, and basic layouts.
Flexbox Layouts
Master one-dimensional layouts and learn how modern websites align and distribute content.
Project To Build
Build a responsive component using Flexbox. Focus on alignment, spacing, centering, and responsive layouts.
CSS Grid
Learn two-dimensional layouts and build modern page structures using CSS Grid.
Project To Build
Build a responsive testimonials section using CSS Grid and practice controlling rows, columns, and layout placement.
Responsive Design
Learn media queries, mobile-first development, and responsive design principles.
Project To Build
Convert a desktop design into a fully responsive experience that works across mobile, tablet, and desktop devices.
CSS Animations
Learn transitions, transforms, hover effects, and keyframe animations used in modern user interfaces.
Project To Build
Build an interactive UI card with hover effects, transitions, transforms, and subtle animations.
CSS Portfolio Challenge
Combine everything learned to build a complete responsive landing page using modern CSS techniques.
Project To Build
Build a complete responsive landing page using Flexbox, Grid, responsive design techniques, and animations. This project should be portfolio-ready.
Build Your Portfolio Website
Time to step away from code-alongs! Apply everything you've learned about layout, responsiveness, and animations to design and build your own custom personal portfolio website completely from scratch.
Project To Build
Design and build your own custom developer portfolio from scratch using only HTML and CSS. You must independently engineer a responsive navbar, a hero section, an about/skills block, a CSS Grid projects grid - linking all your previous work, and a contact section.