Building a Responsive Website with Bootstrap [Video]

Brock Nunn

Building a Responsive Website with Bootstrap [Video]
Downloadable video: $39.99
save 15%!

Packt Video. Stream online or download for unrestricted offline use. Learn more

Course Contents
The Author
Sample Clip
  • New! Packt Video courses: practical screencast-based tutorials that show you how to get the job done. Bite sized chunks, hands on instructions, and powerful results.
  • Implement incredible Bootstrap-only features such as the grid, image carousel, and more
  • Use Retina-ready icon fonts to make your site look awesome
  • Learn time-saving tips and tricks to optimize your site's performance

Video Details

Language : English
Release Date : Monday, February 24, 2014
Course Length : 1 hour 56 minutes
ISBN : 1782164987
ISBN 13 : 9781782164982
Author(s) : Brock Nunn
Topics and Technologies : Video, e-Learning, Open Source

Table of Contents

  1. Introducing Bootstrap [04:50 minutes]
    • Introduction

  2. Setting Things Up [16:23 minutes]
    • Downloading and Setting Up Files
    • Integrating Twitter Bootstrap
    • Getting Started with LESS

  3. Building Our Site – Part 1 [21:53 minutes]
    • The Home Page Part 1 – Building the Home Page
    • The Home Page Part 2 – The Slider
    • The Home Page Part 3 – The Grid
    • The Home Page Part 4 – Call to Action and Features

  4. Building Our Site – Part 2 [51:58 minutes]
    • Completing the Home Page
    • Adding Styles – Part 1
    • Adding Styles – Part 2
    • Additional Page Types and Styles

  5. Universal Files [10:41 minutes]
    • Setting Up PHP Includes – Part 1
    • Setting Up PHP Includes – Part 2

  6. Deploying Our Site [10:15 minutes]
    • Review Our Website
    • Deploy Our Project

Brock Nunn

Brock Nunn is a frontend web developer from Tulsa, Oklahoma. Over the past six years, Brock has taken part in web projects, both big and small. Self taught, Brock has a passion for teaching others with a simple and personal approach. Brock married his wife in June of 2009. When he is not neck deep in code, Brock enjoys making great food for his family, including his puppy Sugar.

Sorry, we don't have any reviews for this video yet.

Sorry, there are currently no downloads available for this video.

Code Downloads

Download the code and support files for this video.

Support, complaints and feedback.

Packt is committed to making Packt Video courses a valuable, useful way for IT professionals to learn new skills. We have made every effort to ensure that this course reaches the required standard and will work on our customer's devices. Please go to our support page.

What you will learn from this video course

  • Master web layouts using a modern and popular front-end framework
  • Implement custom layout elements such as page layouts, image carousels, and list styles
  • Easily manipulate a grid-based layout system with the Twitter Bootstrap grid
  • Extend Bootstrap using custom icon fonts to produce retina-ready graphics for any device
  • Build a unique homepage while learning about the visual hierarchy to lead the eyes of your users to what they need to see
  • Integrate the LESS preprocessing language to take full control of Twitter Bootstrap
  • Use deployment techniques that will make your site simpler and easy to manage
  • Optimize and deploy your website using modern techniques and a few easy tricks

Who this video course is for

If you are familiar with HTML, CSS, and basic JavaScript, and want to get a better handle on frontend website design, then this tutorial is for you. Beginners will find the sections on project initiation, folder setup, and deployment extremely useful and will be guided step-by-step through how to create their own site. More experienced users will be able to take advantage of the tips for CSS preprocessing using LESS.

In Detail

Twitter Bootstrap is one of the easiest CSS frameworks to use, and helps you design and build web applications. Bootstrap allows users to quickly get started with developing professional looking web applications. Bootstrap takes a great deal of the guess work out when it comes to difficult layout styles.

This tutorial will show you how to harness the power of the Twitter Bootstrap framework to create a custom responsive website for a fictional client. You will learn how to manage every aspect of building a responsive website from the initial download all the way through the process until you have a finished functioning website. This tutorial will also show you how to tame the Twitter Bootstrap framework! We will start from the first download and progress until we have a website ready to be published!

Learning to layout a unique website that will appeal to visitors can be a daunting task. In this course, we will use the Twitter Bootstrap framework to easily create a custom layout that looks great on any device. Using Bootstrap's unique features, you will learn just how easy it is to create your own site!

Through Building a Responsive Website with Bootstrap, you will gain the knowledge and experience to create your website.

Screenshots from the course

Building our site

Adding styles to the website

Getting started with LESS

Optimizing the website

Setting things up

Using the Prepros tool


Packt video courses are designed to cover the breadth of the topic in short, hands-on, task-based videos. Each course is divided into short manageable sections, so you can watch the whole thing or jump to the bit you need. The focus is on practical instructions and screencasts showing you how to get the job done.

An in-depth look at the Twitter Bootstrap framework from the angle of a web designer working on a new client site. The videos offer a relaxed and approachable look into the workflow of a frontend developer.

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software