AI Features
Log In
0% completed
All Lessons
Free Lessons (4)
Introduction
Who Is This Course For
Whitespace, HTML Elements, and CSS Selectors
Browser Whitespace
Getting Started Using CSS
Elements and Class Selectors
Summary
Quiz
CSS Display Property
Controlling Document Flow
Block and Inline Elements
Overriding Span Elements
Summary
Quiz
DIY: Basic Structure
Solution: Basic Structure
The Box Model
Previewing the Box Model in the Browser
Controlling the Box Model
Summary
Quiz
CSS Positioning
Introduction to CSS Positioning
Relative Positioning
Relative vs. Absolute Positioning
Positioning with the CSS ID Attribute
Summary
Quiz
DIY: Position the BOX
Solution: Position the BOX
Images and Floats in CSS
Images in CSS
Issues with Floats and Layouts
Clearing Floats
Practical Examples of Clearing Floats
Summary
Quiz
CSS Selectors and CSS Targeting Revisited
CSS Specificity
Commonly Used CSS Selectors
Practicing Slightly More Complex Selectors
Pseudo-Classes in CSS
Summary
Quiz
DIY: Change the floats
Solution: Change the floats
Building the First Layout
Mockup
The calc() Function in CSS
Responsive Web Layouts
Summary
Quiz
Converting Our First Layout Into a Responsive One
Introduction to Flexbox
Simple Flexbox-Based Non-Responsive Website Layout
Making Layout Responsive with Media Queries
Summary
Quiz
DIY: The Responsive Layout
Solution: The Responsive Layout
CSS Resets and Emmets
CSS Resets
Emmet
Summary
Quiz
Column-Based CSS Layouts
The History of Column-Based CSS Layouts
Building Our Own Column Grid System
Making CSS Column Grid Responsive
Summary
Quiz
DIY: Grid
Solution: Grid
An Overview of Popular CSS Frameworks
Backgroud of HTML and CSS
Bootstrap, Bulma, and MDL
Introduction to SCSS
Summary
Quiz
Micro CSS Framework
Build Your Own CSS Microframework
Building a Layout with Our Micro CSS Framework
Building a Layout with Bootstrap 4
Summary
Quiz
CSS Transitions, Animations, and Transforms
Introduction to Transitions
Introduction to CSS Animations
Introduction to CSS Variables
Summary
Quiz
Challenge: Animations
Solution: Animations
Introducing the CSS Grid
Layouts with Flexbox
Introduction to CSS Grid
Building a Simple Layout Using CSS Grid
Summary
Quiz
Challenge: CSS Grid Challenge
Solution: CSS Grid Challenge
CSS Tips and Tricks for Beginners
Tips and Tricks
Wrapping Up
Conclusion
Project
Creating an Online CV with HTML and CSS
Home
Courses
Build Amazing Layouts with HTML5, CSS3, and Bootstrap 4
DIY: Grid
Let's test your skills in the grid system.
We'll cover the following...
Problem statement
Desktop view
Mobile view
Build the layout
Problem statement
Make the following layout using
...