From the course: Learning Responsive Web Design in the Browser
Unlock the full course today
Join today to access over 22,400 courses taught by industry experts or purchase this course individually.
Work on one module at a time - WordPress Tutorial
From the course: Learning Responsive Web Design in the Browser
Work on one module at a time
- [Voiceover] Ok, now it's finally time to do some real design work in the browser. The trick here is to focus on one module at a time. Just to make it easier for you to follow, I've set up my desktop a little bit differently. I have Atom on the left and I can toggle this tree view on and off by either holding down Ctrl or Cmd and hitting Backslash, or by going to View and Toggle Tree View on and off. On the right, I have Chrome toggled for Device mode, and I have the developer tools on the right hand side. This set up allows me to design live in the browser, and immediately copy code from the browser to the files once I'm happy with the results. In this example we're going to be working with over the next two movies, I'll start with this top module here that I gave the class, Banner. By the end of it, I want it to look something like what you see here in my style tile. I want this section to be a full-bleed section, with this gigantic background image of a space capsule, with these…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
Tools and setup2m 55s
-
Start with a core setup3m 5s
-
Create a baseline document with HTML51m 53s
-
Sidebar: A simple RWD principle1m 1s
-
Apply fonts and responsive typography8m 8s
-
Work on one module at a time8m 30s
-
A practical approach to responsive web design6m 39s
-
Use modern technologies to simplify the design process9m 18s
-
Create responsive layouts with Flexbox9m 44s
-
Color tools in the browser4m 33s
-
Color experimentation and the value of HSLA5m 21s
-
✓ Challenge: Design the article page in the browser1m 24s
-
✓ Solution: Design the article page in the browser8m 21s
-
-
-
-