Sign up
Take full course

Already a member? Click here

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


Take full course

Already a member? Click here

Join the Newsletter

Sign up and be the first to know about new releases, workshops, and articles.