CSS: Variables and Fluid Layouts

Focused View

Jen Kramer

2:02:33

193 View

01 - Introduction

01 - The evolution of responsive design.mp4

01:34

02 - What you should know.mp4

02:05

02 - 1. Learn CSS calc()

01 - CSS calc() overview.mp4

03:01

02 - Applying calc() in a layout example.mp4

04:29

03 - Challenge Creating a type scale.mp4

03:36

04 - Solution Creating a type scale.mp4

01:54

03 - 2. Learn CSS Custom Properties

01 - CSS custom properties overview.mp4

03:44

02 - Configure CSS custom properties.mp4

02:26

03 - CSS custom properties and inheritance.mp4

04:27

04 - CSS custom properties and Sass variables.mp4

03:37

05 - Using Sass variables.mp4

03:25

06 - Challenge Add custom properties to type scale.mp4

02:27

07 - Solution Add custom properties to type scale.mp4

02:20

04 - 3. Create Layouts

01 - Mark up a simple four-column grid system.mp4

06:48

02 - Create a starting CSS for the grid system.mp4

07:01

03 - Add media queries to your grid system.mp4

11:39

04 - Rewrite CSS to integrate calc() and custom properties.mp4

07:53

05 - Rewrite CSS to integrate gaps between grid cells.mp4

04:35

06 - Make the layout formula even more flexible.mp4

09:26

07 - Challenge Media query integration.mp4

01:24

08 - Solution Media query integration.mp4

01:59

05 - 4. Refactor a Web Page

01 - Project Use calc() and custom properties.mp4

05:42

02 - Step 1 Apply the grid layout.mp4

10:26

03 - Step 2 Add custom properties to grid layout.mp4

09:58

04 - Step 3 Apply a type scale and custom properties.mp4

05:32

06 - Conclusion

01 - Next steps.mp4

01:05

Description

When responsive web design was first introduced, it was at once magical and inefficient. Designers had to work with floats to lay out their grid-based systems, as well as hack media queries. Recent advances in CSS simplify this process, letting your design adapt to circumstances more fluidly. But leveraging these new features requires abandoning current practices and shifting to a model where you trade precise control for consistency and ease of implementation. This course can help you make that shift. Jen Kramer lays out how to do math directly in CSS via the calc() function and leverage custom properties, or variables, to streamline your CSS. Along the way, Jen shares examples of how to use these properties, including how to add custom properties to type scale and work with Flexbox and Grid.

More details

User Reviews

Rating

average 0

Total votes0

Focused display

CSS

CSS Animations

Jen Kramer

Instructor's Courses

Want an expert curriculum developer and subject matter expert to design your no-code boot camp? I'm the person you've been looking for! I eliminate the web's gatekeepers by teaching the world how to tell their stories online in a fun and accessible way for all skill levels. Whether you are a code person or a no-code person, or if you have a deep technical background or none at all, you can create an online side hustle, change your career, sell your services, and market your products. I'm here to teach you how. Follow me at LinkedIn Learning for coding and no-code solutions to your problems. Follow me at Frontend Masters for coding solutions to your problems.

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.