Course Overview

Implementing Responsive Layouts

Implementing Responsive Components

About This Course

The Responsive Layout Process

Making a Plan

About Exercise Files

A Tale of Two Bethanys

Frontend Development at Globomantics

Clarifying Requirements

Dissecting a Mockup

The One-stop Web Dev Shop

Good Layouts

What before How

Common Layout Patterns

What Is Clean Code

Clean HTML

Semantic HTML and ARIA

Web Standards and Accessibility

Clean CSS

CSS Naming Conventions

Flexbox and Grid Revisited

Flexbox and Grid Similarities

Implementing a Layout Using Grid

Flexbox and Grid Differences

Align and Justify Properties

Implementing a Layout Using Flexbox

Grids - Positioning Items In-depth

Grids - Defining Grids In-depth

Summary - When to Use What

Problem Solving with Grid and Flexbox

Implementing Responsive Layouts

Implementing Grid Strategies

Media Queries

Markup for Layout

Implementing Layouts - About Page

Implementing Layouts - Header & Footer

Implementing Layouts - Visit Us Page

Responsive Layout Summary

Implementing Layouts - Pies Page

Implementing Layouts - Home Page

Implementing Responsive Components

Techniques for Responsive Images

Container Queries

Implementing Components - Visit Us Page

Implementing Components - Home Page pt. 2

Implementing Components - Home Page pt. 1

Implementing Components - Header & Footer

Implementing Components - About Page

Implementing Components - Pies Page pt. 1

Responsive Components Summary

Implementing Components - Pies Page pt. 2

Summary & Next Steps