Join Morten Rand-Hendriksen for an in-depth discussion in this video Color tools in the browser, part of Responsive Web Design in the Browser.
- [Voiceover] A big part of the design process…is experimenting with colors…and in design applications color experimentation…is really easy because we can use color droppers…and color spaces and transparencies…and so on to experiment.…What if I told you all of this is possible…in the browser as well.…You see the developer tools not only allow us…to apply basic hex colors to our rules…which is what you normally do,…we can also use them to pick colors…from a color space or even apply transparencies…or pick colors from within the browser.…When we do so, we can switch between…hex, RGBA and HSLA markup…and that's not all.…
If we look at this element that we applied…a background color to previously in the course…you'll notice I used the HSLA values.…So it's a blue of 197 degrees.…It has 53 percent saturation…and 64 percent lightness…and a transparency of .8.…So if I want to I can just go in and alter these…values and see what happens.…I can make this into maybe 120 so it's green.…I can make it darker, so I'll set it to 32…
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