Techniques to improve your CSS, Sass, and HTML implementations for everyday scenarios. 

CSS grid is a layout model that allows defining structure in terms of columns and rows. Learn how to replace heavy 12-column grid system frameworks with the unique properties of CSS grid. By leveraging CSS grid, we can create intrinsically responsive layouts, no breakpoint media queries or lengthy list of utility classes required.

Create a Basic Responsive Grid System With CSS Grid

The CSS property `object-fit` instructs an `img` to act as the container for its own contents. We can then use the value `cover` to have the image content behave similar to a `background-image` by scaling up or down to fit the provided dimensions. If the goal is for the image contents to remain fully visible within a container while maintaining its aspect ratio, we can use the value `scale-down`.

Apply Aspect Ratio Sizing to Images with CSS object-fit

Learn about the required and expanded syntax of CSS `box-shadow`. Then, create various kinds of effects such as shadows inside the element, a shadow that equally surrounds the element, realistic placement of the shadow, pseudo-borders, and layered effects by defining multiple shadows.

Create Basic Effects with CSS box-shadow

With just a handful of CSS properties, we can create an intrinsically responsive photo gallery using flexbox. This is accomplished by setting our preferred width as the `flex-basis` value and allowing items to both shrink and grow. The use of `object-fit: cover` on images allows them to fully fill up the list item without distortion or overflow. We finish the gallery with a small animated effect that alters `opacity`.

Create an Automatically Responsive Flexbox Gallery

Learn how to use the modern CSS property `clamp()` to create responsive layout sizing that adjusts to the viewport size without the use of media queries. Instead, use a CSS variable to set the base unit size and combine it with `calc()` and viewport units to define minimum, preferred, and maximum values within `clamp()`.

Create Viewport Responsive Layout Spacing Using CSS Clamp

Manage the color palette used in your stylesheets by creating a map of variables and a function to access the values by key. This allows you to update the colors in one location to re-theme your application and eliminate manual find and replace.

Access Theme Color Values With Sass

Apply a grayscale and blurred effect on an image without the use of graphics software by using the CSS `filter` property. Additionally, use an inset `box-shadow` to create a vignette effect as used by photographers. Learn how to remove each effect by using `transition` to ease out the effects on a `:hover` interaction.

Apply Image Filter Effects With CSS

Learn how to define and use a CSS custom property (also called CSS variable). We'll look at the difference between global and scoped custom properties. And we'll see how using local variables for element states - in this case, `a:hover` - allows extending default CSS capabilities by enabling overriding the `:hover` color via an inline style.

Define and use CSS Custom Properties

Learn how to ensure form text inputs are accessible by using semantic HTML. See how to use a fieldset to group related form fields together. Then, preview how proper HTML helps assistive technology like screen readers in identifying form field relationships and purpose.

Learn the Fundamentals of CSS and Sass to Create Modern and Responsive Layouts

Instructor

Course content (9 lessons)

Instructor