Join Morten Rand-Hendriksen for an in-depth discussion in this video ✓ Solution: Design the article page in the browser, part of Learning Responsive Web Design in the Browser.
- [Voiceover] You've finished the challenge,…and now it's my turn to show you…how I solved the same challenge.…You'll find my complete solution…in the exercise files for this movie, 02_13.…First, let's take a quick look…at the page as it was…before you started the challenge.…You may have noticed that the page…actually works quite well on small screens…because it has a standard vertical stack.…And this is the great thing about HTML,…if you do nothing but mark up your content properly…it'll always display ok on all screens,…at least small ones.…However, when we start increasing the width of the screen,…things needs some work.…
For example, my huge mugshot here…is way too big, and there's not visual separation…between things like image captions…and the rest of the content.…And as I keep increasing the width of the content,…it just keeps getting wider and wider…and becomes hard to read.…By contrast, this is the finished result…after I did design in the browser.…Here you see the content looks quite different.…We have a very striking heading here,…
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