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.
Sidebar: A simple RWD principle - WordPress Tutorial
From the course: Learning Responsive Web Design in the Browser
Sidebar: A simple RWD principle
- Before we dive in, let me take a brief sidebar to point out an important principle when designing in the browser. Always start with the smallest screen, and make everything look great. Then increase the viewport until things start looking weird, and at that point, add your media query breakpoints. And do this with individual elements. That way, you'll get a layout that's fully dynamic, and every, single element is designed to fit all possible screen widths and screen configurations. If you don't do this, you'll end up having major breakpoints across the entire site, and you'll get this kind of jarry, popping behavior on the site. it's much better if you focus on individual elements and add breakpoints where they're most natural according to the content. So, start with the smallest screen, make everything look great, increase the width until thinks start looking crappy, and add your breakpoints there. Then continue until things look crappy, and add another breakpoint, and do this for…
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
-
-
-
-