No-Code CSS Layouts with Webflow
2h 53mIntermediate2024-02-15
Authors
Jen Kramer
Teaches web design and development
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.
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.
Skills covered
WebflowPrototypingWeb StandardsWeb DesignFront-End Web DevelopmentProjectProduct and ManufacturingWeb Development
Concepts
Introduction
- Learning CSS layouts without code
- Course prerequisites
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
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
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
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