Want to design in the browser? Learn how to use the browser's flexible canvas and a combination of HTML and CSS to build more responsive, interactive websites and WordPress themes.
- View Offline
- [Voiceover] Hello, and welcome to responsive web design in the browser. You may have noticed that more and more people are talking about designing in the browser. If you want to know what that's all about, and how to do it, you've come to the right course. I'm senior staff author, Morten Rand-Henderiksen, and I'm here to walk you through the tools and techniques that turn the web browser into your new favorite design application. We'll start by discussing preparatory steps to designing in the browser, and I'll show you how to plan your design before writing a single line of code. Then, we'll take a deep dive into designing in the browser and look at tools, techniques, tips and tricks that will make you see the browser in a whole new light.
I'll show you some new cool web technologies that add interactivity to your designs. Finally, I'll wrap up with a brief discussion on how to design Word Press themes in the browser. The medium of the website is the web browser, so it only makes sense that we design our websites in the browser. I'm here to get you on your way, and show you how to do it right. So clear your mind, boot up your browser, and let's get cracking with responsive web design 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