Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

scss

Cascading Style Sheets bring order and beauty to our applications.

HTML 5 is the structure of our web pages. It is the markup that represents the DOM (document object model).

html

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`.

flexbox

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.

Create an Accessible Group of Form Fields

CSS selectors are the glue that connects styling to HTML content. Understanding how they work enables a developer to write more semantic markup for better project maintenance.

CSS Selectors in Depth

In this course, you will learn how to express popular SCSS (Sass) language features using latest JavaScript features.

Convert SCSS (Sass) to CSS-in-JS

Have you ever wished for access to conditionals or iteration when writing styles? How cool would it be to use functions to write styles? SCSS has that and more! SCSS

Learn the Best and Most Useful SCSS

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

https://app.egghead.io/api/v1/lessons/css-create-a-basic-responsive-grid-system-with-css-grid/transcript

https://app.egghead.io/api/v1/lessons/css-apply-aspect-ratio-sizing-to-images-with-css-object-fit/subtitles

Stephanie Eckles: [0:00] Here we have three standard cards. What happens if we try to add an image? Adding a native image tag results in unevenly sized images. A common solution is to bring the image in as a background instead, but modern CSS gives us a new property called object-fit.

[0:19] For each of our card images, we will apply the property object-fit: cover. On save, we do not yet see a difference, because we need to apply specific dimensions for the image to fit within. The first improvement is width: 100%. Now, the images do not grow larger than the card container.

[0:41] The second dimension to add is height. For that, we'll use the value 25 view height. On save, you can see how each image has been scaled either up or down to fill the dimensions we have set. object-fit: cover results in the image behaving much like a background image with the advantage of retaining the semantics offered by the image tag.

[1:05] Another common scenario that object-fit can provide solution for is the desire to scale unevenly sized images within their containers without losing their aspect ratio, but ensuring the whole image is viewable.

[1:18] For this scenario, we'll use object-fit with the value of scale-down. Once again, to see an impact, we also need to provide width: 100% and again we'll provide a height of 25 view heights. The results of using object-fit with height and width defined is that the image will become the container for its own contents.

[1:41] As you can see, the image tag fills the dimensions that we provided, but the contents itself have been scaled down to fit within those dimensions while keeping its aspect ratio. For this example, the usage of the scale-down value means that either none or another property contained will be chosen whichever results needs smaller concrete object size.

[2:06] Because the use of object-fit causes the image to act like its own container, we can also add value such as padding, which as a normal block container, results in space around the image contents.

[2:20] In summary, object-fit results in an image acting as its own container where the value cover mimics the behavior you would expect from a background image and instructs the image contents to expand or fill the dimensions. Scale-down results in the image contents retaining their aspect ratio but scaling within the dimensions set on the image.

https://app.egghead.io/api/v1/lessons/css-apply-aspect-ratio-sizing-to-images-with-css-object-fit/transcript

https://app.egghead.io/api/v1/lessons/css-create-basic-effects-with-css-box-shadow/transcript

https://app.egghead.io/api/v1/lessons/flexbox-create-an-automatically-responsive-flexbox-gallery/subtitles

Stephanie Eckles: [0:00] Here we have a selection of images that have been marked up within list items in the list with the class of gallery. Our goal is to create an intrinsically responsive gallery using flexbox layout.

[0:13] We'll begin our gallery class by removing the default list styles with list-style: none; padding: ; and margin: . Then we will set display: flex, and flex-wrap: wrap. On save, we do not see much change because our images are quite large and in varying dimensions.

[0:34] Let's begin to style the images. First, we'll set the property object-fit: cover; with a width: 100%; and height: 100%. This will allow our images to fill the parent element. In this case, the list item. On save, we still do not see a change because we have not defined the dimensions of the list item.

[0:56] Let's define our gallery list item using flex shorthand to allow a flex grow of 1, a flex shrink of 1, and set our preferred width of 20rem.

[1:08] On save, you'll see that our images have reflowed and begun to align next to each other. This is because the current viewport, in this case, is greater than 60rem, which is allowing three images across with the top, and because we have an odd number of images, two across the bottom which because of the flex grow and shrink of 1, the last two images are allowed to expand to fill the remaining space.

[1:33] Let's apply a few more explicit dimensions by setting a min-height: 30vh and a max-height: 50vh. On save, you see that the list items do not take up more than 50 percent of the current viewport height.

[1:50] We're having a bit of spacing occur due to the inherent browser styles on body. Let's set that more explicitly with body and margin of .5rem and a background color of #222, which is a nice dark grey.

[2:06] Then, we can update our gallery height to use calc and subtract .5 rem from the 50vh, which means that when the viewport is large enough to contain two rows of images, they will completely fill the viewport with no overflow scrolling.

[2:24] To complete our gallery, let's add a slight animation to the images. First, we'll set opacity: .7, then add a transition that uses 180ms duration set explicitly on the opacity property with the east-in-out function.

[2:42] On hover, we'll define that the opacity should come back up to 1. On save, we can preview this transition.

[2:50] In review, we created an intrinsically responsive photo gallery using flexbox. This was enabled by setting flex grow and shrink to 1 and using the flex spaces to set our preferred width of 20rem.

[3:07] Once the viewport allows a multiplier of 20rem, more images are allowed to align next to each other or removed as the viewport shrinks. We also set object-fit cover with width and height 100 percent so that the images would fill the list items without distortion or overflow.

[3:26] Finally, we created a small animation on our images through the use of opacity and transition.

https://app.egghead.io/api/v1/lessons/flexbox-create-an-automatically-responsive-flexbox-gallery/transcript

https://app.egghead.io/api/v1/lessons/css-create-viewport-responsive-layout-spacing-using-css-clamp/subtitles

Stephanie Eckles: [0:00] Here, we have mockup, a standard dashboard type of layout with a header bar, a sidebar, and a content area. Now, there's two article elements here, but we're missing an important property to distinguish them, which is margin.

[0:15] A popular way to add spacing into layouts is with a rigid grid. As an example, one type of layout grid is the eight-pixel grid. Let's create a custom CSS property called unit and set it to .5 rem which under default browser circumstances equates to 8 pixels but with the advantage of responding to any user settings for their font size.

[0:41] Then, on our article, we will add a rule for margin. Using the calc() function, we can set 2 * times and then bring in our var(--unit). In other words, 2 * .5 rem. That's going to equate to 16 pixels of margin around our articles.

[1:00] Now, the issue with this method is that regardless of viewport size, the spacing will always be 16 pixels. For users on large desktops or even TVs, it may be beneficial to provide a bit more spacing around content elements. Let's reset that.

[1:19] Instead, we can use a modern CSS property called clamp(). Clamp is a function that intakes a minimum allowed value, a preferred value, and a max value. In our case, we can copy what we did before, essentially setting 16 pixels as the minimum allowed value, and then we'll bring in viewport units.

[1:42] In this case, we'll add 5vw as the preferred value, and then once more, a calc() function to multiply our unit times 5, making our max allowed value 40 pixels. On Save, as I resize the viewport, you can see that margin adjusting based on where it falls within that range. On the smallest viewport, the calculated margin is no less than 16 pixels, and it is allowed to grow up to 40 pixels.

[2:17] We're using the same value for all sides, but we can take advantage of viewport units even further by updating our top and bottom value to use view height. Now that this value is only for our left and right, let's update it to allow it to have a bit more space, so update our minimum value to be our unit times 4 and our max to be our unit times 8.

[2:40] On Save, you saw just a little increase in the allowed visual width. If we use the device toolbar, courtesy of DevTools, we can also see how the height affects the vertical space between our articles.

[2:56] In this lesson, we learned how to use the modern CSS function clamp() to set a minimum, a preferred, and a maximum value. In conjunction with viewport units like view height and view width, we enabled a layout that is able to fluidly take advantage of the viewport size currently in use.

https://app.egghead.io/api/v1/lessons/css-create-viewport-responsive-layout-spacing-using-css-clamp/transcript

https://app.egghead.io/api/v1/lessons/scss-access-theme-color-values-with-sass/subtitles

Stephanie Eckles: [0:00] Here, we have defined a set of color variables. We're going to make a map for our variables called theme-colors. A map in Sass is defined by a set of key value pairs within parentheses. We'll use the key from our variable names such as primary, referred to color-primary, and so on.

[0:22] Once our map is defined, we'll create a function called theme-color, which will intake a key. I will use the built-in map-get function to access our theme-colors map and return the value associated with the key. We can now apply our colors to our site components.

[0:44] Now that we have created the theme-color function to easily access the theme-colors mapped by key and have used the theme-color function throughout our styles, we can easily change any of these variables to quickly redeem our app.

[1:00] We'll update the primary and the support color variable values. Upon save, you can see that we now have a new theme applied to our application.

https://app.egghead.io/api/v1/lessons/scss-access-theme-color-values-with-sass/transcript

https://app.egghead.io/api/v1/lessons/css-apply-image-filter-effects-with-css/subtitles

Stephanie Eckles: [0:00] Here we have an image of Ada Lovelace. We're going to apply some filter effects. They used to only be possible by taking an image into a graphics tool. The first one we're going to apply is grayscale, which then takes a percentage, and a percentage is used to remove that percent of the image's color. We'll give it a value of 40% and on save, we see 40 percent of the color is removed.

[0:25] We're also going to use the blur function, and we'll set this to a value of 2px. I found the 2px is enough to clearly be a blurred effect while still allowing the image to retain some recognizable features.

[0:39] Then on hover of the image, we can set the filters to not remove the effects and hop back up into our image and add a transition to smooth out that effect, and we'll specifically apply it to the filter. Now that hover effect is a bit smoother.

[0:54] One more effect we'd like to add requires the use of box-shadow. Images cannot have an inset box-shadow. In the markup for our image, we've surrounded it with a span tag. We're going to set our span position to relative so that we can absolutely position an :after element such that it will completely cover the image.

[1:13] Then on the :after element, we can use the box-shadow property to apply an inset box-shadow. We don't want it to have an x or y offset. We just want to use the blur. You can experiment with what value you like best. I've chosen 5rem for our example.

[1:30] We're going to apply an RGBA value that computes to a Navy Blue. On save, you can see that's been applied. It's created a bit of what photographers call a vignette effect, where the box-shadow is darkening the edges of the image and leaving the middle clear.

[1:46] Instead of removing filters on hover of the image, let's update this rule to detect when the span is being hovered, and then remove it from the image. Similarly, when the span is being hovered, we will reduce the box-shadow.

[1:59] Unfortunately, we can't affect individual properties of the box-shadow. We'll have to copy our rule and reduce the value that we want to remove, which is the blur, down to . Before we check out our effect, let's remember to add a transition and apply that to just the box-shadow. On save, we can see that on hover, the filters are removed, and the box-shadow shrinks back to the edges.

[2:25] In this lesson, we learned how to use the filter property and applied a grayscale and blur effect to an image. We also learned how to make use of an additional pseudo-element that's placed on the image parent in order to apply a box-shadow for a vignette effect on our image. Then, we chose to remove those effects via :hover, and use the transition property for a smooth transition between effects.

https://app.egghead.io/api/v1/lessons/css-apply-image-filter-effects-with-css/transcript

https://app.egghead.io/api/v1/lessons/css-define-and-use-css-custom-properties/subtitles

Stephanie Eckles: [0:00] Here, we have a headline and a link, which currently are inheriting their colors from the default browser styles. We're going to use CSS custom properties, also called CSS variables, to update their colors.

[0:12] First, we'd like to create a color property that will be intended to be shared across multiple elements. The convention for this is to attach the styles to the root. The format for creating a CSS custom variable is two dashes followed by the name of your custom variable, and then any valid CSS values.

[0:32] For my color, I'm going to choose rebeccapurple. To apply this, I'm going to select my h1 and for the color property, to access that variable, we use the var function. Here, we pass in the name of our custom property. You can see that that has been updated to my rebeccapurple color.

[0:50] For my link, we could use the same thing, but another feature of custom variables is that we can scope them to specific elements. We can create a scoped variable of simply color. We will set its initial value to our variable of color primary, which we access in the same way as if we were using it on a property. Then, we'll update the links property to use that local variable. On save, I have the same results.

[1:16] A link is a stateful element. For example, we want to create a hover style. Because we've created the local variable of color, one way to update it on hover is to simply redefine that same color property, which you can see has worked. An additional benefit of CSS custom properties is that they can be defined as an inline style or by a JavaScript.

[1:40] Instead, let's jump back up to our main link element and define a local variable of hoverColor that we'll set to our green. Then, within our hoverRule, we will redefine the color using that hoverColor value. So far, we get the same result.

[1:55] Now, we can jump back into our HTML and we have the ability to style just the hoverColor, something that we traditionally can't do with an inline style because we've created a variable to redefine it. An inline style is going to have higher specificity in the cascade, which means redefining this property on an inline style is going to take priority over the rule in the style sheet.

[2:18] In this lesson, we learned how to define CSS custom properties on the root element to be applied to multiple elements, and to take advantage of defining scoped local variables in order to be able to update stateful elements, which extends their functionality to be able to be updated within the inline styles, and also opens them to the possibility of being updated with JavaScript.

https://app.egghead.io/api/v1/lessons/css-define-and-use-css-custom-properties/transcript

https://app.egghead.io/api/v1/lessons/html-5-create-an-accessible-group-of-form-fields/subtitles

Stephanie Eckles: [0:00] In our document, we have placed an <input> element, which the browser recognizes as an interactive input. The first improvement we can make is to explicitly define that this input is type of text, meaning we expect plain text data. However, there is no indication of the expected value for the data. To begin to resolve that, we add a <label> element. This field will be for a First Name.

[0:33] Inherited browser styles place the label in line with the text field. A sighted user is able to visually make the connection between First Name and its associated field. However, a user who may be using assistive technology, such as voiceover, will not have the same association, as the screen reader reads simply that this is a text field.

[0:59] To resolve this, we first define an id on the input, and we'll say firstname. Then we will use that as the for attribute value. Now, when a user with assistive technology interacts with the field, it is read as first Name and moves their focus to immediately begin inputting text.

[1:22] Use of the for attribute coupled with the id forms this relationship to help assistive tech identify the field with its label and enhances the field for all users as interacting with the label provides a larger hit target for bringing focus to the associated input.

[1:43] Often, you may want to group related fields together. We would want to add a Last Name. We'll update the label text as well as the for and id attributes, ensuring that they are unique for every field added to the document. By default, the browser has continued to align them.

[2:06] Let's wrap each label and its associated input with a simple <div>. I've used the class of field-group, and we will simply create a bit of padding around each field. Although we have used appropriate, clear labels and the for attribute to associate the label with the related input, we can go one step further with identifying these as related fields by using the <fieldset> element.

[2:38] Most browser native styles will include a border as part of the inherited fieldset styles. The fieldset by itself has given a visual cue but has not yet provided additional information for users of assistive technology.

[2:55] For that, we also need to create a legend. We'll use the label Full Name. Now, when a user of assistive technology interacts with the fields within the fieldset, their screen reader of choice identifies the field and that it is part of the Full Name group.

https://app.egghead.io/api/v1/lessons/html-5-create-an-accessible-group-of-form-fields/transcript

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

Stephanie Eckles

Free Community Resource

What you'll learn:

You might also like these resources:

CSS Selectors in Depth

Convert SCSS (Sass) to CSS-in-JS

Learn the Best and Most Useful SCSS

Free Community Resource

Course Content

You might also like these resources:

CSS Selectors in Depth

Convert SCSS (Sass) to CSS-in-JS

Learn the Best and Most Useful SCSS