Heads up! Looks like you're using adblock. Please consider supporting us by whitelisting coursedio.online How?

file_download Exercise Files

Next Video arrow_forward

Layouts with the float property

with Christina Truong

Explore the concepts that form the foundation of CSS. Learn how to select content, style text, manage layouts, and more as you work on a series of real-world projects.

play_circle_filled

Getting started with CSS

play_circle_filled

What you should know

play_circle_filled

How to complete the exercises

play_circle_filled

HTML and CSS

play_circle_filled

Working with website files

play_circle_filled

Writing code with a text editor

play_circle_filled

Customizing your text editor

play_circle_filled

Project: Overview and setup

play_circle_filled

Where to find images

play_circle_filled

Optimizing images for the web

play_circle_filled

Relative and absolute paths

play_circle_filled

Project: Adding images and icons

play_circle_filled

Referencing CSS

play_circle_filled

Project: Creating a CSS file

play_circle_filled

CSS specifications and the W3C

play_circle_filled

CSS syntax and terminology

play_circle_filled

CSS values and units

play_circle_filled

The color property and values

play_circle_filled

Creating a color palette

play_circle_filled

Type and universal selectors

play_circle_filled

ID selectors

play_circle_filled

Class selectors

play_circle_filled

Descendant combinators and selector lists

play_circle_filled

The background property

play_circle_filled

Project: Prepping the CSS file

play_circle_filled

Project: Adding background styles

play_circle_filled

Pseudo-classes and pseudo-elements

play_circle_filled

Inheritance and the cascade

play_circle_filled

Specificity

play_circle_filled

Project: Styling links

play_circle_filled

Intro to the CSS box model

play_circle_filled

The box model properties

play_circle_filled

Box-sizing and the box model fix

play_circle_filled

Inline, block, and display

play_circle_filled

Project: Footer styles and icons

play_circle_filled

Debugging with developer tools

play_circle_filled

Managing box model quirks

play_circle_filled

Project: Background image update

play_circle_filled

Using negative margin values

play_circle_filled

Center aligning with margin

play_circle_filled

Project: Adding content wrappers

play_circle_filled

Project: Adding a header image

play_circle_filled

Intro to CSS Layout

play_circle_filled

Layouts with the float property

play_circle_filled

Clearing floats

play_circle_filled

Project: Float images and text

play_circle_filled

The position property

play_circle_filled

Position and z-index

play_circle_filled

Project: Fixed positioning

play_circle_filled

Intro to Grid and Flexbox

play_circle_filled

Intro to Flexbox

play_circle_filled

Flexbox: Orientation and ordering

play_circle_filled

Sizing with flex properties

play_circle_filled

Flexbox exercise

play_circle_filled

Project: Sticky footer with flexbox

play_circle_filled

Aligning flex items

play_circle_filled

Project: Aligning elements with Flexbox

play_circle_filled

Intro to CSS Grid

play_circle_filled

The explicit grid

play_circle_filled

The implicit grid

play_circle_filled

Adding gutters with the gap property

play_circle_filled

Project: Adding columns with Grid

play_circle_filled

Typography for the web

play_circle_filled

Changing fonts with font-family

play_circle_filled

font-weight and font-style

play_circle_filled

Web fonts with @font-face

play_circle_filled

Web fonts with Google Fonts

play_circle_filled

Project: Google Fonts

play_circle_filled

The font-size property

play_circle_filled

Font-size and accessibility

play_circle_filled

Text-align and text-transform

play_circle_filled

Line-height and letter-spacing

play_circle_filled

Project: Typography styles

play_circle_filled

Project: Buttons and spacing

play_circle_filled

Intro to responsive design

play_circle_filled

Intro to media queries

play_circle_filled

Breakpoints and media queries

play_circle_filled

Fluid layouts

play_circle_filled

The viewport meta tag

play_circle_filled

Testing responsive layouts

play_circle_filled

Project: Breakpoints

play_circle_filled

Project: Media queries: Part 1

play_circle_filled

Project: Media queries: Part 2

play_circle_filled

Project: Media queries: Part 3

play_circle_filled

Continuing beyond the essentials with CSS