Heads up! Looks like you're using adblock. Please consider supporting us by whitelisting coursedio.online How?
arrow_back
Go back
file_download Exercise Files
Next Video arrow_forward

Project: Adding images and icons

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

43s
play_circle_filled

What you should know

26s
play_circle_filled

How to complete the exercises

1m 29s
play_circle_filled

HTML and CSS

1m 10s
play_circle_filled

Working with website files

3m 25s
play_circle_filled

Writing code with a text editor

3m 40s
play_circle_filled

Customizing your text editor

3m 29s
play_circle_filled

Project: Overview and setup

7m 46s
play_circle_filled

Where to find images

2m 52s
play_circle_filled

Optimizing images for the web

3m 41s
play_circle_filled

Relative and absolute paths

2m 43s
play_circle_filled

Project: Adding images and icons

7m 13s
play_circle_filled

Referencing CSS

2m 44s
play_circle_filled

Project: Creating a CSS file

3m 4s
play_circle_filled

CSS specifications and the W3C

3m 12s
play_circle_filled

CSS syntax and terminology

4m 2s
play_circle_filled

CSS values and units

3m 33s
play_circle_filled

The color property and values

4m 31s
play_circle_filled

Creating a color palette

1m 52s
play_circle_filled

Type and universal selectors

3m 16s
play_circle_filled

ID selectors

2m 34s
play_circle_filled

Class selectors

3m 17s
play_circle_filled

Descendant combinators and selector lists

2m 56s
play_circle_filled

The background property

4m 39s
play_circle_filled

Project: Prepping the CSS file

4m 5s
play_circle_filled

Project: Adding background styles

7m 39s
play_circle_filled

Pseudo-classes and pseudo-elements

4m 30s
play_circle_filled

Inheritance and the cascade

2m 20s
play_circle_filled

Specificity

3m 45s
play_circle_filled

Project: Styling links

5m 23s
play_circle_filled

Intro to the CSS box model

58s
play_circle_filled

The box model properties

3m 44s
play_circle_filled

Box-sizing and the box model fix

4m 23s
play_circle_filled

Inline, block, and display

4m 39s
play_circle_filled

Project: Footer styles and icons

4m 4s
play_circle_filled

Debugging with developer tools

5m 6s
play_circle_filled

Managing box model quirks

4m 2s
play_circle_filled

Project: Background image update

3m 23s
play_circle_filled

Using negative margin values

2m 42s
play_circle_filled

Center aligning with margin

3m 42s
play_circle_filled

Project: Adding content wrappers

4m 44s
play_circle_filled

Project: Adding a header image

5m 56s
play_circle_filled

Intro to CSS Layout

1m
play_circle_filled

Layouts with the float property

3m 50s
play_circle_filled

Clearing floats

3m 23s
play_circle_filled

Project: Float images and text

6m 47s
play_circle_filled

The position property

5m 12s
play_circle_filled

Position and z-index

4m 11s
play_circle_filled

Project: Fixed positioning

3m 21s
play_circle_filled

Intro to Grid and Flexbox

59s
play_circle_filled

Intro to Flexbox

2m 25s
play_circle_filled

Flexbox: Orientation and ordering

3m 1s
play_circle_filled

Sizing with flex properties

2m 29s
play_circle_filled

Flexbox exercise

3m 51s
play_circle_filled

Project: Sticky footer with flexbox

5m 39s
play_circle_filled

Aligning flex items

3m 20s
play_circle_filled

Project: Aligning elements with Flexbox

3m 41s
play_circle_filled

Intro to CSS Grid

2m 23s
play_circle_filled

The explicit grid

3m 59s
play_circle_filled

The implicit grid

2m 58s
play_circle_filled

Adding gutters with the gap property

1m 21s
play_circle_filled

Project: Adding columns with Grid

8m 15s
play_circle_filled

Typography for the web

3m 11s
play_circle_filled

Changing fonts with font-family

2m 59s
play_circle_filled

font-weight and font-style

3m 3s
play_circle_filled

Web fonts with @font-face

2m 31s
play_circle_filled

Web fonts with Google Fonts

3m 18s
play_circle_filled

Project: Google Fonts

4m 5s
play_circle_filled

The font-size property

4m 6s
play_circle_filled

Font-size and accessibility

6m 39s
play_circle_filled

Text-align and text-transform

3m 26s
play_circle_filled

Line-height and letter-spacing

3m 22s
play_circle_filled

Project: Typography styles

6m 56s
play_circle_filled

Project: Buttons and spacing

9m 23s
play_circle_filled

Intro to responsive design

1m 29s
play_circle_filled

Intro to media queries

4m 32s
play_circle_filled

Breakpoints and media queries

3m 32s
play_circle_filled

Fluid layouts

2m 36s
play_circle_filled

The viewport meta tag

1m 53s
play_circle_filled

Testing responsive layouts

3m 1s
play_circle_filled

Project: Breakpoints

3m 38s
play_circle_filled

Project: Media queries: Part 1

12m 26s
play_circle_filled

Project: Media queries: Part 2

8m 26s
play_circle_filled

Project: Media queries: Part 3

6m 17s
play_circle_filled

Continuing beyond the essentials with CSS

42s