Tools and setup - WordPress Tutorial

- [Instructor] Throughout this course, I'll be using only two tools. The Chrome web browser you see here with it's 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 don-air 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 easier to see what's going on. One very powerful feature of the developer tools 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 viewport without resizing the entire browser window. And you can do that either 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 place the exercise files for this course. And from here you can see all the exercise files for the different movies. So right now we are 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. To make the CSS easier to modularize and maintain throughout the course, the project has a main style sheet, the 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, pulse CSS and 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, Pulse CSS First Look, to get a general idea of how these tools might help you in the design and the browser process.