Bootstrap Basics: Program Responsive Websites
4.8 (499 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
5,276 students enrolled

Bootstrap Basics: Program Responsive Websites

Learn to hand-code your first responsive website with this popular, free and open-source framework in 3 hours.
4.8 (499 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
5,276 students enrolled
Last updated 8/2013
English
English [Auto]
Current price: $44.99 Original price: $74.99 Discount: 40% off
2 days left at this price!
30-Day Money-Back Guarantee
This course includes
  • 3 hours on-demand video
  • 2 articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • In this course, you will learn the fundamentals of Twitter Bootstrap and how to take advantage of it's amazing features
  • By the end of the course, you will have built a fully-responsive webpage with Bootstrap 3
  • You will learn how to code a jQuery Sliding Carousel
  • You will be introduced to the Bootstrap 3 "grid", and how to hand-code any layout at hyper speeds
  • You will know how to add flair and to your layout using Bootstrap 3 components, such as: CSS3 Buttons, Icon Fonts, Device-Specific Text & Elements, Panels and so much more
  • You will learn how to embed a responsive Google Map right on your website
  • You will become familiar with popular tactics to engage your users with compelling call to actions, beautiful typography, and sexy buttons
Course content
Expand all 28 lectures 03:12:36
+ Preparation
5 lectures 19:10
In this lecture, we briefly cover what Bootstrap 3 is and why it is different than the older versions of Twitter Bootstrap.
Preview 01:56
In this lecture, we walk through the final project and learn how we will be using Bootstrap 3 to create an awesome, responsive web page.
Preview 08:57
In this lecture, we go over the course files you will be using to build your project from start to finish.
About the Course Files
07:07

This lecture includes a link to a downloadable ZIP file with all of the necessary course files & assets to start building your project.

Download your course files here

Download the Course Files
00:04
In this lecture, we create our own copy of the Starter Assets so we can begin building our Bootstrap 3 website.
Preview 01:06
+ Hand Coding the HTML5 Markup
1 lecture 09:01
In this lecture, we code the HTML for the layout & structure of our responsive website.
Coding the General Layout & Structure
09:01
+ The Navigation Bar
2 lectures 24:43

In this lecture, we code the HTML for the navigation bar.

Coding the Navigation Bar
13:14
In this lecture, we code the HTML for the Bootstrap 3 dropdown menus in the navigation bar.
Coding the Dropdown Menus
11:29
+ The Sliding Carousel
3 lectures 33:29
In this lecture, we export our carousel background images out of Photoshop.
Exporting the Carousel Assets from Photoshop
06:08
In this lecture, we code the HTML for the animated carousel.
Coding the Carousel
12:16
In this lecture, we style the animated carousel using CSS.
Styling the Carousel
15:05
+ The Big Callout
3 lectures 26:49
In this lecture, we code the HTML for the "big callout" of our website.
Coding the Callout
14:58
In this lecture, we style the "big callout" using CSS.
Styling the Callout
05:49
In this lecture, display an animated Bootstrap 3 style alert box using jQuery.
Using jQuery to display an Alert Box
06:02
+ The 3-Row Feature Section
4 lectures 15:03
In this lecture, we export the badge assets out of Photoshop.
Exporting the Badge assets from Photoshop
01:33
In this lecture, we code the HTML for the features section.
Coding the Feature Section
10:59
In this lecture, we style the features section with CSS.
Styling the Feature Section
01:57
Update: A Note on Media Queries
00:34
+ The "Tabbable" Content
1 lecture 14:03
In this lecture, we code the HTML for the "tabbable" section of our website.
Coding the Tab Markup
14:03
+ The Modal
3 lectures 23:28
In this lecture, we code the HTML structure for the Bootstrap 3 "Modal Window".
Coding the Modal container
09:33
In this lecture, we code the HTML for the form within the Modal window.
Coding the Form
07:26
In this lecture, we code the HTML and jQuery for the Bootstrap 3 "tooltip" and "popover" within the Modal window.
Coding the Tooltip & Popover with jQuery
06:29
+ The Typography Section
1 lecture 05:28
In this lecture, we code the HTML for the typography and "list group" section.
Coding the Typography Content
05:28
+ The Course Featurettes
2 lectures 12:13
In this lecture, we code the HTML for the thumbnail, or "course featurette" section of our website.
Coding the Thumbnails
07:50
In this lecture, we style the featurettes with CSS.
Styling the Thumbnails
04:23
Requirements
  • Computer
  • Text Editor (TextWranger, Espresso, or Coda recommended)
  • Very basic knowledge of HTML & CSS
Description

Join Over 2,000 Very Happy Bootstrappers!

Bootstrap is the most popular front-end framework on the web today, and people are going nuts over it! Why? Because it's incredibly easy to learn, and because you can save hours of work (or hundreds of dollars in precious development time)!

Taking a step-by-step approach, this course will have you learning by doing, and you will become well-acquainted with the Bootstrap framework in very little time!

Learn the Most Popular Web Design Framework Quickly and Easily

  • Responsive web design
  • Attractive sliding carousels
  • Popup & Modal windows
  • Media Queries
  • HTML Form Layout
  • Beautiful Typography
  • Increase development time by 50% or more!

Hundreds of thousands of websites are using Bootstrap to achieve beautiful, unique, and custom layouts. It's time you learn this framework, and hit the ground running!

Boost Your Income by Learning Bootstrap

Whether you're self employed, or work at a company — understanding how to develop website layouts with Bootstrap will save you and your company precious development time.

Self employed? Look at it this way.

Two self-employed web developers are each hired to build a small website for $1,000. Developer #1 hand codes his website and it takes him 40 hours to complete, effectively making $25/hour. Developer #2 uses Bootstrap to build his website, and it takes him 20 hours, effectively making $50/hour. Which developer do you want to be?

Work at a studio?

Bootstrap is a valuable skill. It's fundamental that company employees keep up to date with the latest technologies. An educated employee is an incredibly valuable asset. If you prove to your company that you can build high-quality websites in record time with a framework like Bootstrap, you have negotiating power for a higher salary.

Are you an Entrepreneur?

If you're starting a new business, but only have a shoestring budget for your new venture, do yourself a favour and learn to code your company website with Bootstrap. You'll save yourself thousands of dollars, and be grateful you invested in yourself!

Invest in your future

With the incredibly valuable skills you will learn in this course, you will make the value of this course back 10x by completing only a single web design job! And it's completely risk-free! If you take this course and don't think it's worth the value you paid — you have 30-days to get a full refund.

In 3 - 5 hours of your time, you will build a truly beautiful web page you didn't know you had the ability to do! There is no reason why you shouldn't start right now. Invest in your future, and join me on the other side!

Get started today by clicking “Take This Course".

See you on the inside!

Who this course is for:
  • Web Design Students
  • Web, Graphic & Print Designers
  • Front-End Developers
  • Back-End Developers
  • Computer Programmers
  • Marketers
  • People wanting to upgrade their knowledge on Bootstrap 3