From the course: Learning Responsive Web Design in the Browser
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Use modern technologies to simplify the design process - WordPress Tutorial
From the course: Learning Responsive Web Design in the Browser
Use modern technologies to simplify the design process
- [Voiceover] Now that you've seen the basic technique of using the browser viewport as the design surface, and the developer tools as design tools, let's take things to the next level with some modern CSS3. Between the previous movie and this one I've added some modular CSS to our project using the same techniques I showed you in the last two movies. In the browser you can see all I've done is apply some basic styling to the boxes, the intro, the levels section, and the footer, and, so far, all I've done is very basic CSS, so you can see all of it in the exercise files for this movie, 02_08, you find it under boxes, intro, levels, and footer.CSS. In this movie I want to highlight why the browser is often a better design surface for web design than a regular design application, and we're going to do that by focusing on two elements. The first one are these images that you see in the levels section. Right now, these images are square images with a grey border around them, but if you…
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
-
(Locked)
Start with a core setup3m 5s
-
(Locked)
Create a baseline document with HTML51m 53s
-
(Locked)
Sidebar: A simple RWD principle1m 1s
-
(Locked)
Apply fonts and responsive typography8m 8s
-
(Locked)
Work on one module at a time8m 30s
-
(Locked)
A practical approach to responsive web design6m 39s
-
(Locked)
Use modern technologies to simplify the design process9m 18s
-
(Locked)
Create responsive layouts with Flexbox9m 44s
-
(Locked)
Color tools in the browser4m 33s
-
(Locked)
Color experimentation and the value of HSLA5m 21s
-
(Locked)
✓ Challenge: Design the article page in the browser1m 24s
-
(Locked)
✓ Solution: Design the article page in the browser8m 21s
-
-
-
-