Mini Map
Search
⌘ K
Log In
Build Amazing Layouts with HTML5, CSS3, and Bootstrap 4
0%
1.
Introduction
Who Is This Course For
2.
Whitespace, HTML Elements, and CSS Selectors
Browser Whitespace
Getting Started Using CSS
Elements and Class Selectors
Summary
Quiz
3.
CSS Display Property
Controlling Document Flow
Block and Inline Elements
Overriding Span Elements
Summary
Quiz
DIY: Basic Structure
Solution: Basic Structure
4.
The Box Model
Previewing the Box Model in the Browser
Controlling the Box Model
Summary
Quiz
5.
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
6.
Images and Floats in CSS
Images in CSS
Issues with Floats and Layouts
Clearing Floats
Practical Examples of Clearing Floats
Summary
Quiz
7.
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
8.
Building the First Layout
Mockup
The calc() Function in CSS
Responsive Web Layouts
Summary
Quiz
9.
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
10.
CSS Resets and Emmets
CSS Resets
Emmet
Summary
Quiz
11.
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
12.
An Overview of Popular CSS Frameworks
Backgroud of HTML and CSS
Bootstrap, Bulma, and MDL
Introduction to SCSS
Summary
Quiz
13.
Micro CSS Framework
Build Your Own CSS Microframework
Building a Layout with Our Micro CSS Framework
Building a Layout with Bootstrap 4
Summary
Quiz
14.
CSS Transitions, Animations, and Transforms
Introduction to Transitions
Introduction to CSS Animations
Introduction to CSS Variables
Summary
Quiz
Challenge: Animations
Solution: Animations
15.
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
16.
CSS Tips and Tricks for Beginners
Tips and Tricks
17.
Wrapping Up
Conclusion
Project
Premium
Creating an Online CV with HTML and CSS
Home
/
Courses
/
Build Amazing Layouts with HTML5, CSS3, and Bootstrap 4
Quiz
Test your understanding of this chapter.
We'll cover the following...
...