Want to design in the browser? Learn how to use the browser's flexible canvas and a combination of HTML and CSS to build more responsive, interactive websites and WordPress themes.
Overview
Syllabus
Introduction
- Welcome
- What to know before you start this course
- Use the browser as a design canvas
- Establish a design language for your site
- Draft layouts with pen and paper
- Map out containers by drawing boxes
- Modularize the design
- ✓ Challenge: Create a container map and modularize the design
- ✓ Solution: Create a container map and modularize the design
- Tools and setup
- Start with a core setup
- Create a baseline document with HTML5
- Sidebar: A simple RWD principle
- Apply fonts and responsive typography
- Work on one module at a time
- A practical approach to responsive web design
- Use modern technologies to simplify the design process
- Create responsive layouts with Flexbox
- Color tools in the browser
- Color experimentation and the value of HSLA
- ✓ Challenge: Design the article page in the browser
- ✓ Solution: Design the article page in the browser
- Interaction design through CSS
- CSS transforms
- Experimentation through image filters
- Design responsive WordPress themes in the browser
- Thank you!
Taught by
Morten Rand-Hendriksen
