Prototyping in the Browser
Treehouse
Course Summary
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.
-
+
Course Description
About this Course 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
About the Teacher
Nick is a teacher at Treehouse and an independent game developer. His Twitter handle is @nickrp.
-
+
Course 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. 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. 5 steps
