30 CSS Exercises

Practice six methods to center a 400 by 400 box with an h1 inside on the x and y axes, using different selectors in a live server setup.

Learn CSS centering techniques using display:flex, display:grid, and positioning: justify-content, align-items, align-content, translate(-50%, -50%), margin auto, and text-align center.

Explore flexbox fundamentals by building responsive bar layouts with centered navigation links, left and right icons, and adjustable gaps, using HTML and CSS in the second exercise.

Learn to center on x and y with flexbox, push items right with margin-left:auto, and manage 50 percent widths and flex-shrink in a three-part nav bar.

This lecture walks through an integration exercise to recreate the provided mockups, build a responsive navigation with animation, and add a pulsing call-to-action button optimized for mobile at 320px.

Practice HTML and CSS by building a responsive page with a navigation, semantic sections, and a hero using clamp-based typography, background centering, and subtle underlined animation.

Create a responsive hero with a link styled as a button, using display flex and hover shadows, plus a floating animated button; add media queries and test with dev tools.

Practice CSS positioning by adjusting elements to follow the screen when scrolling, choosing the correct position for each exercise, and checking statuses and scissors to compare existing styles.

Apply CSS positioning to solve exercises, using fixed for screen anchors and absolute or relative to manage centering and document flow. Practice floating buttons with offset spacing.

Practice applying the display property to line up the children of Box one, using an exercise file and on-page style hints to verify the layout.

Explore how to apply display properties like inline, inline-block, and flex, why transforms fail on inline elements, and how inline-flex and flex containers control 45-degree rotation and width in CSS.

Practice selection skills in CSS by choosing exercise styles and indices, and applying background styles to elements with the title and main title classes.

Practice CSS selectors and styling techniques, including direct descendants, class targets, and attribute selectors, then apply color, background, and first line and first letter styling.

Create a website with a video in the background, add a title and a button, and style the page for a polished look as part of the 30 css exercises.

Create a responsive home hero with a muted autoplay video background, centered content in Playfair Display, a vertical middle line, and a button labeled 'Explore the city' using clamp-based typography.

Recreate the blinking animation by building styles in the index and style assists right there, and watch the source at the bottom right to see the generated styles.

Create a staggered loading animation by styling spans with absolute positioning, using sass and a for loop to assign incremental animation delays for a cohesive effect.

Explore three CSS hiding techniques that preserve layout space while staying accessible to screen readers, and practice applying them to three paragraphs using a small test script.

Explore three CSS techniques to hide elements, opacity, visibility hidden, and display none, balancing visual hiding with accessibility, and learn how each affects layout, clickability, and screen readers.