Prototyping in the Browser Course

Go to class
Write Review

Free Online Course: Prototyping in the Browser Course provided by Treehouse is a comprehensive online course, which lasts for Less than 1 hour of material. The course is taught in English and is free of charge.

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