CSS Essential Training (2019)
4h 30mBeginner2019-10-01
Authors

Christina Truong
Educator, Front-End Developer
Course details
Cascading Style Sheets (CSS) is a stylesheet language that allows you to control the appearance of your webpages. In this hands-on course, Christina Truong demonstrates the concepts that form the foundation of CSS, explaining what you need to know to tweak existing CSS and write your own. Christina explains how to add colors and other design elements to take your webpages beyond just black text on a white background. She shows how to use selectors, how the box model defines the spacing and sizing of page elements, and how to style text and manage basic layouts with Flexbox and Grid. She also covers working with advanced selectors, creating fluid layouts, and determining when to use the float and position properties. Plus, at the end of the course, you'll walk away with an actual project—an online résumé page.
Learning objectives
Writing basic selectors
Setting properties
Cascade and inheritance
Setting a font family, font size, text color, and more
Working with the box model
Leveraging Grid and Flexbox
Using the float and position properties
Working with advanced selectors
Creating fluid layouts
Learning objectives
Writing basic selectors
Setting properties
Cascade and inheritance
Setting a font family, font size, text color, and more
Working with the box model
Leveraging Grid and Flexbox
Using the float and position properties
Working with advanced selectors
Creating fluid layouts
Skills covered
CSSWeb StandardsWeb DesignFront-End Web DevelopmentEssential TrainingWeb DevelopmentOpen Source
Concepts
0. Introduction
- 01 - Styling documents consistently
- 02 - What you should know
- 03 - Tools and sample projects
1. Getting Started
- 04 - HTML and CSS
- 05 - Browser developer tools
- 06 - Referencing CSS
- 07 - Project overview and setup
- 08 - Optimizing images and retina displays
- 09 - Project - Relative paths
- 10 - Absolute paths
2. Core Concepts
- 11 - CSS specifications and the W3C
- 12 - CSS syntax and terminology
- 13 - CSS values and units
- 14 - The color and property values
- 15 - Type and universal selectors
- 16 - Class and ID selectors
- 17 - Class and ID selector exercise
- 18 - Descendant selectors
- 19 - Grouping selectors
- 20 - Inheritance and specificity
- 21 - The cascade and importance
- 22 - Project - Adding colors
- 23 - Pseudo-class selectors and links
- 24 - Project - Styling links
3. The Box Model
- 25 - Introduction to the box model
- 26 - Inline, block, and display
- 27 - The box model properties
- 28 - The box properties syntax and usage
- 29 - Debugging the box model
- 30 - Padding, margin, and border
- 31 - Margin and layouts
- 32 - Project - Adding content wrappers
- 33 - Project - Margin and padding
4. Typography
- 34 - Typography for the web
- 35 - Changing the font-family
- 36 - Font-weight and font-style
- 37 - Web fonts with @font-face
- 38 - Web fonts with Google Fonts
- 39 - Project - Google Fonts
- 40 - The font-size property
- 41 - Font shorthand
- 42 - Text-decoration, text-align, and line-height
- 43 - Project - Typography styles
5. Layouts - Float and Position
- 44 - Introduction to float
- 45 - The float and clear properties
- 46 - Float and collapsed container
- 47 - Layouts and the box model
- 48 - Project - Float and box model fix
- 49 - Position
- 50 - Position and z-index
6. Layouts - Flexbox and Grid
- 51 - Introduction to Grid and Flexbox
- 52 - Introduction to Flexbox
- 53 - Flexbox - Orientation and ordering
- 54 - Flexible sizing
- 55 - Flexbox exercise
- 56 - Flexbox - Alignment
- 57 - Project - Flexbox alignment
- 58 - Introduction to CSS Grid
- 59 - The explicit grid
- 60 - The implicit grid
- 61 - Grid placement properties
- 62 - Project - Grid columns and Firefox Grid Inspector
7. Advanced Selectors
- 63 - Introduction to advanced selectors
- 64 - Relational selectors - Combinators
- 65 - Project - Updates with combinators
- 66 - Pseudo-class selectors - First and last
- 67 - Project - Advanced selectors
8. Fluid and Responsive Layouts
- 68 - Introduction to responsive design
- 69 - Project - Creating fluid layouts
- 70 - Flexible background images
- 71 - Project - Flexible background image
- 72 - Introduction to media queries
- 73 - Media queries, widths, and breakpoints
- 74 - Testing responsive layouts
- 75 - Project - Media queries and responsive layout
Conclusion
- 76 - Next steps