Join Morten Rand-Hendriksen for an in-depth discussion in this video Start with a core setup, part of Learning Responsive Web Design in the Browser.
- [Narrator] Designing in the browser…I find it helpful to start with a pre-build core setup.…This gives me a baseline document and some core CSS…to work with so I'm not starting from scratch every time.…There are many types of core set ups available on the web.…You have everything from the basic HTML5 boilerplates,…to advanced frameworks like Bootstrap and Foundation.…But I like to start as minimalist and unopinionated…as possible, so I built my own.…What you see here is my standard core set up and I use it…anytime I start a new design in the browser.…
I mentioned it in the previous movie and now it's time to…take a closer look.…You'll find this core set up in the exercise files,…and I've also added it in the materials folder…in the exercise files.…You're free to use it when you do your own designs…in the browser after finishing this course.…My core set up consists of an index.html file,…seen here containing basic mark-up and a standard…multi-level menu.…The style.css file serves as the core for my CSS.…And I also have a CSS folder with multiple…
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.
- 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