Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Treehouse

Prototyping in the Browser Course (How To)

via Treehouse

Overview

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

Syllabus

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

Reviews

Start your review of Prototyping in the Browser Course (How To)

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.