Back To Course Home

Build Amazing Layouts with HTML5, CSS3, and Bootstrap 4

0% completed

Introduction

Who Is This Course For

Whitespace, HTML Elements, and CSS Selectors

Browser Whitespace

Getting Started Using CSS

Elements and Class Selectors

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

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

Quiz

Test your understanding of this chapter.

Get hands-on with 1200+ tech skills courses.