Understanding the need for mapping containers and modularizing your design is one thing. Mastering these skills is another. Challenge yourself and test to see what you've learned by completing this challenge.
- [Voicover] It's challenge time.…If you haven't done a challenge in a course before…here's the gist of it.…A challenge is like a mini lab built into the course…where I give you some instructions and guidelines…on what to do then you pause the course,…sit down and work your way through the challenge…and then when you're done…you come back to the course and I'll explain…how I solve the same challenge…and walk you through my solution.…The purpose of these challenges…is to get you to start working with…what you've learned in the course immediately…and allow you to experiment and explore on your own…rather than just following along with me verbatim.…
Sounds exciting, right?…There'll be a couple of different challenges in this course…that allow you to experiment with some of…the key aspects of what you've learned.…In this first challenge…we're focusing on mapping out containers and modules…before designing in the browser.…Here's what I want you to do.…In the exercise files for this movie…you'll find two drafts of…the main view of our design project,…
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