Join Morten Rand-Hendriksen for an in-depth discussion in this video Thank you!, part of Learning Responsive Web Design in the Browser.
- [Voiceover] Now that we're done,…do you feel like you're ready to start designing…in the browser?…Yes? That's great.…If you still feel kind of apprehensive, don't worry.…Wrapping your head around the idea…that the browser is a design surface…can take quite some time,…and just by watching this course,…you are well on your way.…Now it's time to start using the browser…and the developer tools…to design new, amazing websites,…and I'm sure once you get started,…you'll never look back.…One of the main takeaways you probably have from this course…is that CSS is an incredibly powerful tool…for designing in the browser.…
A solid understanding of CSS,…both core principles and new advanced tools and techniques…are invaluable in this respect.…So, to help you on your way to future learning,…here are some courses worth checking out…right here in the library.…First of all, James Williamson…has some amazing courses on CSS.…CSS Fundamentals is a great starter…and you should also spend some time…with his CSS: Selectors course that burrow into…
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