About this course
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.
Getting started with CSS
43sWhat you should know
26sHow to complete the exercises
1m 29sHTML and CSS
1m 10sWorking with website files
3m 25sWriting code with a text editor
3m 40sCustomizing your text editor
3m 29sProject: Overview and setup
7m 46sWhere to find images
2m 52sOptimizing images for the web
3m 41sRelative and absolute paths
2m 43sProject: Adding images and icons
7m 13sReferencing CSS
2m 44sProject: Creating a CSS file
3m 4sCSS specifications and the W3C
3m 12sCSS syntax and terminology
4m 2sCSS values and units
3m 33sThe color property and values
4m 31sCreating a color palette
1m 52sType and universal selectors
3m 16sID selectors
2m 34sClass selectors
3m 17sDescendant combinators and selector lists
2m 56sThe background property
4m 39sProject: Prepping the CSS file
4m 5sProject: Adding background styles
7m 39sPseudo-classes and pseudo-elements
4m 30sInheritance and the cascade
2m 20sSpecificity
3m 45sProject: Styling links
5m 23sIntro to the CSS box model
58sThe box model properties
3m 44sBox-sizing and the box model fix
4m 23sInline, block, and display
4m 39sProject: Footer styles and icons
4m 4sDebugging with developer tools
5m 6sManaging box model quirks
4m 2sProject: Background image update
3m 23sUsing negative margin values
2m 42sCenter aligning with margin
3m 42sProject: Adding content wrappers
4m 44sProject: Adding a header image
5m 56sIntro to CSS Layout
1mLayouts with the float property
3m 50sClearing floats
3m 23sProject: Float images and text
6m 47sThe position property
5m 12sPosition and z-index
4m 11sProject: Fixed positioning
3m 21sIntro to Grid and Flexbox
59sIntro to Flexbox
2m 25sFlexbox: Orientation and ordering
3m 1sSizing with flex properties
2m 29sFlexbox exercise
3m 51sProject: Sticky footer with flexbox
5m 39sAligning flex items
3m 20sProject: Aligning elements with Flexbox
3m 41sIntro to CSS Grid
2m 23sThe explicit grid
3m 59sThe implicit grid
2m 58sAdding gutters with the gap property
1m 21sProject: Adding columns with Grid
8m 15sTypography for the web
3m 11sChanging fonts with font-family
2m 59sfont-weight and font-style
3m 3sWeb fonts with @font-face
2m 31sWeb fonts with Google Fonts
3m 18sProject: Google Fonts
4m 5sThe font-size property
4m 6sFont-size and accessibility
6m 39sText-align and text-transform
3m 26sLine-height and letter-spacing
3m 22sProject: Typography styles
6m 56sProject: Buttons and spacing
9m 23sIntro to responsive design
1m 29sIntro to media queries
4m 32sBreakpoints and media queries
3m 32sFluid layouts
2m 36sThe viewport meta tag
1m 53sTesting responsive layouts
3m 1sProject: Breakpoints
3m 38sProject: Media queries: Part 1
12m 26sProject: Media queries: Part 2
8m 26sProject: Media queries: Part 3
6m 17sContinuing beyond the essentials with CSS
42s