Organizing your content in virtual boxes before building your markup will greatly simplify the process of designing in the browser. In this online video tutorial you'll learn how to identify containers and hierarchy in your markup before writing a single line of code.
- View Offline
- [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 in the browser.…
In this course, Morten Rand-Hendriksen explains his approach to designing in the browser, which starts well before he even starts coding. He shows how to define the layout on paper and create a "language" for the site, and then builds a baseline document with HTML5. Then he uses CSS to guide the look of the site and the layout, using media queries and Flexbox to add responsive behaviors. In chapter 3, Morten improves the site's interactivity using CSS transitions and transforms. Finally, he reveals how to use these techniques to build WordPress themes in the browser.
Each step involves design strategies, best practices, and actual code examples that will turn the web browser into your new favorite design tool.
- Use the browser as a design canvas
- Draft layouts with pen and paper
- Modularizing the design
- Create a baseline document with HTML5
- Create responsive layouts with Flexbox
- Applying CSS transitions and transforms
- Building WordPress themes in the browser