CSS Grids and Flexbox in Responsive Web Design

CSS Grids and Flexbox in Responsive Web Design

Год выпуска: January 30, 2018
Производитель: frontendmasters
производителя: frontendmasters/workshops/responsive-web-design-flexbox-css-grid/
Автор: Jen Kramer
Продолжительность: 5 hours, 38 minutes
Тип раздаваемого материала: Видеоклипы
Язык: Английский
Описание: Starting with a review of floats for context, but quickly moving into Flexbox and CSS grids, this essential course is for web developers that want to build responsive, beautiful web applications faster using less code and best practices. Master CSS Grid and Flexbox, the latest tools and tricks to layout beautiful, responsive web applications with less code.
This course and others like it are available as part of our Frontend Masters video subscription.

Содержание
frontendmasters/workshops/responsive-web-design-flexbox-css-grid/

Формат видео: MP4
Видео: H264, 1920x1080, 16:9, 23.98 fps, avg 900 kb/s
Аудио: AAC, 48kHz, 127, stereo

Table of Contents
Introduction and Setup
Introduction

00:00:00 - 00:02:45
Introduction
After introducing herself, Jen provides an overview of the course.
Resources

00:02:46 - 00:05:16
Resources
The GitHub repository for this course is explored and described by Jen.
Defining Responsive Design

00:05:17 - 00:08:31
Defining Responsive Design
Jen defines responsive design's three main characteristics: grid-based layout, images that resize, and media queries.
Floats
Overview of Floats

00:08:32 - 00:16:06
Overview of Floats
Jen gives a brief overview of floats, including its history, its characteristics, pros and cons, and some examples are reviewed.
Float Exercise Setup

00:16:07 - 00:25:34
Float Exercise Setup
The exercise files are outlined and described by Jen as she sets up this coding challenge. She also covers a border declaration box to help with resizing elements.
Float Exercise Solution

00:25:35 - 00:35:50
Float Exercise Solution
Jen gives us a walkthrough of the solution, and how it works at different screen sizes.
Flexbox
Introducing Flexbox

00:35:51 - 00:40:22
Introducing Flexbox
Jen introduces Flexbox, where it came from, what its requirements are, flex row vs. flex column and what its pros and cons are.
History and Browser Support

00:40:23 - 00:43:54
History and Browser Support
Three previous versions of Flexbox are explored, and Jen shows examples of prefixing for browser support, before getting into a discussion of current Flexbox support.
Code Demo: Flexbox Setup

00:43:55 - 00:46:45
Code Demo: Flexbox Setup
Jen sets up a demo where that explores how Flexbox can change the page layouts by going through the different CSS properties. As part of the setup ’li’ HTML content is placed inside of a ‘ul’.
Code Demo: Flexbox Properties Explored

00:46:46 - 00:53:45
Code Demo: Flexbox Properties Explored
The Flexbox properties Jen demonstrates here affect the ‘ul’, and include ‘flex', 'flex-direction', 'flex-wrap’, and ‘flex-flow’ for shorthand.
Code Demo: Flexbox Justification

00:53:46 - 00:59:50
Code Demo: Flexbox Justification
Jen explores Flexbox properties that justify content within the container ‘ul’ using ‘justify-content’.
Code Demo: Flexbox Alignment

00:59:51 - 01:05:29
Code Demo: Flexbox Alignment
Using the Flexbox properties under ‘align-items’, Jen shows the different alignment options available within the container ‘ul’ in our example.
Code Demo: Individual flex-items

01:05:30 - 01:14:39
Code Demo: Individual flex-items
Switching to Flexbox properties that affect the individual flex-items, or the ‘li’ HTML elements in our example, Jen reviews ’flex-grow’, flex-shrink’, ‘flex-basis’.
Code Demo: Questions & Answers

01:14:40 - 01:22:04
Code Demo: Questions & Answers
Jen answers question from the audience regarding the Flexbox code demo so far.
Flexbox Games and Exercise

01:22:05 - 01:25:05
Flexbox Games and Exercise
Jen introduces two great resources for playing with and practicing Flexbox properties.
Flexbox Grid
Practical Use of Flexbox in a Grid System

01:25:06 - 01:31:16
Practical Use of Flexbox in a Grid System
To review practical applications of Flexbox in a grid system, Jen reviews ‘flexboxgrid’, a framework that allows you to explore various layouts to review the bare HTML and CSS to see whats possible with the properties.
Flexbox Review

01:31:17 - 01:33:12
Flexbox Review
As a review, and starting to apply Flexbox properties to the floating code exercise covered earlier, Jen covers some code we can use on the flex containers and flex items in the upcoming code demo.
Code Demo: Exercise Solution for Desktop

01:33:13 - 01:50:34
Code Demo: Exercise Solution for Desktop
Reworking the code examples of the pie website layout done earlier with floats, Jen shows how to set up containers and items in HTML and take control of them in CSS for a desktop friendly grid system layout.
Code Demo: Exercise Solution for Responsive

01:50:35 - 01:57:51
Code Demo: Exercise Solution for Responsive
Jen works through how to layout the code example for Tablet and Mobile formats.
Flexbox Exercises
Flexbox Exercise 1 Setup: Content Manipulation

01:57:52 - 02:00:36
Flexbox Exercise 1 Setup: Content Manipulation
In this coding exercise, Jen adds another row into the HTML code example and creates new requirements for this content to be solved with Flexbox CSS properties.
Flexbox Exercise 1 Solution

02:00:37 - 02:09:33
Flexbox Exercise 1 Solution
Jen and the audience review a solution for this coding challenge.
Re-ordering Content and Layout

02:09:34 - 02:15:29
Re-ordering Content and Layout
Using 'flex-direction: row-reverse', and some CSS properties Jen rearranges the example content and layout in ways that were extremely difficult with floats.
Flexbox Questions and Answers

02:15:30 - 02:17:09
Flexbox Questions and Answers
Jen leads a discussion around different approaches to the previous exercise and content, and current best practices.
Flexbox Exercise 2 Setup: Full Webpage Layout

02:17:10 - 02:19:19
Flexbox Exercise 2 Setup: Full Webpage Layout
Jen’s challenge in this exercise is to take a full webpage laid out with floats and restyle it with the grid system using Flexbox.
Flexbox Exercise 2 Solution

02:19:20 - 02:26:49
Flexbox Exercise 2 Solution
Jen walks through how to solve this exercise and answers questions from the audience.
Flexbox Exercise 3 Setup: Image Gallery

02:26:50 - 02:29:42
Flexbox Exercise 3 Setup: Image Gallery
This exercise challenge is to find two solutions to Jen's proposed image gallery problem. Number one is allowing images on the page in any number per row with any alignment you choose, and number two is allowing images to display in a fixed number per row for a given screen dimension.
Flexbox Exercise 3 Solution

02:29:43 - 02:39:17
Flexbox Exercise 3 Solution
Using Flexbox, Jen creates two types of images galleries to solve this exercise.
Responsive Images
Introducing Responsive Images

02:39:18 - 02:43:08
Introducing Responsive Images
Introducing responsive images, Jen describes the different challenges around the desktop, mobile, and tablet in today's modern web. She then covers how to use the new 'picture' tag released in HTML 5.1 to solve these problems, along with how to address backward compatibility.
Code Demo: Responsive Images Application

02:43:09 - 02:49:55
Code Demo: Responsive Images Application
Using the HTML elements 'picture' and 'source', along with media queries, Jen demonstrates how to loading different images based on dimensions.
Picturefill for Older Browser Compatibility

02:49:56 - 02:54:15
Picturefill for Older Browser Compatibility
Since older browsers do not work with the 'picture' tag, Jen demonstrates a tool called 'Picturefill' which can be used as a shiv.
Image Downloads and Performance

02:54:16 - 02:57:30
Image Downloads and Performance
Jen explores what images your browser downloads based on the code you write.
Code Demo: Background Images

02:57:31 - 03:03:13
Code Demo: Background Images
Using media queries in CSS, Jen applies a background image to the example website, along with answering some follow up questions from the audience.
Responsive Images Exercise

03:03:14 - 03:05:51
Responsive Images Exercise
Jen sets up