- Key concepts
-
Intro to Advanced Grids
-
Grid systems
-
Advanced Grid example
- Practice (carpentry site)
-
What you'll build: the About section
-
→ Your turn: About section instructions
- Wrap up
-
Checkpoint
-
On to the next course
Layouts with Advanced Grids
Take your designs to the next level: achieve pixel-perfect perfection with Advanced Grids!
Using Advanced Grids to achieve complex layouts is an incredibly powerful skill to have at your disposal.
Designs with unique layouts that might have taken hours to code to display properly across devices are now able to be built with just a few clicks. We'll show you how!
Join us as we use an Advanced Grid to update the 'About' section in the carpentry site that we've been building together.
At the end of this course, you'll be able to:
- understand how widgets behave when placed inside an advanced grid
- describe the differences between advanced grids vs. inner columns
- identify when to use advanced grids
- overlap elements in your designs
- practice manipulating elements within an advanced grid to match a mockup
Joining us in the middle?
This course is a part of a path. Each course contains lessons at the beginning and then a hands-on activity to practice that skill in the editor. If you are jumping into this course and want to complete the activity, please complete the first course or the following tasks before starting this course:
- Download the zip file to collect the assets you'll need
- Open the brief to find information about the site and your client
- Create a site from the Editor 2.0 Electrician template so you can build with us!
For a better experience, you should have:
- Free (or paid) Duda account — sign up
- Chrome or Safari browser
- Headphones or speakers
- Completed the previous parts of this learning path