CSS Essentials

Interested in this course? Email us at [email protected]

Course curriculum

1. Welcome
1. CSS Basics
2. CSS Targeting an Individual
3. CSS Targeting a Group
4. CSS Additional Targeted Styling
1. CSS Introduction
2. CSS Syntax
3. Playground - CSS Syntax
4. Coders Coffeehouse - CSS Syntax
5. The CSS Syntax Challenge
1. CSS Selectors
2. CSS Type selectors
3. Playground - Type Selectors
4. Coders Coffeehouse - Type Selectors
5. CSS Type Selectors Challenge
6. CSS Type Selectors Challenge two
7. Class Selectors
8. Playground - Class Selectors
9. Coders Coffeehouse - Class Selectors
10. Class Selector Challenge
11. Class Selector Challenge Two
1. CSS ID Selector
2. Playground - ID Selector
3. Coders Coffeehouse - ID selector
4. ID Selector Challenge
5. CSS Attribute Selectors
6. Playground - Attribute Selectors
7. Coders Coffeehouse - Attribute Selectors
8. Attribute Selectors Challenge
1. Pseudo-Class Selectors
2. Playground - Pseudo-class
3. Coders Coffeehouse - Pseudo-classes
4. Pseudo-classes Challenge
1. CSS DOM Selectors
2. CSS Child Selector
3. Playground - Child Selector
4. Coders Coffeehouse - Child Selectors
5. Child Selector Challenge
6. CSS Descendant Selector
7. Playground - Descendant Selector
8. Runnable Example - Descendant Selector
9. Descendant Selector Challenge
10. CSS Sibling Selector
11. Playground - Sibling Selector
12. Runnable Example - Sibling Selector
13. Sibling Selector Challenge
1. Inline, Embedded and External CSS
2. Inline CSS
3. Playground - Inline CSS
4. Coders Coffeehouse - Inline CSS
5. Inline CSS Challenge
6. Embedded CSS
7. Playground - Embedded CSS
8. Runnable Example - Embedded CSS
9. Embedded CSS Challenge
1. External CSS
2. Why External CSS?
3. Coders Coffeehouse - External CSS
4. CSS Precedence - Which CSS Wins?
5. External CSS and Precedence Challenge
1. CSS Source Order
2. Playground - Source Order
3. CSS Source Order Challenge
4. CSS Specificity
5. Playground - CSS Specificity
6. CSS Specificity Runnable Example
7. CSS Specificity Challenge
8. CSS Inheritance
9. Playground - CSS Inheritance
10. Runnable Example - CSS Inheritance
11. CSS Inheritance Challenge
12. General CSS Rules Challenge
13. Comments
1. Units of measurement
2. Pixels
3. Playground - Pixels
4. Coders Coffeehouse - Pixels
5. Pixels Challenge
6. em and rem
7. Playground - em and rem
8. Coders Coffeehouse - em and rem
9. Em Challenge
10. Rem Challenge
1. Percentage
2. Playground - Percentage
3. Coders Coffeehouse - percentage
4. Units of Measurement - Percentages Challenge
5. vw
6. Playground - vw
7. Runnable Example - vw
8. Units of Measurement - vw Challenge
9. vh
10. Playground - vh
11. Coders Coffeehouse - vh
12. Units of Measurement - vh Challenge
1. font-family
2. Playground - font-family
3. Coders Coffeehouse font-family
4. font-family challenge
1. Defining color in CSS
2. color
3. Playground - color
4. Coders Coffeehouse font color
5. color challenge
1. font-size
2. Playground - font-size
3. Coders Coffeehouse font-size
4. font-size challenge
5. font-weight
6. Playground - font-weight
7. Coders Coffeehouse font-weight
8. font-weight challenge
1. text-align
2. Playground - text-align
3. Coders Coffeehouse text-align
4. text-align challenge
5. vertical-align
6. Playground - vertical align
7. Runnable Example vertical-align
8. vertical-align challenge
1. text-transform
2. Playground - text-transform
3. Coders Coffeehouse text-transform
4. text-transform challenge
5. text-decoration
6. Playground - text-decoration
7. Coders Coffeehouse text-decoration
8. text-decoration challenge
9. font-style
10. Playground - font-style
11. Coders Coffeehouse font-style
12. font-style challenge
1. Chrome Developer Tools: Introduction
2. Chrome Developer Tools: Device Views
3. Chrome Developer Tools: CSS
1. The Box Model Introduction part 1
2. The Box Model Introduction part 2
3. Content
4. Playground - content
5. Coders Coffeehouse content
6. Padding
7. Playground - padding
8. Coders Coffeehouse padding
9. padding challenge
1. Border
2. Playground - border
3. Coders Coffeehouse border
4. border challenge
5. Margin
6. Playground - margin
7. Coders Coffeehouse margin
8. margin challenge
1. Backgrounds in CSS
2. Background Color
3. Playground - background-color
4. Coders Coffeehouse background-color
5. background-color challenge
6. background-image
7. Playground - background-image
8. Coders Coffeehouse background-image
9. background-repeat
10. Playground - background-repeat
11. Coders Coffeehouse background-repeat
12. background-repeat challenge
1. background-size
2. Playground - background-size
3. Coders Coffeehouse background-size
4. background-size challenge
5. background-position
6. Playground - background-position
7. Coders Coffeehouse background-position
8. background-position challenge
1. background-attachment
2. Playground - background-attachment
3. Coders Coffeehouse background-attachment
4. background-attachment challenge
5. shorthand background property
6. Playground - background
7. Coders Coffeehouse background shorthand
8. background shorthand challenge
1. Block-Level Elements
2. Playground - block-level
3. Coders Coffeehouse block-level
4. Block-Level Challenge
5. Inline Elements
6. Playground - inline
7. Runnable Example - inline
8. inline challenge
9. Inline-Block Elements
10. Playground - inline-block
11. Coders Coffeehouse inline-block
12. inline-block challenge
1. Visibility
2. Playground - visibility
3. Runnable Example visibility
4. Visibility Challenge
1. Static positioning
2. Playground - static
3. Static Runnable Example
4. Relative Positioning
5. Playground - relative positioning
6. Coders Coffeehouse relative positioning
7. Relative Positioning Challenge
1. Absolute positioning
2. Playground - absolute
3. Absolute Runnable Example
4. Absolute challenge
5. Fixed Positioning
6. Playground - fixed positioning
7. Coders Coffeehouse fixed positioning
8. Fixed Positioning Challenge
1. Z-index
2. Playground - z-index
3. Coders Coffeehouse z-index
4. z-index Challenge
1. The overflow property
2. Playground - overflow
3. Coders Coffeehouse - Overflow
4. Overflow challenge
5. The float property
6. Playground - float
7. Coders Coffeehouse float
8. Float Challenge
1. The clear property
2. Playground - clear
3. Coders Coffeehouse - Clear
4. Clear challenge
5. Centering
6. Playground - centering
7. Coders Coffeehouse centering
8. Centering Challenge
1. Coders Coffeehouse tidy-up
2. Coders Coffeehouse Final code
1. Understanding Filepaths
2. File Paths
1. Love Running Overview
2. Project Setup
3. Boilerplate
1. Header Structure
2. Google Fonts
3. Logo Styling
4. Navigation Styling 1
5. Navigation Styling 2
1. Hero Image Inclusion
2. Hero Image Animation
3. Hero Image Cover Text
1. Club Ethos Main Structure
2. Club Ethos Left Content
3. Club Ethos Right Content
4. Club Ethos Center Content 1
5. Club Ethos Center Content 2
6. Club Ethos Icons
1. Meetup Times Main Structure
2. Meetup Times Background
3. Meetup Times Foreground
1. Footer Main Structure
2. Footer Styling
1. Gallery Core Structure
2. Gallery Images
1. Club Ethos Media Queries - Tablet
2. Responsive Header
3. Responsive Main Image
4. Responsive Meeting Times
5. Responsive Gallery
1. Signup Form: Challenge 1
2. Signup Form: Challenge 2
1. Conclusion
1. Congratulations! You've just completed CSS Essentials

About this course

Free
268 lessons
3.5 hours of video content

Discover your potential, starting today

Enroll today

Introduction - Module Introduction

Introduction - CSS Overview

CSS Basics - CSS Syntax

CSS Basics - CSS Selectors - Type and Class

CSS Basics - CSS Selectors - ID and Attribute

CSS Basics - CSS Selectors - Pseudo-classes

CSS Basics - CSS DOM Selectors

CSS Basics - Inline and Embedded CSS

CSS Basics - External CSS and Precedence

CSS Basics - CSS Rules

CSS Basics - Units of measurement - pixels, em & rem

CSS Basics - Units of measurement - percentage, vw & vh

CSS Basics - Font Family

CSS Basics - Font Color

CSS Basics - Font Parameters

CSS Basics - Font Position

CSS Basics - Font Style

CSS Basics - Chrome Developer ToolsCompleted

CSS Basics - The box-model - Content and Padding

CSS Basics - The box-model - Border and Margin

CSS Basics - Background Appearance

CSS Basics - Background Positioning

CSS Basics - Background Source

CSS Basics - Layout

CSS Basics - Visibility

CSS Basics - Positioning - Static and Relative

CSS Basics - Positioning-Absolute and Fixed

CSS Basics - Z-index

CSS Basics - Layout Interactions - overflow and float

CSS Basics - Layout Interactions - clear and centering

CSS Basics - Coders Coffeehouse tidy-up

CSS Basics - File Paths

HTML/CSS Project - Love Running - Getting Set Up

HTML/CSS Project - Love Running - Creating the Header

HML/CSS Project - Love Running - Creating The Hero Image

HML/CSS Project - Love Running - Creating The Club EthosCompleted

HML/CSS Project - Love Running - Meetup Times

HML/CSS Project - Love Running - Site Footer

HML/CSS Project - Love Running - Gallery

HML/CSS Project - Love Running - Responsive Elements

HML/CSS Project - Love Running - Challenge: Signup Form

HML/CSS Project - Love Running - Module Conclusion

HML/CSS Project - Love Running - Congratulations! You've just completed CSS Essentials!

About this course