CSS Essential Training 2019

CSS Essential Training 2019

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 4h 28m | 833 MB

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.

Topics include:

  • 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
Table of Contents

1 Styling documents consistently
2 What you should know
3 Tools and sample projects
4 HTML and CSS
5 Browser developer tools
6 Referencing CSS
7 Project overview and setup
8 Optimizing images and retina displays
9 Project Relative paths
10 Absolute paths
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
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
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
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
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
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
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
76 Next steps