Modern CSS Layout for UI Designer (1h)

Moving from a responsive column-based design to a modern flex/grid CSS layout.

Most designers are familiar with responsive design, a column-based layout approach with fixed breakpoints to cover all screen sizes. However, with modern CSS layouts, we can move beyond the rigid structure, crafting designs that are flexible and dynamic, seamlessly adjusting to different screen sizes.

In this course, we will explore all CSS layout tools like Flexbox, CSS Grid, Media Queries and Container Queries in a UI designer-friendly way. There will be code snippets here and there to play with, but rather than learning to code, this is about grasping concepts and designing with real possibilities and limitations in mind and how we can translate this to Figma. 

This course is for designers and developers who want to understand each other's tools to improve conversation and collaboration dramatically.

Videos cover:

1. Responsive Column Grids vs Modern CSS Layout
2. Which layout approach should I be using? Pros and Cons
3. Responsive Design
4. Setting up Responsive Column-Based Design in Figma
5. CSS Flexbox Introduction
6. Flexbox to Figma: Auto Layout Magic!
7. CSS Grid Introduction
8. CSS Grid to Figma
9. Breakpoints and CSS Media Queries
10. Typography: Breakpoints or CSS Clamp
11. Breakpoints to Figma
12. Container Queries Introduction
13. Container Queries to Figma

Already a member? Click here