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.5 (298 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.
4,178 students enrolled
$75
Take This Course
  • Lectures 28
  • Contents Video: 3 hours
    Other: 1 min
  • 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 8/2013 English

Course 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!

What are the requirements?

  • Computer
  • Text Editor (TextWranger, Espresso, or Coda recommended)
  • Very basic knowledge of HTML & CSS

What am I going to get from this course?

  • 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

What is the target audience?

  • 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

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: Preparation
01:56
In this lecture, we briefly cover what Bootstrap 3 is and why it is different than the older versions of Twitter Bootstrap.
08:57
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.
07:07
In this lecture, we go over the course files you will be using to build your project from start to finish.
Article

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

01:06
In this lecture, we create our own copy of the Starter Assets so we can begin building our Bootstrap 3 website.
Section 2: Hand Coding the HTML5 Markup
09:01
In this lecture, we code the HTML for the layout & structure of our responsive website.
Section 3: The Navigation Bar
13:14

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

11:29
In this lecture, we code the HTML for the Bootstrap 3 dropdown menus in the navigation bar.
Section 4: The Sliding Carousel
06:08
In this lecture, we export our carousel background images out of Photoshop.
12:16
In this lecture, we code the HTML for the animated carousel.
15:05
In this lecture, we style the animated carousel using CSS.
Section 5: The Big Callout
14:58
In this lecture, we code the HTML for the "big callout" of our website.
05:49
In this lecture, we style the "big callout" using CSS.
06:02
In this lecture, display an animated Bootstrap 3 style alert box using jQuery.
Section 6: The 3-Row Feature Section
01:33
In this lecture, we export the badge assets out of Photoshop.
10:59
In this lecture, we code the HTML for the features section.
01:57
In this lecture, we style the features section with CSS.
Update: A Note on Media Queries
Article
Section 7: The "Tabbable" Content
14:03
In this lecture, we code the HTML for the "tabbable" section of our website.
Section 8: The Modal
09:33
In this lecture, we code the HTML structure for the Bootstrap 3 "Modal Window".
07:26
In this lecture, we code the HTML for the form within the Modal window.
06:29
In this lecture, we code the HTML and jQuery for the Bootstrap 3 "tooltip" and "popover" within the Modal window.
Section 9: The Typography Section
05:28
In this lecture, we code the HTML for the typography and "list group" section.
Section 10: The Course Featurettes
07:50
In this lecture, we code the HTML for the thumbnail, or "course featurette" section of our website.
04:23
In this lecture, we style the featurettes with CSS.
Section 11: The Footer
04:41
In this lecture, we code the HTML for the footer.
01:54
In this lecture, we style the footer with CSS.
Section 12: The Take-Away
02:33
In this concluding lecture, we learn where to go from here so you can continue on your responsive web design journey!

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Brad Hussey, Freelancing Web Designer @ Code College

A highly skilled professional, Brad Hussey is a passionate and experienced freelancing web designer, developer, blogger and digital entrepreneur. Hailing from North Of The Wall (Yellowknife, Canada), Brad made the trek to the Wet Coast (Vancouver, Canada) to educate and equip himself with the necessary skills to become a spearhead in his trade of solving problems on the web, crafting design solutions, and speaking in code.

Brad's determination and love for what he does has landed him in some pretty interesting places with some neat people. He's had the privilege of working with, and providing solutions for, numerous businesses, big & small, across the Americas.

Brad builds custom websites, and provides design solutions for a wide-array of clientele at his company, Brightside Studios. He regularly blogs about passive income, living your life to the fullest, and provides premium quality web design tutorials and courses for tens of thousands of amazing people desiring to master the craft.

100,000+ Students Don't Lie

Join Brad and adventure into his world of web design, web development, and speaking in code. You won't regret it!

What are people saying about Brad?

"[Brad is] the BEST coding instructor on the planet. Brad has a passion for teaching and he does it with joy. He pours his heart into his lessons and makes you feel at ease. It's just like having your best buddy having a chat with you - only this time, you are learning valuable skills. He's the type of guy who is passionate about transforming people's lives through his lessons. He's not after the money. He truly wants you to succeed.Three hearty cheers to Brad - the best coding instructor on planet Earth."

— Cicero, Brad's student


"...These videos are well created, concise, fast-paced, easy to follow, and just funny enough to keep you chuckling as you're slamming out lines of code. I've taken 3 courses from this instructor. Whenever I have questions he is right there with a simple solution or a helpful suggestion to keep me going forward with the course work."

— Brennan, Brad's student


"...Brad is amazing and I honestly think he's the best tutor of all the courses I have taken on Udemy. Will definitely be following him in the future. Thanks Brad!"

— Brad's student


"...Brad has an infectious enthusiasm, a great eye for detail, and expert-level knowledge of the material."

— Brad's student

Instructor Biography

Code College, The Best Coding Courses on the Web

Code College is an online school that provides high quality learning material, courses, and training videos for students looking to learn web design, web development, marketing, online business, and more!

Founded in 2014 by Canadian entrepreneur, successful instructor, and blogger, Brad Hussey, Code College is a growing network of highly skilled instructors who provide the best quality tutorials, courses and learning material on the web.

Ready to start learning?
Take This Course