From the course: Learning Responsive Web Design in the Browser
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
✓ Solution: Create a container map and modularize the design - WordPress Tutorial
From the course: Learning Responsive Web Design in the Browser
✓ Solution: Create a container map and modularize the design
- If you completed the challenge, you should now have a fairly complex map of containers and modules in front of you. Now is my turn to show you how I would solve the same challenge. Just to make it easier to follow, I'm using Power Point to do this here. In normal circumstances I would use either pen and semi transparent paper, or Adobe Illustrator. To make it easier to see what I'm doing, I'll draw red lines to clearly indicate the boxes. Alright, let's start with the mobile view. When I approach a challenge like this I always start at the very top and move my way down so that I'm sure I cover everything. And at the very top I right away see I have a module at the top that is the header section. Now on the mobile view that would only display the site title, the menu is hidden elsewhere. And on the desktop view I know that the header will also contain the menu. The next module I see is this one here that has some sort of text at the top and then some other text, and it's all boxed…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
Use the browser as a design canvas1m 53s
-
Establish a design language for your site1m 23s
-
Draft layouts with pen and paper1m 48s
-
Map out containers by drawing boxes54s
-
Modularize the design1m 30s
-
✓ Challenge: Create a container map and modularize the design1m 43s
-
✓ Solution: Create a container map and modularize the design4m 29s
-
-
-
-
-