Learning Responsive Web Design in the Browser
1h 52mIntermediate2016-03-28
Authors
Morten Rand-Hendriksen
Senior Staff Instructor, Speaker, Web Designer, and Software Developer
Course details
With all the web design software available, why would you design in the browser? We are living in a brave new world of responsive design. Websites can be read on mobile devices, tablets, desktops, and even on the smart watches on our wrists. Most static web design tools don't account for that. The browser is an endless, flexible canvas. It's a natural place to code, and its dynamic design surface and instant feedback allows for more responsive web designs.
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.
Learning objectives
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
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.
Learning objectives
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
Skills covered
Responsive Web DesignWordPressWeb DesignLearningWeb DevelopmentOpen Source
Concepts
0. Introduction
- 01 - Welcome
- 02 - What to know before you start this course
1. Design Preparation
- 03 - Use the browser as a design canvas
- 04 - Establish a design language for your site
- 05 - Draft layouts with pen and paper
- 06 - Map out containers by drawing boxes
- 07 - Modularize the design
- 08 - ✓ Challenge - Create a container map and modularize the design
- 09 - ✓ Solution - Create a container map and modularize the design
2. Visual Design in the Browser
- 10 - Tools and setup
- 11 - Start with a core setup
- 12 - Create a baseline document with HTML5
- 13 - Sidebar - A simple RWD principle
- 14 - Apply fonts and responsive typography
- 15 - Work on one module at a time
- 16 - A practical approach to responsive web design
- 17 - Use modern technologies to simplify the design process
- 18 - Create responsive layouts with Flexbox
- 19 - Color tools in the browser
- 20 - Color experimentation and the value of HSLA
- 21 - ✓ Challenge - Design the article page in the browser
- 22 - ✓ Solution - Design the article page in the browser
3. Interaction Design in the Browser
- 23 - Interaction design through CSS
- 24 - CSS transforms
- 25 - Experimentation through image filters
4. Designing WordPress Themes in the Browser
- 26 - Design responsive WordPress themes in the browser
Next Steps
- 27 - Thank you