From the course: Learning Responsive Web Design in the Browser
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Map out containers by drawing boxes - WordPress Tutorial
From the course: Learning Responsive Web Design in the Browser
Map out containers by drawing boxes
- [Voiceover] In addition to helping you quickly run through an experiment with layout ideas, hand-drawn layout drafts are a great tool for mapping out the semantic markup structure of your base HTML documents. Once you start the design process in the browser, you need to have containers to hook your CSS rules to. With the layout draft, you can easily map out the majority of these containers and structures before writing a single line of code, giving you a rough idea of how to structure your HTML. This process is pretty simple. Either use a semi-transparent piece of paper to overlay the original drafts or scan the drafts into your computer and start drawing containers. you want to map out all the different containers and elements you think will need separate handling, and also indicate what elements need to be grouped together and what elements are stand alone. Once you have a finished container map, it'll become the basis of your HTML document and a reference as you start designing…
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.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.
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
-
-
-
-
-