Free Sample
+ Collection

Building a Responsive Website with Bootstrap [Video]

Brock Nunn

Build unique and responsive business layouts using modern techniques with Twitter Bootstrap
RRP $84.99

Want this title & more?

$12.99 p/month

Subscribe to PacktLib

Enjoy full and instant access to over 2000 books and videos – you’ll find everything you need to stay ahead of the curve and make sure you can always get the job done.

Video Details

ISBN 139781782164982
Course Length1 hour 56 minutes

About This Video

  • 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

Who This Video 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.

Table of Contents

Introducing Bootstrap
Setting Things Up
Downloading and Setting Up Files
Integrating Twitter Bootstrap
Getting Started with LESS
Building Our Site – Part 1
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
Building Our Site – Part 2
Completing the Home Page
Adding Styles – Part 1
Adding Styles – Part 2
Additional Page Types and Styles
Universal Files
Setting Up PHP Includes – Part 1
Setting Up PHP Includes – Part 2
Deploying Our Site
Review our Website
Deploy Our Project

What You Will Learn

  • 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

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.



Read More