From the course: Learning Responsive Web Design in the Browser

Unlock the full course today

Join today to access over 22,500 courses taught by industry experts or purchase this course individually.

✓ Solution: Create a container map and modularize the design

✓ Solution: Create a container map and modularize the design - WordPress Tutorial

From the course: Learning Responsive Web Design in the Browser

Start my 1-month free trial

✓ 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…

Contents