English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 3h 50m | 841 MB
With Grid and Flexbox, CSS is changing dramatically. Whereas in the past, creating complex layouts required all sorts of CSS hacks, JavaScript, or both, now you can use Flexbox and Grid—tools designed specifically for layouts—to create responsive web pages with precise, custom layouts. In this course, Emily Kay covers the basics of Flexbox and Grid separately, from syntaxes to properties to how they work in general. After that, she details instances where you may need to use both to accomplish your layout goals. As Emily shows, when you use Flexbox and Grid together to combine their separate strengths, you can create and display complex web content in a beautiful, user-friendly way.
Table of Contents
Introduction
1 Custom web layouts with Grid and Flexbox
2 Using the exercise files
3 What you should know
4 Using development tools
1. What Is Flex
5 What is Flexbox
6 Flexbox syntax
7 Flexbox container properties
8 Flexbox item properties
9 Using Flexbox Challenge
10 Using Flexbox Solution
2. What is Grid
11 What is Grid
12 Grid syntax
13 How does Grid work
14 Grid container properties
15 Grid item properties
16 Functions and keywords
17 Using Grid Challenge
18 Using Grid Solution
3. Combining Technologies
19 Grid vs. Flexbox
20 Combining Flexbox and Grid
21 Analyzing a layout
22 Choosing the right solution for the job
23 Using Grid and Flexbox Challenge
24 Using Grid and Flexbox Solution
4. Build a Webpage Using Flexbox and Grid
25 Problem section
26 Media objects for mobile
27 Media objects for desktop
28 Picture gallery
29 Footer for large screen
30 Footer for extra large screens
31 Overview of the project
32 Webpage header with hero section
33 Create a hamburger menu for mobile
34 Create a horizontal menu for desktops
35 Web cards, part 1
36 Web cards, part 2
37 CTA summaries
38 Team section for mobile
39 Team section for desktops
5. Build a Form Using Flexbox and Grid
40 Overview of project
41 Form for mobile
42 Form for desktops
6. Support
43 Compatibility and resources
44 Feature queries
Conclusion
45 Next steps
Resolve the captcha to access the links!