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.
A practical approach to responsive web design - WordPress Tutorial
From the course: Learning Responsive Web Design in the Browser
A practical approach to responsive web design
- [Voiceover] Following the principles of Mobile First Design, I always design everything in the browser to fit the smallest screen first. Now that we have a layout that looks great on smaller screens, we can start widening the viewport to find out where to place our breakpoints and change the display. This allows us to create unique designs and layouts that suit every possible screen width. The process starts by finding the first breakpoint. So here, you simply widen the viewport until things start looking crappy, which is about somewhere around here. So, maybe 600 pixels. You can see the width up here, and this is starting to look less than ideal. That means it's time to add our first breakpoint. And I'll do that right inside banner.css. Scroll down, and go at media screen and min-width 600 pixels. Now I need to decide what rules I want to target in this new media query. So, if I look a bit closer at my content here, you see we have this section with the class banner that contains…
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
-
-
-
-