Be a Bootstrap Developer from scratch

Learn Bootstrap from basics and create great Websites. Start from scratch and learn fast production technique.
4.7 (160 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.
5,718 students enrolled
$19
$100
81% off
Take This Course
  • Lectures 32
  • Length 3.5 hours
  • Skill Level Beginner Level
  • 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 7/2015 English

Course Description

What is Bootstrap?

Bootstrap is a free and open-source collection of tools for creating websites and web applications. It contains HTML- andCSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It aims to ease the development of dynamic websites and web applications.

Bootstrap is a front end framework, that is, an interface for the user, unlike the server-side code which resides on the "back end" or server.

As of June 2015, it was the most-starred project on GitHub, with over 81,000 stars and more than 32,000 forks

Why one should focus on learning Bootstrap?

Present world web interface is getting more oriented toward mobile and tablet view compatibility. Designing a separate website for just mobile user was a past technology. Now we want to have one website that can respond to various view ports and can adjust according to that. Bootstrap is one such answer to all questions.

What will be the learning procedure?

Learning procedure in this course is very simple. We will first things in our hand until you say the words, “Yes, that was easy”. We will first introduce you with bits of bootstrap, mostly its classes. Every button, link, nav bar and related thing will be covered and we will do all the code writing part. But make sure you also write what we write in video. Once everything is done, then we will move to simple projects. After that shovel will be given to you. Yes, it may be daunting but just keep faith in us. You just have to modify the project given to you. Ultimately, it is out duty to make sure that you able to write at least a responsive web page in bootstrap.

When can I start?

As soon as you are ready to learn a new skill, get out of your comfort zone and take this course. There is no end date and start date.

What are the requirements?

  • A slight hint of HTML tags would be great but not compulsion
  • Bootstrap (available for free)
  • Code editor (covered in the course video)

What am I going to get from this course?

  • create web pages in bootstrap
  • learn to use bootstrap in efficient way
  • every bootstrap class will be discussed in detail
  • create your first project within the course and get confidence

What is the target audience?

  • students
  • web developer
  • beginners of bootstrap
  • front end developers
  • Strictly only for beginners of bootstrap

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: Introduction
05:39

This lecture will give a brief overview about. Lecture will give an idea about the teaching organization, about bootstrap and course structure. Also we will have an overview about the project style of learning method.

10:20

THis movie will teach you about downloading Bootstrap. But there are other ways to get started with Bootstrap like CDN aka Content Delivery Network which is one of the efficient way to get started with bootstrap.

06:53

In the last movie, we did a transformation of a simple web page into a Bootstrap page. Bootstrap is all about adding classes. We will take a look about various terminologies of bootstrap world so that rest of the course goes as smooth as possible. Once Vocab is clear, you can understand the author bit more clearly

Article

lecture only to get exercise files

Section 2: Bootstrap grids
06:16

One of the most fundamental of creating web pages in Bootstrap is grid. Bootstrap allows you to get various options of having grid on your web page. Once you understand about the grid options that are available to us, we can simply utilize our knowledge to structure our web pages

05:55

Best part about bootstrap is its mobile optimized look. WE can craft our application according to the device width and size. On the same goal, first is to configure of small screen mobile devices.

03:38

Just as we discussed about small scale devices, we can make sure that our application looks, just like we wanted on the screen that are of big size such as Desktop or may be even bigger. For such case we will study about larger grid options.

Section 3: Bootstrap basics
08:04

Just like in the basic HTML we were having h1 to h6 tags, same are available in the bootstrap but some extra classes are also available in this case. Honestly, bootstrap is all about getting friendly with inbuilt classes so that we have to write as less CSS as possible.

07:16

Text formatting is about giving specific properties to the text like bold, italic and specific color. This movie will introduce some of the basic classes of the bootstrap that will be useful in the entire course.

06:54

To represent some data which needs to be compared, tables are a great way to do so. Bootstrap gives you a variety of classes that can give some extra looks to your table. Tables with highlighted heading or stripped content are only a few examples in it.

08:02

Images are the most imporatnt part of any web page. Sharp the image, more it looks good. Problem starts when same image is opened on mobile devices or tablets. We will solve this problem in the bootstrap in this movie

04:16

Jumbotron is a nice looking grey area on the bootstrap web page that draws the most attention on the web page. Jumbotron looks more efficient when there is some text on it but make sure you got the word "some", too much text on jumbotron make things untidy.

04:28

Wells are special design in Bootstrap that gives engraved in CSS style to a block. You can make various wells like large or small, again depending on the device on which you want to focus or need in mind.

08:52

Bootstrap gives you few styles of button. In any button you can add these classes and give them colours like success, info, danger etc. Also these buttons can be stacked vertically or horizontally or may be changed to block size.

12:23

This movie is in continuation with the previous button movie. We will take things to next level in buttons and will try to align them vertically or justified. Few more things will be discussed which are more easy to show as compared to write about them

05:46

Glyphicons are the special icons that one can use in Bootstrap web pages. Best part about these glyphicons is that, they are not images. Therefore the scaling is not at all a problem. One can enlarge them as much as possible and still the icons will not scatter in pixel.

04:13

Badges are used to display additional information with extra highlight in the page. You might have already noticed such CSS at a lot of places. Although facebook has nothing to do with bootstrap, but just for the sake of example, notice the red notification icons for friend request. Badges are something like that.

05:45

Alert box are the ways to provide information to the user for some limited time to the user, user can click on the cross button and can let the alert box go. Information might be success, warning or may be error information that we can pass on to the user.

07:39

Progress bar is the easy way to show information to the user about the progress of an event. For example, event about uploading the data is one of the common place where one can use this progress bar. Bootstrap gives you a few styles that you can choose to have progress bar.

07:05

Drop down is the most common menu style in modern web. It helps in logical building of lists and also help in UI design. A few tricks can be implemented to enhance the drop down looking and working. Just like drop downs, there are drop ups.

04:11

pagination is a way to display number of linked pages to the user. Usually they are placed to the bottom of the page but not at all compulsion. You can display next amd previous as guide to next and previous page or you can give page numbers to the user.

05:18

List groups and panel are the special ways to modify looking of list groups. you can give various features such as blocked element in the list group. This video will talk about list groups and panels in detail.

10:07

Navigation bar is the top most bar, which gives the user indication to move to various pages. In this movie we will learn to have responsive menu bar. Also there will be a small challenge to your eyes. Compare the navigation menu bar code in this movie and next movie and report the problem that we have created for you.

07:25

Dynamic tabs are kind of alternative for iframes. Features of iframe were great but they comes with lot of security loopholes and SEO problems. Bootstrap solved that problem and gave us tabs and pills features that one can use in the web page.

07:05

Forms are the way to interact with the user to take input from the user. Bootstrap gives various styles to implement in the forms. We will discuss styles of the forms at a basic level in this movie.

06:32

Lets continue what we left in the last movie about input forms. We can style the forms with lots of attributes such as disabled and active forms. We will have a detailed discussion about all such topics.

10:43

Carousel is probably the most attractive feature of the bootstrap because on a web page presentation matter a lot. Carousel allows you to place images as a slider on a web page. These slider should have high quality and relevent images and automatically looking part is half done.

07:01

Modal is a java script feature enabled in the bootstrap. You don't need to focus too much on java script but still we would recommend taking a course on JS too. Modal allows you have different size of popups and have different information on the pop ups

2 questions

A quiz to check you knowledge

Section 4: Project 1 Landing page
10:05

Lets handle some real life code from what we have learned so far. Our first project is to have a landing page which is very common sale page in present web technology

Section 5: Project 2 Single Page Business Site
11:00

Moving on to rapid page design, here we introduce web based GUI that help in creating a web page by drag and drop feature. There are many other such web interface for similar task. Although they are good to have a wireframe of a single page but additional tweakings are almost always required

Section 6: Project 3 Editing Flat design template
03:57

Now its time to take things in your hand. Most of the time at initial stage you will be editing the templates. Here is one of the free template that you have to edit. Use the knowledge gained in this course.

5 pages

A few quick looks to the important resources to look for while developing bootstrap web pages

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Igneus Technologies, Best Comprehensive Courses

We at Igneus have trained students from IIT's, NIT's and reputed companies. Students from all over the globe have trusted our High quality and affordable trainings from 10+ countries and have opted for our Certification programs.

IGNEUS stands for the Revolutionary and a quality enhanced change that we’ve tried to come up with in the modern world of Internet education. We’ve come up bearing in mind the maximum emphasis on the quality dealing with every new technology which has made us distinguished from the throng at internet. And this revolution of choice will keep continuing. Today IGNEUS Technologies has proudly lifting up the tag of being the world's most trusted provider of myriad of services and training programs aiding constantly in every corner of the globe along with web security aspects, and open source technology.

IGNEUS Technologies Pvt. Ltd is a dream shared and brought up by two computer geniuses to make the society upgraded and aware of the cyber crimes that curb the innocence of environment, thus starting a revolution in favor of cyber security.

Igneus stands for the Revolutionary and a quality enhanced change in every aspect of its touch to internet. Quality dealing with every new technology makes us different from the crowd of internet. The revolution of choice continues. Today Igneus Technologies is the world's most trusted provider of mentioned services and training along with web security aspects, and open source technology.

Ready to start learning?
Take This Course