0% completed

All LessonsFree 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

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

Project

Creating an Online CV with HTML and CSS

Build Amazing Layouts with HTML5, CSS3, and Bootstrap 4/

...

/

Introduction to Flexbox

Introduction to Flexbox

Learn to make responsive web pages using flexbox.

We'll cover the following...

What is Flexbox?

We’ll convert the static layout into a responsive layout in this chapter. When we created this chapter, we thought deeply about how a beginner will get the most out of reading it.

Should we take an example of floats in a layout? These are not considered the best practice anymore; note that we ...