logo

CSS

CSS (Cascading Style Sheets) is a stylesheet language responsible for the styling of your web page. It is used to express how HTML elements are styled, positioned and rendered on all of the different screen displays and sizes.

GETTING STARTED

Introduction Getting Started VS Code Extensions Adding CSS To The Page

FUNDAMENTALS

Syntax Overview Comments Basic Selectors Grouping Selectors Adjacent Sibling Combinator General Sibling Combinator Child Combinator Descendant Combinator The Universal Selector Cascade Overview Specificity Advanced Specificity Best Practices Inheritance Colors Background Colors

TYPOGRAPHY

Adding Fonts Use Italics Make Text Bold Change The Size Of Text line-height Spacing Letters Text Transform Text Decoration Text Alignment Ch Unit

THE BOX MODEL

What Is A Margin? Margin Properties What Is A Padding? Padding Properties Borders Width & Height Box Model Overview Box Sizing & Border Box

PROJECT ONE

Building A Card Component

CSS UNITS

CSS Units Introduction The Problem With Pixels The rem Unit The em Unit The Viewport Units Percentages The ch Unit

FLEXBOX

What Is Flexbox? The Dimensions Of Layouts The Display Property Flexbox Flex Direction Justify Content Align Items Flex Wrap & Align Content Gap Flex Grow & Flex Shrink Flex Basis Flex Shorthand Align Self Order How To Center Anything

PROJECT TWO

Project Two Intro Project Setup Simple Header Advanced Header BEM Naming Convention Hero Section Pricing Section Features Section Contact Section Footer Section

BEGINNER RESPONSIVENESS

What Is Responsiveness? Media Queries 101 Mobile VS Desktop First Show & Remove Content

PROJECT THREE

Project Three Intro Responsive Hero Responsive Pricing Responsive Features Responsive Contact

ADVANCED RESPONSIVENESS

Advanced Responsiveness Pre-Defined Media Queries New Container Utility Class How To Architect Your CSS

BACKGROUNDS & IMAGES

Backgrounds 101 Images On The Web Object Fit & Aspect Ratio

PROJECT FOUR

Hero Background

ANIMATIONS

Transforms Transitions 101 Keyframes 101

POSITIONS

Absolute Static & Relative Fixed & Sticky

GRID

Creating A Grid Rows & Columns Positioning Items Layering Items Implicit Grid Grid Units Grid Functions Grid Gap Grid Template Areas Justify & Align Items Justify & Align Self Justify & Align Content Auto Fit

PROJECT FIVE

Pricing Section

ADVANCED CONCEPTS

Thinking In CSS CSS Variables Margin Collapsing CSS Resets Utility Classes CSS Normalization Pseudo-Elements Pseudo-Classes

FINAL PROJECT

Project Intro Project Setup Resetting The CSS Theming Our Website The Utility-Classes Accessibility Concerns Setting The Stage Header Section Hero Section Pricing Section About Section Testimonial Section Features Section FAQ Section CTA Section Footer Section Git & Deploying Final Touches

EXTRA

Build Portfolio Website

dashboard / css / vs-code-extensions

VS Code Extensions

Previous LessonNext Lesson