Description
In this course, you will learn:
- Learn how to add colors and other design elements to take your web pages beyond just black text on a white background.
- Learnhow 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.
Syllabus:
- Introduction
- Styling documents consistently
- What you should know
- Tools and sample projects
1. Getting Started
- HTML and CSS
- Browser developer tools
- Referencing CSS
- Project overview and setup
- Optimizing images and retina displays
- Project: Relative paths
- Absolute paths
2. Core Concepts
- CSS specifications and the W3C
- CSS syntax and terminology
- CSS values and units
- The color and property values
- Type and universal selectors
- Class and ID selectors
- Class and ID selector exercise
- Descendant selectors
- Grouping selectors
- Inheritance and specificity
- The cascade and importance
- Project: Adding colors
- Pseudo-class selectors and links
- Project: Styling links
3. The Box Model
- Introduction to the box model
- Inline, block, and display
- The box model properties
- The box properties syntax and usage
- Debugging the box model
- Padding, margin, and border
- Margin and layouts
- Project: Adding content wrappers
- Project: Margin and padding
4. Typography
- Typography for the web
- Changing the 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 shorthand
- Text-decoration, text-align, and line-height
- Project: Typography styles
5. Layouts: Float and Position
- Introduction to float
- The float and clear properties
- Float and collapsed container
- Layouts and the box model
- Project: Float and box model fix
- Position
- Position and z-index
6. Layouts: Flexbox and Grid
- Introduction to Grid and Flexbox
- Introduction to Flexbox
- Flexbox: Orientation and ordering
- Flexible sizing
- Flexbox exercise
- Flexbox: Alignment
- Project: Flexbox alignment
- Introduction to CSS Grid
- The explicit grid
- The implicit grid
- Grid placement properties
- Project: Grid columns and Firefox Grid Inspector
7. Advanced Selectors
- Introduction to advanced selectors
- Relational selectors: Combinators
- Project: Updates with combinators
- Pseudo-class selectors: First and last
- Project: Advanced selectors
8. Fluid and Responsive Layouts
- Introduction to responsive design
- Project: Creating fluid layouts
- Flexible background images
- Project: Flexible background image
- Introduction to media queries
- Media queries, widths, and breakpoints
- Testing responsive layouts
- Project: Media queries and responsive layout