For the most performant and easy to manage CSS, place media queries close to the modules they interact with. This will make it easier to read the code, and will also allow the browser to apply the media queries as they appear. In this online video tutorial you'll learn how to design media queries at a module level in the browser.
- [Voiceover] Now that you've seen the basic technique…of using the browser viewport as the design surface,…and the developer tools as design tools,…let's take things to the next level with some modern CSS3.…Between the previous movie and this one…I've added some modular CSS to our project using the…same techniques I showed you in the last two movies.…In the browser you can see all I've done…is apply some basic styling to the boxes,…the intro,…the levels section,…and the footer,…and, so far, all I've done is very basic CSS,…so you can see all of it in the exercise files…for this movie, 02_08,…you find it under boxes,…intro, levels,…and footer.CSS.…
In this movie I want to highlight why the browser…is often a better design surface for web design…than a regular design application,…and we're going to do that by focusing on two elements.…The first one are these images that…you see in the levels section.…Right now, these images are square images…with a grey border around them,…but if you remember back to the style tiles,…
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