No-Code CSS Layouts with Webflow

Explore the fundamentals of creating and managing CSS layouts in the no-code website builder Webflow.

Introduction

• Learning CSS layouts without code
• Course prerequisites

1. Styling HTML and Overriding Styling

• Understanding HTML elements
• Global styling with HTML elements
• Overriding base styling and CSS variables
• Worksheet: Setting base styling and variables

2. Webflow and CSS Layout Basics

• What is the box model?
• Understanding block, inline, and inline-block
• Sections, containers, and CSS in Webflow
• Challenge: Text-based section
• Solution: Text-based section
• Units of measure: px, em, rem, vw, vh, %, and more
• Widths, heights, and their maximums and minimums
• Understanding overflow and fit
• Challenge: Vertical buttons
• Solution: Vertical buttons

3. Grid, Flexbox, and QuickStack

• Introducing Flexbox
• Advanced Flexbox settings
• Introducing Grid
• Grid areas and exceptions to the grid
• What is QuickStack?
• Challenge: Working with QuickStack, Grid, and Flexbox
• Solution: Working with QuickStack, Grid, and Flexbox

4. Positioning, Floats, and Practice

• Understanding static and absolute positioning
• Relative positioning
• Fixed and sticky positioning
• Floating images inside of text

Conclusion

• Learn more about Webflow