Building a Responsive Website with Bootstrap

Build unique and responsive business layouts using modern techniques with Twitter Bootstrap
0.0 (0 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
26 students enrolled
$85
Take This Course
  • Lectures 16
  • Contents Video: 2 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 11/2014 English

Course Description

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 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.

About the Author

Brock Nunn is a frontend web developer from Tulsa, Oklahoma. Brock works full time as a graphic designer at Rovi Corporation. Over the past six years, Brock has taken part in web projects 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.

What are the requirements?

  • 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.

What am I going to get from this 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

What is the target audience?

  • 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.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introducing Bootstrap
04:50
Tired of difficult web design? Take control of your projects with Twitter Bootstrap.
Section 2: Setting Things Up
04:47
Download and set up Twitter Bootstrap.
05:26
We must activate Twitter Bootstrap within our website files.
06:11
Utilize the LESS preprocessor to take full control of Twitter Bootstrap.
Section 3: Building Our Site – Part 1
05:43
Laying out an effective web page can be difficult. Take control of it using the power of the Twitter Bootstrap framework.
04:50
Need to make a bold statement? Making use of a Bootstrap Carousel will do the trick.
05:01
Tidy up your web layout using Bootstrap’s simple and effective grid system.
06:19
Need to inform potential customers about a product or service? Use Bootstrap's thumbnails along with an effective call to action.
Section 4: Building Our Site – Part 2
11:48
We extend Bootstrap and use LESS to create a custom footer.
09:31
Take control of the look and feel of your website. Using LESS, we will add customizations deep into Boostrap to deliver a unique-looking website.
10:51
We continue to use LESS to customize our website’s look and feel.
19:48
Easily add pages and new layouts to your designs. We will use everything that we have learned to create a great content page.
Section 5: Universal Files
04:06
Cut down on website management time after launch using PHP.
06:35
Easily add new pages to a website using PHP Includes.
Section 6: Deploying Our Site
04:49
Make use of the Prepros tool to compress the CSS files.
05:26
Easily deploy your Twitter Bootstrap website.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Packt Publishing, Tech Knowledge in Motion

Over the past ten years Packt Publishing has developed an extensive catalogue of over 2000 books, e-books and video courses aimed at keeping IT professionals ahead of the technology curve. From new takes on established technologies through to the latest guides on emerging platforms, topics and trends – Packt's focus has always been on giving our customers the working knowledge they need to get the job done. Our Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.

Ready to start learning?
Take This Course