Buying for a Team? Gift This Course
Wishlisted Wishlist

Please confirm that you want to add Learn Mobile First Web Development using Bootstrap to your Wishlist.

Add to Wishlist

Learn Mobile First Web Development using Bootstrap

Create a responsive website front-end with a Do It Yourself Project, working files, code snippets and final project.
3.0 (3 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.
503 students enrolled
Created by Yoda Learning
Last updated 5/2015
$10 $20 50% off
4 days left at this price!
30-Day Money-Back Guarantee
  • 3.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?

This course will help you make an amazing front-end responsive webpage. Bootstrap is very easy to learn and use, its responsive features allows you to build with mobile-first approach and design which is compatible with all browsers, devices (mobile, tablets, etc). By the end of the course, you will build an entire front end of the website, which you can use. The html files are made downloadable for you to have a look. But first try it yourself.

Why take this course?

Bootstrap is an open source front-end framework for creating websites and web applications. Originally named Twitter Blueprint, was developed by Mark Otto and Jacob Thornton at Twitter and many developers at Twitter. It makes use of HTML, CSS as well as optional JavaScript extensions. Bootstrap consists other commonly used interface elements, like buttons, labels and more. It also contains several JavaScript components in the form of JQuery plugins. Compatible with all browsers and devices like mobile, desktop, tablets. Bootstrap can be used by graphic designers, Entrepreneurs, Employees, coders, web developers, students and anyone interested in making a website quick and easy.

How much time does it take to complete the course?

This course contains of 32 lectures. These are 3 hours of video tutorials.

What am I going to get from this course?

Lifetime access to the course

Downloadable project HTML files

Create a fully functional and responsive front-end of a website.

Technical Support

Course Outline:

1. Introduction to Bootstrap

2. Basic concepts to get started

3. Navigation Bar

4. Carousel (commonly known as slider)

5. Coding feature sections

6. Creating About Us section

7. Creating panels, list groups, alerts and well

8. Creating parallax scrolling effect

9. Creating media and tab panels

10. Creating a sign up section

11. Creating footer

12. Creating blog for the website

13. Creating tooltip

14. Creating popover

What are the software and other requirements for the course?

A computer, basic text editor (used Sublime in the course), and having very basic knowledge of HTML and CSS.

Who is the target audience?
  • Anyone who is interested in making a responsive websites which works on all platforms. It can be a non-developer, a photoshop user who wishes to make a website, an entrepreneur, or any professional or student.
Students Who Viewed This Course Also Viewed
What Will I Learn?
Build a fully functional responsive front-end
Can build a website front-end for clients as freelancer
complete understanding of Bootstrap 3
View Curriculum
  • Before starting the course, the student should have basic knowledge of HTML & CSS.
  • Before beginning the course, the student should have a text editor, even some basic text editor will do. In this course we are using Sublime text editor.
  • And a browser. Google Chrome is preferable,
  • No additional materials is required before starting the course.
Curriculum For This Course
Expand All 35 Lectures Collapse All 35 Lectures 03:18:12
Start Here
4 Lectures 14:29

What is bootstrap, advantages of bootstrap and what value does it provide to developers.

In this lecture you will also find 2 compressed downloadable folders.

The code snippets folder contains section wise code used in the tutorial for your practice. you can download the file and run and test it.

The final project folder contains the final project which you will learn to create in this course.

Preview 02:55

Making of - getting starter template

Preview 03:39

Learning about sublime text and emmet plugin tool which we will be using in our project.

Preview 05:24

A JavaScript library which will enable our project to run on old legacy IE browsers.

Basic concepts to get started
4 Lectures 20:38

Container, row, columns are building blocks of bootstrap framework. It is essential for every developer to understand this.

Container Row Columns

Different Breakpoints

Images are very important for web designers. How to use Photoshop to adjust image quality which can be used in our project

Photoshop images

It gives simple effect to an element

Navigation Bar
3 Lectures 17:27
Navigation bar for our project
Navbar 1

Navigation bar for our project

Navbar 2

Navigation bar for our project

Navbar 3
Carousel (commonly known as slider)
2 Lectures 16:38

Commonly known as sliders but in bootstrap we call them carousel

Carousel Part 1

Carousel Part 2
Coding Feature Sections
2 Lectures 10:55

In this section, we are going to learn about thumbnail caption and text center class in bootstrap


In this section, we are going to learn about thumbnail caption and text center class in bootstrap

Creating about us section
2 Lectures 10:53

In this video we are going to learn about image shapes and lead classes

About US

In this video we are going to learn about responsive utility class which allows to hide and make content visible at different breakpoint

Responsive Utility Class
Creating panels, list groups, alerts & well
3 Lectures 19:13

Sometimes you need to put your DOM in a box. For those situations, try the panel component.


Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.


List groups are flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.

List Group
Creating parallax scrolling effect
1 Lecture 07:27
Testimonial parallax effect
Creating Media and Tab Panels
2 Lectures 15:00

Abstract object styles for building various types of components (like blog comments, tweets, etc) that feature a left or right-aligned image alongside textual content


Add dropdown menus with a little extra html and the dropdowns JavaScript plugin.

Blockquote and Accordion Panel
3 Lectures 23:47

Accordion Part 1

Accordion Part 2
5 More Sections
About the Instructor
4.2 Average rating
1,023 Reviews
31,010 Students
42 Courses
Become 4X Faster | Join 32000+ Udemy Students

Yoda Learning is a team of 12+ industry professionals focused on developing “Project-based"learning solutions, which enable the learners explore real world situations and thus, make the learning process engaging and practical. Our Courses on Technology includes everything including Web Development, Mobile App Development, Data Analytics and Design.

The collective work-experience of 80+ yrs. spans across multiple industries like Manufacturing, IT, Sales, Finance, Marketing, Operations, HR and functional domains such as Office suites, Mobile applications, Digital Marketing, Database Technologies, Networking).

Report Abuse