- [Voiceover] The goal of this course is to teach you a process for designing responsive websites using the Browser as a design surface. To be able to follow along, you need to have a core understanding of HTML, CSS, and the CSS Box Model. If you're new to web design or need a refresher on either of these topics, here are some courses I recommend watching before continuing. First off, HTML Essential Training with James Williamson and CSS Fundamentals, also, with James Williamson. And secondly, Making Sense of the CSS Box Model by yours truly.
Combined, these courses will give you a firm understanding of how the techniques I use in the course actually work and you'll have a better understanding of what is going on as you're progressing through this course. In the course, I make reference to several design crafts and other design materials. All of these can be found in the Exercise Files. Some of them are under the Materials folder, that you can see here. Others are under the specific Exercise Files for a specific movie. In the course, I'll be working with an example project and you can follow along using either the Exercise Files or the practice environment.
If you want to match my environment exactly, go download Chrome, the web browser and also the Atom code editor, that you can find at atom.io. If you choose to use the Exercise Files on your own computer, each chapter and each movie has its own folder. As you can see here, under Chapter One, Movies Two, Six and Seven have Exercise Files. Some of these files will be code that you can work with inside Atom. Some of them are other types of files that you can open in other applications. As you progress through the course, to match my code exactly, simply open the folder that fits with the current movie you are watching.
Like I said, the main goal of this course is to teach you a process and the best way to get familiar with that process is to take what I'm showing you in the course and further with it. My recommendation to you is watch each movie then take the code provided and experiment on your own to see what else you can do and take my basic examples to the next level. I've also added a couple of challenges in the course to get you to really think about what you've learned. So in order to get the best results from your viewing, take what I give you, expand on it and pay special attention to the challenges and their solutions.
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