CSS: Combining Grid and Flexbox

Focused View

Emily Kay

3:50:55

0 View

[1] Introduction

[1] Custom web layouts with Grid and Flexbox.mp4

00:59

[2] Using the exercise files.mp4

02:42

[3] What you should know.mp4

01:32

[4] Using development tools.mp4

05:07

[2] 1. What Is Flex

[1] What is Flexbox.mp4

02:38

[2] Flexbox syntax.mp4

04:16

[3] Flexbox container properties.mp4

03:04

[4] Flexbox item properties.mp4

08:46

[5] Using Flexbox Challenge.mp4

02:56

[6] Using Flexbox Solution.mp4

05:35

[3] 2. What is Grid

[1] What is Grid.mp4

03:08

[2] Grid syntax.mp4

02:12

[3] How does Grid work.mp4

08:22

[4] Grid container properties.mp4

10:06

[5] Grid item properties.mp4

09:50

[6] Functions and keywords.mp4

08:29

[7] Using Grid Challenge.mp4

02:57

[8] Using Grid Solution.mp4

04:44

[4] 3. Combining Technologies

[1] Grid vs. Flexbox.mp4

05:31

[2] Combining Flexbox and Grid.mp4

02:02

[3] Analyzing a layout.mp4

02:43

[4] Choosing the right solution for the job.mp4

03:13

[5] Using Grid and Flexbox Challenge.mp4

04:14

[6] Using Grid and Flexbox Solution.mp4

07:00

[5] 4. Build a Webpage Using Flexbox and Grid

[1] Overview of the project.mp4

02:41

[2] Webpage header with hero section.mp4

08:30

[3] Create a hamburger menu for mobile.mp4

07:12

[4] Create a horizontal menu for desktops.mp4

07:52

[5] Web cards, part 1.mp4

05:56

[6] Web cards, part 2.mp4

06:56

[7] CTA summaries.mp4

03:29

[8] Team section for mobile.mp4

08:19

[9] Team section for desktops.mp4

03:44

[10] Problem section.mp4

05:24

[11] Media objects for mobile.mp4

06:59

[12] Media objects for desktop.mp4

04:48

[13] Picture gallery.mp4

09:45

[14] Footer for large screen.mp4

07:05

[15] Footer for extra large screens.mp4

06:04

[6] 5. Build a Form Using Flexbox and Grid

[1] Overview of project.mp4

03:24

[2] Form for mobile.mp4

03:57

[3] Form for desktops.mp4

06:17

[7] 6. Support

[1] Compatibility and resources.mp4

03:04

[2] Feature queries.mp4

06:46

[8] Conclusion

[1] Next steps.mp4

00:37

Description

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.

More details

User Reviews

Rating

average 0

Total votes0

Focused display

CSS

Emily Kay

Instructor's Courses

Linkedin Learning

View courses Linkedin Learning

LinkedIn Learning is an American online learning provider. It provides video courses taught by industry experts in software, creative, and business skills. It is a subsidiary of LinkedIn. All the courses on LinkedIn fall into four categories: Business, Creative, Technology and Certifications. It was founded in 1995 by Lynda Weinman as Lynda.com before being acquired by LinkedIn in 2015. Microsoft acquired LinkedIn in December 2016.