Join Morten Rand-Hendriksen for an in-depth discussion in this video ✓ Challenge: Design the article page in the browser, part of Responsive Web Design in the Browser.
- [Voiceover] We've arrived at the second challenge…in this course.…In this challenge, you'll put what you've learned…about responsive web design in the browser…into practice by designing a secondary page in our project.…In the exercise files for this movie,…you'll find a new document titled listening.html…with some unstyled content, including text and images.…You'll also find draft layouts for this page…under the drafts folder that show you rough drafts…of how this page should be presented…on small, medium and wide screens.…Right now, the markup on this document…is as basic as possible.…
You are inheriting the styles from the header,…menu, and footer from the index page,…but everything else is unstyled.…Your challenge is to use the tools and techniques…we've covered to map out the containers and components…in the article layout and use the browser…to design the view to fit the style tiles…and the draft layout.…When you do so, remember to reuse existing styles…when possible and modularize your styles for this view,…
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