Special offers now — see discounted courses.
day
:
hour
:
min
:
sec
See special offers
CSS Essential Training (2019)

CSS Essential Training (2019)

4h 30mBeginner2019-10-01

Authors

Christina Truong

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

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

Related courses

Related learn paths

About us

LyndaKade is a leading learning platform that helps people learn business, software, technology, and creative skills to achieve personal and professional goals.

Phone numberAparat ChannelTelegram SupportTelegram ChannelInstagram Page

All rights to this site belong to LyndaKade.

Terms of Service|Privacy Policy

نماد الکترونیک enamad در صورت اتصال با آی‌پی داخل کشور، نمایش داده خواهد شد.
logo-samandehi - لوگو ساماندهی
zarinpal
zibal