Design in the browser starts with semantic accessible markup. In this movie you'll learn how to start your responsive web design in the browser right by providing a HTML5 framework for your project.
- [Voiceover] At the core of every website…and every web document is the content itself.…To design a great website, you have to have…the content structure in place,…and that's where the design in the browser process starts.…It's important to point out here…that you don't need the final content for this,…just some representative content…that looks and behaves like the final content.…With the layout drafts, the container and module maps,…and some representative content,…we can start marking up index.html.…How exactly you go about doing this…is about personal preference and habit,…but my experience is it's best…to start at the top and work your way down.…
Personally, I like to mark up the containers…along with the content as I move my way down.…This makes it easier to remember…to add comments at every closing tag,…and it also makes it easier to preserve…proper indentation in the document,…so that visual hierarchy and structure is maintained.…For this project, I've already written a bunch of text,…and I've sourced a series of images…
Author
Morten Rand-Hendriksen
Released
3/28/2016In 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
Skill Level Intermediate
Duration
Views
-
Introduction
-
Welcome1m 5s
-
-
1. Design Preparation
-
Modularize the design1m 30s
-
2. Visual Design in the Browser
-
Tools and setup2m 55s
-
Start with a core setup3m 5s
-
Work on one module at a time8m 30s
-
Color tools in the browser4m 33s
-
-
3. Interaction Design in the Browser
-
CSS transforms3m 7s
-
4. Designing WordPress Themes in the Browser
-
Next Steps
-
Thank you!2m 12s
-
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Create a baseline document with HTML5