Join Morten Rand-Hendriksen for an in-depth discussion in this video Tools and setup, part of Learning Responsive Web Design in the Browser.
- [Voiceover] Throughout this course I'll be using only two tools, the Chrome web browser you see here with its default developer tools and the Atom code editor to save the code. You'll see me switch back and forth between these constantly and that's what you're going to do too. In Chrome you can get to the developer tools by either clicking F12 or Control + Shift + I on Windows or if you're on a Mac, click Command + Shift + I. You can also open the developer tools to a specific element by simply right-clicking on that element, selecting Inspect and now you'll see the developer tools are focused on that particular element.
When you open the developer tools for the first time they appear down here on the bottom third of your screen, but you can change the position of these developer tools if you want to by toggling this hamburger donair thing here. Here you can dock it either as a separate window, or to the bottom, or to the side. So throughout this course I'll be docking the tool to the side here so it's easy to see what's going on. One very powerful feature of the developer tool we'll be using extensively in this course is this one here, the little mobile phone that says Toggle device mode.
With this tool you can resize the view port without resizing the entire browser window. You can do that by pulling the toggles here or by defining a width and a height manually up here. In Atom I'm using the tool as it is out of the box. To start I've opened the exercise_files folder as the main folder. You can do that by going to File and Open Folder and just navigate to wherever you placed the exercise files for this course. And from here you can see all of the exercise files for the different movies.
So right now we're on movie 02_01. So here you have all the files for that movie. As you move forward, you'll find the starting point for each movie in the exercise files for that movie and in the practice environment on the video page. To make the CSS easier to modularize and maintain throughout the course the project has a main style sheet, a file called style.css, that imports a list of modular style sheets from the CSS folder. As we progress through the course you'll see me add new files for each module or main element I'm working on.
I should point out that this modularization is only used for the design portion of the project. Once I start building the actual site I combine all of these modules into one CSS file for simplicity. I should also mention I won't use any pre or post-processing tools or anything else in this course. In the real world I would use a Grunt task runner PostCSS, an automatic browser refresh, to simplify the process and make things a little easier to manage. A lot of people would also use tools like Sass or Less and other code helper to make the process easier.
However these tools fall outside the scope of this course but if you're interested you can check out Ray Villalobos' course, PostCSS: First Look to get a general idea of how these tools might help you in the designing the browser process.
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