No-Code CSS Layouts with Webflow

Course details

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.

Concepts

0. Introduction

01 - Learning CSS layouts without code
02 - Course prerequisites

1. Styling HTML and Overriding Styling

03 - Understanding HTML elements
04 - Global styling with HTML elements
05 - Overriding base styling and CSS variables
06 - Worksheet - Setting base styling and variables

2. Webflow and CSS Layout Basics

07 - What is the box model
08 - Understanding block, inline, and inline-block
09 - Sections, containers, and CSS in Webflow
10 - Challenge - Text-based section
11 - Solution - Text-based section
12 - Units of measure - px, em, rem, vw, vh, , and more
13 - Widths, heights, and their maximums and minimums
14 - Understanding overflow and fit
15 - Challenge - Vertical buttons
16 - Solution - Vertical buttons

3. Grid, Flexbox, and QuickStack

17 - Introducing Flexbox
18 - Advanced Flexbox settings
19 - Introducing Grid
20 - Grid areas and exceptions to the grid
21 - What is QuickStack
22 - Challenge - Working with QuickStack, Grid, and Flexbox
23 - Solution - Working with QuickStack, Grid, and Flexbox

4. Positioning, Floats, and Practice

24 - Understanding static and absolute positioning
25 - Relative positioning
26 - Fixed and sticky positioning
27 - Floating images inside of text

Conclusion

28 - Learn more about Webflow