Explore the concepts that form the foundation of CSS. Learn how to select content, style text, manage layouts, and more as you work on a series of real-world projects.
Overview
Syllabus
Introduction
- Getting started with CSS
- What you should know
- How to complete the exercises
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- Continuing beyond the essentials with CSS
Taught by
Christina Truong
Related Courses
Related articles
Reviews
4.7 rating, based on 3 Class Central reviews
4.7 rating at LinkedIn Learning based on 952 ratings
-
Sidhartha MohantyI am beginner to the course and it helped me a lot to get in touch with the essentials.
Great explanatory and really enjoyed learning. -
Very helpful!
Christina helped In breaking down these basics with ease. I almost got carried away that I'm still a beginner and this is just the beginning part of my web development journey, lol.
We need more people like her. I really appreciate her time and effort in bringing these all together in one piece. Gracias, Truong -
it is a good course but i didnt get the certificate what i need to do ..................the mendor is very very very good at teaching
