No-Code CSS Layouts with Webflow

Focused View

Jen Kramer

2:53:16

1,079 View

01 - Introduction

01 - Learning CSS layouts without code.mp4

00:52

02 - Course prerequisites.mp4

03:08

02 - 1. Styling HTML and Overriding Styling

01 - Understanding HTML elements.mp4

05:19

02 - Global styling with HTML elements.mp4

05:34

03 - Overriding base styling and CSS variables.mp4

08:28

04 - Worksheet Setting base styling and variables.mp4

06:07

03 - 2. Webflow and CSS Layout Basics

01 - What is the box model.mp4

11:03

02 - Understanding block, inline, and inline-block.mp4

06:35

03 - Sections, containers, and CSS in Webflow.mp4

08:09

04 - Challenge Text-based section.mp4

01:46

05 - Solution Text-based section.mp4

10:48

06 - Units of measure px, em, rem, vw, vh, %, and more.mp4

05:44

07 - Widths, heights, and their maximums and minimums.mp4

10:45

08 - Understanding overflow and fit.mp4

09:53

09 - Challenge Vertical buttons.mp4

01:55

10 - Solution Vertical buttons.mp4

06:06

04 - 3. Grid, Flexbox, and QuickStack

01 - Introducing Flexbox.mp4

08:23

02 - Advanced Flexbox settings.mp4

06:55

03 - Introducing Grid.mp4

08:27

04 - Grid areas and exceptions to the grid.mp4

06:19

05 - What is QuickStack.mp4

05:05

06 - Challenge Working with QuickStack, Grid, and Flexbox.mp4

02:33

07 - Solution Working with QuickStack, Grid, and Flexbox.mp4

05:38

05 - 4. Positioning, Floats, and Practice

01 - Understanding static and absolute positioning.mp4

07:56

02 - Relative positioning.mp4

05:41

03 - Fixed and sticky positioning.mp4

05:38

04 - Floating images inside of text.mp4

06:25

06 - Conclusion

01 - Learn more about Webflow.mp4

02:04

Description

Cascading Style Sheets, or CSS, is foundational to web development. Webflow allows you to create websites without code, but it's even easier and faster if you already know fundamental CSS layout concepts. In this course, explore the potential uses of CSS in Webflow with web design expert Jen Kramer.

Discover the basics of Webflow's CSS model to get started creating containers, blocks, and layouts for CSS conversion. Learn how to use Grid and Flexbox for advanced layouts as well as static, relative, and absolute positioning of elements. Along the way, Jen provides an overview of floats and breaks and how they affect page flow in your design. By the end of this course, you’ll be equipped with tips and techniques for creating and managing more efficient CSS properties in Webflow.

More details

User Reviews

Rating

average 0

Total votes0

Focused display

CSS

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.