Category Archives: Web Page Design


In this project, you’ll build a wireframe mobile application using Bootstrap, your HTML and CSS skills and your graphic design knowledge from previous semesters.


webappA wireframe is a prototype for a software application. It looks, and even feels, a lot like what the finished app would look and feel like, but it just might not actually work. Wireframes are much faster to build than actual mobile apps, and provide developers with the ability to gain important feedback early on before pouring resources into building the “real” thing.
In a team of 2-3 develop a concept for a mobile app and build a wireframe version of it. Use the code below to help you get started.


	Web App



if(("standalone" in window.navigator) && window.navigator.standalone){
var noddy, remotes = false;
document.addEventListener('click', function(event) {
noddy =;
while(noddy.nodeName !== "A" && noddy.nodeName !== "HTML") {
noddy = noddy.parentNode;
if('href' in noddy && noddy.href.indexOf('http') !== -1 && (noddy.href.indexOf( !== -1 || remotes))
document.location.href = noddy.href;


Lesson 6: Navigation

In this lesson, we’ll examine how to create responsive  navigational components on your website.

Navigation Components

Present Your Tutorial

In a small group, create a short Google Slide presentation to introduce the new features that you learned about in your video. Also include a example.

Lesson 4: CSS Classes

In the following lessons, you’ll dive deeper into some of the lesser known CSS classes that come baked into Bootstrap.

Basic Bootstrap CSS Classes


In a small group, create a Google Slide presentation to share what you learn based on the assigned video tutorial that your group watches. Be prepared to present what you learn to the class.

Lesson 3: Rows and Columns

In this lesson we’ll examine another key component of Bootstrap’s grid system.

Rows and Containers

Rows must always go inside a container and should include columns. View the following two videos on to better understand how these two components work.

Break Points


Styles Conference

Let’s take what we’ve learned so far about using containers, rows, and columns and apply it to our last project – The Styles Conference homepage.
Do your best to rebuild the styles conference homepage by leveraging Bootstrap’s grid system to convert the page into a responsive layout. Don’t worry if the widths, fonts, and colors aren’t precise at this point. Simply capture the spirit of the page using Bootstrap.

Bootstrap Template

Columns Continued

View the following tutorials to learn more about the features of Bootstrap grid system.

Lesson 2: Containers

In this lesson, we’ll examine Bootstrap’s grid system to better understand how to position elements on a page.


We’ll look at both fluid and fixed with containers. To understand fixed width containers, it’s important to understand breakpoints. Refer to the image below:

Watch the video below

Code Snippets

  background-image: url('../images/wolf.jpg');
  background-position: center center;
  background-size: cover;

Project File

Lesson 1: Getting Started

In this lesson, we’ll set up an instance of bootstrap using content delivery networks.

Bootstrap Terms

Take a moment to search the following terms, and try to define them in your own words

  • Framework
  • Content Delivery Network (CDN)
  • jquery


Watch the following two video tutorials from to get started working in Bootstrap.


<!-- FOOTER SECTION - Before closing  tag -->

Bootstrap 3

In this lesson, we’ll examine an extremely popular framework on the web called Bootstrap.


Visit the link below to view examples of websites built on top of the Bootstrap framework. Select one such website and complete the analysis worksheet below.

Watch the video at the link below to get a broad perspective of what Bootstrap is, and how it can be used rapidly build exceptional websites.