Grids & Responsive Design. Ultimate Guide for UX/UI Designer (Figma Files + Basic HTML & CSS)

In this class, you'll learn everything about using grids for your UI Design.

Grids are not only your best friend when it comes to creating a consistent layout. They are also the backbone when it comes to responsive design and making your product shine across all screen sizes.

We will start from zero and make sure you will be a pro by covering the following subjects:

• We will learn about the basic setup like Columns, Grutter, Margin, and Rows
• We will learn how to add content to the grid
• We will make sure to avoid common positioning mistakes
• Then we will have an intensive look at how Grids make your design responsive
• And how you, as a UX/UI Designer, set up your designs in Figma accordingly
• We will get into the details of how breakpoints work, where we can find them, and why they are such strange numbers
• We will learn about the difference between responsive and adaptive behaviour
• As a final project, we will be building our own responsive portfolio in Figma

Besides the classic Grids like Bootstrap and co, I will tell you a bit about my favourite grid, the CSS Grid, which is full of possibilities.

And yes, we will go the extra mile and look at some basic code, all set up for UX/UI Designers to really understand the technicality behind the product you are building.

The Figma and code templates I will show you are part of the course material to ensure you can dive right into the making. 

© moonlearning.io with moon learning

• Promo
• Welcome
• --> COURSE MATERIAL
• Understanding Columns Gutter and Margin
• Adding Elements to the Grid
• Avoid Common Positioning Mistakes
• How Does the Grid Become Responsive?
• Which Breakpoints Should I Use?
• Why Those Breakpoints?
• Responsive vs. Adaptive Grids
• Setting up Responsive and Adaptive Grids in Figma
• FIGMA: Responsive Grid Design Setup
• FIGMA: Adding Content to Adaptive Grids
• FIGMA: Adding Content to Responsive Grids
• Do I Really Need One Design per Breakpoint? That Is Crazy!
• Understanding CSS Grids
• FIGMA: CSS Grid Setup
• --> PROJECT: Responsive Portfolio in Figma
• BOOTSTRAP: Grids in HTML & CSS: Introduction
• --> COURSE MATERIAL: Bootstrap Grid
• BOOTSTRAP: HTML Setup
• BOOTSTRAP: Adding Fixed and Fluid Containers
• BOOTSTRAP: Adding Rows and Content
• BOOTSTRAP: Responsive Design in HTML & CSS
• CSS GRID: Introduction to CSS Grids
• --> COURSE MATERIAL: CSS Grid
• CSS GRID: Grid Setup
• CSS GRID: Fluid Design with Fraction Units
• CSS GRID: Advanced Distribution Gird Rows and Columns
• CSS GRID: Responsive Grids
• Thank You