CSS Essential Training (2023)

Introduction

• Getting started with CSS
• What you should know
• How to complete the exercises

1. Getting Started

• HTML and CSS
• Working with website files
• Writing code with a text editor
• Customizing your text editor
• Project: Overview and setup
• Where to find images
• Optimizing images for the web
• Relative and absolute paths
• Project: Adding images and icons
• Referencing CSS
• Project: Creating a CSS file

2. CSS Core Concepts

• CSS specifications and the W3C
• CSS syntax and terminology
• CSS values and units
• The color property and values
• Creating a color palette
• Type and universal selectors
• ID selectors
• Class selectors
• Descendant combinators and selector lists
• The background property
• Project: Prepping the CSS file
• Project: Adding background styles
• Pseudo-classes and pseudo-elements
• Inheritance and the cascade
• Specificity
• Project: Styling links

3. The CSS Box Model

• Intro to the CSS box model
• The box model properties
• Box-sizing and the box model fix
• Inline, block, and display
• Project: Footer styles and icons
• Debugging with developer tools
• Managing box model quirks
• Project: Background image update
• Using negative margin values
• Center aligning with margin
• Project: Adding content wrappers
• Project: Adding a header image

4. Layouts: Float and Position

• Intro to CSS Layout
• Layouts with the float property
• Clearing floats
• Project: Float images and text
• The position property
• Position and z-index
• Project: Fixed positioning

5. Layouts: Flexbox and Grid

• Intro to Grid and Flexbox
• Intro to Flexbox
• Flexbox: Orientation and ordering
• Sizing with flex properties
• Flexbox exercise
• Project: Sticky footer with flexbox
• Aligning flex items
• Project: Aligning elements with Flexbox
• Intro to CSS Grid
• The explicit grid
• The implicit grid
• Adding gutters with the gap property
• Project: Adding columns with Grid

6. Typography

• Typography for the web
• Changing fonts with font-family
• font-weight and font-style
• Web fonts with @font-face
• Web fonts with Google Fonts
• Project: Google Fonts
• The font-size property
• Font-size and accessibility
• Text-align and text-transform
• Line-height and letter-spacing
• Project: Typography styles
• Project: Buttons and spacing

7. Layouts: Fluid and Responsive

• Intro to responsive design
• Intro to media queries
• Breakpoints and media queries
• Fluid layouts
• The viewport meta tag
• Testing responsive layouts
• Project: Breakpoints
• Project: Media queries: Part 1
• Project: Media queries: Part 2
• Project: Media queries: Part 3

Conclusion

• Continuing beyond the essentials with CSS