How do I build a responsive portfolio website with dark mode and lazy-loaded images using HTML, CSS, and JavaScript?

The course walks through creating a portfolio layout, adding a dark-mode toggle, and using lazy loading to improve image loading performance.

What is the mobile-first media query pattern for progressively enhancing a CSS layout?

Start with base styles for small screens, then use min-width media queries to add or adjust styles at larger breakpoints.

How can CSS Subgrid align content across separate grid cards or sibling grid items?

Apply subgrid to the nested grid so it inherits the parent grid's tracks, allowing content in sibling items to align consistently.

Free Course Image CSS Front-End Web Developer

Free online course CSS Front-End Web Developer

Duration of the online course: 6 hours and 28 minutes

New

Build job-ready CSS skills fast with this free course: responsive layouts, Flexbox, Grid, animations and modals—perfect for a front-end portfolio and certificate goals.

In this free course, learn about

Build a portfolio site with HTML/CSS/JS, including dark mode and lazy loading
Configure responsive containers that change only at defined breakpoints
Apply mobile-first media queries to progressively enhance layouts on larger viewports
Use CSS positioning (relative/absolute/fixed/sticky) and understand normal flow removal
Choose transitions vs keyframe animations; create basic CSS animations effectively
Pick appropriate CSS units (rem/em/%/vw) for accessible font sizing and layouts
Create layouts with CSS Grid, including implicit tracks and auto row sizing
Use Flexbox for alignment and column-direction layouts (main vs cross axis behavior)
Master the box model and use box-sizing: border-box for predictable sizing
Define and reuse CSS variables (custom properties) for consistent theming (e.g., primary color)
Use CSS Subgrid to align nested elements across shared parent grid tracks
Implement CSS-only infinite horizontal scroll using negative animation delays
Use key CSS selectors, including adjacent sibling selector (+) and other common patterns
Build accessible modals/dialogs and re-center after global CSS resets

About the free online course

Move from writing simple styles to building interfaces that feel modern, reliable, and truly responsive. This free CSS course is designed for aspiring front-end developers who want to turn design ideas into polished web pages—without guesswork. You will practice the kind of everyday CSS decisions that make sites look great on phones, tablets, and desktops, and learn a mobile-first mindset that scales smoothly as screens get larger.

You’ll develop confidence with layout fundamentals and the tools employers expect you to know. Flexbox and Grid become practical problem-solvers for alignment, spacing, and complex sections, while subgrid helps you keep components visually consistent across a page. Along the way, you’ll strengthen your understanding of the box model and sizing, so elements behave predictably as you add padding, borders, and constraints. You’ll also learn to choose CSS units wisely, improving accessibility and maintaining typography that respects user preferences.

Beyond layout, the course helps you add refinement and interactivity with pure CSS. You’ll work with positioning for real-world UI patterns, understand when a transition is a better fit than a keyframe animation, and create motion that feels intentional rather than distracting. You’ll also explore advanced techniques like CSS-only continuous scrolling effects and learn why timing strategies matter for smooth visual flow.

To make your styles scalable, you’ll use CSS variables to centralize design decisions like brand colors, and you’ll sharpen your selector skills to target elements cleanly without messy overrides. The end result is a stronger foundation for building a portfolio website and UI components such as modals—plus the problem-solving habits that help you write maintainable, production-friendly CSS.

Course content

Video class: Build Your Portfolio Website - HTML CSS JS - Dark Mode - Lazy Loading 3h32m
Exercise: What setup ensures a responsive container that only resizes at defined breakpoints
Video class: Master Media Queries And Responsive CSS Web Design Like a Chameleon! 09m
Exercise: In a mobile-first CSS workflow, which media query pattern should you use to add styles as the viewport gets larger?
Video class: Learn CSS Positioning Quickly With A Real World Example 08m
Exercise: Which CSS position removes an element from normal flow and positions it using top right bottom left relative to the nearest positioned ancestor?

Video class: Learn CSS Animations In 20 Minutes - For Beginners 21m
Exercise: When should you prefer a CSS transition instead of a keyframe animation?
Video class: A CSS Unit Deep Dive - Learn CSS Units 15m
Exercise: Which CSS unit is best for setting font sizes to respect user preferences and avoid compounded inheritance?
Video class: Learn CSS Grid - A 13 Minute Deep Dive 13m
Exercise: Which CSS property sets the size of rows in the implicit grid when items overflow the explicit grid?

Video class: Learn Flexbox CSS in 8 minutes 08m
Exercise: Flexbox alignment with flex-direction: column
Video class: Learn CSS BOX MODEL - With Real World Examples 17m
Exercise: Which box sizing value makes width and height include padding and border
Video class: Learn CSS Variables In 7 Minutes 07m
Exercise: Define and use a CSS custom property for a site-wide primary color

Video class: Learn CSS Subgrid in 14 minutes 14m
Exercise: Which CSS approach makes elements inside sibling grid items align across shared tracks by inheriting them from the parent grid?
Video class: You Don't Need JavaScript For This - CSS ONLY Infinite Scroll 23m
Exercise: What is the main purpose of assigning each item a unique negative animation-delay in a CSS only infinite horizontal scroll?
Video class: 100 CSS Selectors Explained in 20 Minutes 20m
Exercise: Which CSS selector targets an element that is immediately after a specified sibling?
Video class: Modals Made Easy in 15 Minutes 15m
Exercise: After a global reset * { margin: 0; padding: 0; } breaks centering, how do you re-center a dialog element?

Learn aboutCSS

Explore free online CSS courses designed to help beginners and aspiring web developers master styling, layouts, responsive design, Flexbox, Grid, animations, and modern best practices. Learn at your own pace, build practical front-end skills, and earn a certificate with every course to showcase your CSS expertise.

Free online courses on Responsive Web Design

Learn aboutResponsive Web Design

Explore free online Responsive Web Design courses and learn to build mobile-friendly, accessible websites that look great on every screen. Master HTML, CSS, flexible layouts, media queries, and modern design best practices at your own pace. Enroll today, develop job-ready web skills, and earn a certificate with every course you complete.