Prototyping in the Browser Course (How To)

Before you design a website, it's important to have some kind of a plan or a wireframe to guide your efforts. But sometimes when you go from a simple sketch to digital pixels, the results aren't exactly what you expect. When you work with real HTML and CSS, and you're able to see your site on a real screens, you're able to see a more accurate representation of the final result. In this course, we're going to build a website prototype using the Bootstrap web framework.

What you'll learn

• Prototyping with Bootstrap
• Blocking Content
• Design Patterns
• Fonts and Colors

Page Layout

A webpage doesn't always translate perfectly from a wireframe to the browser. Sometimes proportions or responsive sizes can be different than you expect. We're going to take a wireframe and turn it into code using Bootstrap.

Chevron 5 steps

• Why Prototype in a Browser?

  2:59

• HTML Structure

  6:10

• The Profile Section and Image Gallery

  6:29

• Defining Content Areas

  8:29

• Page Layout

  5 questions

Design Patterns

Many design problems share the same characteristics, so premade components and ideas - sometimes called "design patterns" - can be used to create a user experience that is consistent and familiar.

Chevron 5 steps

• Solutions to Common Design Problems

  3:28

• Creating a Flexible Image Gallery

  10:35

• Responsive Menus

  7:50

• Image Carousels

  7:06

• Design Patterns

  5 questions