Bootstrap Essential Training - Create Your Very Own Website

Learn Basics of Bootstrap Along with HTML 5 and CSS 3 and Create Your Very Own Website from Scratch
4.2 (39 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.
2,640 students enrolled
$19
$20
5% off
Take This Course
  • Lectures 83
  • Length 9 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 2/2016 English

Course Description

Bootstrap Learning is very Important Especially Essential Training of Responsive Web Development Complete Course and Creating your Very own Website is very Necessary part of Modern Web Technologies.

As this is the Time of Responsive Designs in Web Development so Why are you Wasting your Time ?

  • Why Don`t you Guys Start Working with the Most Useful and Flexible Framework to make Your Own Responsive Designs ?

Well, This is a Life Saving Opportunity for all of you to Learn the Bootstrap From A to Z. Start Learning from WHAT IS BOOTSTRAP ? to Creating your own Designs. Bootstrap Provide us almost 96% features of Front End Development by its own. Before Bootstrap :

  1. Our Designs were Non Responsive.
  2. To make Designs Responsive we had to work with Media Queries Only.
  3. We had to Write a Bunch of CSS that was a crazy Tough Job.

Bootstrap Gives us Everything from Its Classes. It allows us to write more HTML then CSS. In all of the Lectures of BASICS OF BOOTSTRAP , you will Cover almost every Topic that is necessary for you to know. At the Start of this course you will be Learn Basics of Bootstrap :

  • How to Download Bootstrap
  • How to Connect Bootstrap Files with HTML Page
  • Forms
  • Buttons
  • Alerts
  • Wells
  • Jumbotron
  • Tables
  • Navigation
  • Advance Navigation
  • Carousel
  • Advance in Carousel
  • Typography in Bootstrap
  • Images Management through Bootstrap
  • Scroll Spy Plugin
  • Panels
  • Collapsible
  • Glyphicons


After Learning a Lot of Stuff About these Features you will be able to Make Your Own Beautiful Website in Bootstrap. In Project we will make :

  • One Page Scrolling Navigation Website (Using Scroll Spy Plugin)
  • Blog Type Website

Your Home Task will be to Make a Portfolio Website .

You can Ask Any Question about the Course, Can Show me Your Work for Extra Suggestions at any time without any Hesitation.



What are the requirements?

  • Download Dreamweaver
  • Have Good Internet Connection
  • Should Understand Very Little about HTML and CSS, JavaScript will be a Plus Point

What am I going to get from this course?

  • Make Responsive Designs Custom Website
  • Make Non Responsive Website to Responsive
  • Make Short Code with Large Amount of Functionality
  • Understand that how to Write Code in Professional Manners
  • Will aware of HTML 5 with Bootstrap
  • Will be Able to Manage more than 2 to 4 Projects at a Time

What is the target audience?

  • It is For those who already Knew CSS a Little Bit
  • Have Aim to be a Good Website Front End Developer
  • HTML Basic Tags Should be Known

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 to Bootstrap
03:26

In this very first Lecture you are going to see the Introduction of Responsive Designs and you will see that what is the basic reason to Use Bootstrap Framework. Also see a small part of Bootstrap History as well.

Subscribe at Youtube Channel : https://www.youtube.com/channel/UCFNHzU5Kvaf_9GUUj3ZZBuQ

03:50

In this Lecture you are going to Learn about the Official Website of Bootstrap that is getbootstrap.com . We will saw it in depth and see how much beneficial it is for the Bootstrap Developers to Learn in by their own.

Subscribe at Youtube Channel : https://www.youtube.com/channel/UCFNHzU5Kvaf_9GUUj3ZZBuQ

06:10

In this Lecture we have Downloaded Bootstrap from getbootstrap.com and also introduce you the files inside bootstrap Files Pack. CSS , JS and Fonts Folders contains many Relivent Files.

Subscribe at Youtube Channel : https://www.youtube.com/channel/UCFNHzU5Kvaf_9GUUj3ZZBuQ

03:33

This Lecture is about to start the working with Bootstrap Files.We will Connect Bootstrap Files like css files and Javascript Files along with HTML page.

Subscribe at youtube Channel : https://www.youtube.com/channel/UCFNHzU5Kvaf_9GUUj3ZZBuQ

Where to Download Exercise Files
Preview
Article
Section 2: Bootstrap Grid System
05:30

This Lecture Contains a small but brief Introduction to Bootstrap Grid System.You will learn about the Rown and Columns.

Subscribe Youtube Channel : https://www.youtube.com/channel/UCFNHzU5Kvaf_9GUUj3ZZBuQ

11:28

After Watching the Introduction to Grid System , This is the time to Move in Bootstrap Gird System Coding inside our Editor.

Subscribe Youtube Channel : https://www.youtube.com/channel/UCFNHzU5Kvaf_9GUUj3ZZBuQ

Section 3: Bootstrap Typography
08:45

In this Lecture you are going to Learn about the Typography Basics that Bootstrap Allows us. You will also see some of the HTML 5 Elements as well that allows us to Deal with the Typography.

Subscribe at YouTube Channel : https://www.youtube.com/channel/UCFNHzU5Kvaf_9GUUj3ZZBuQ

08:15

In this Lecture you are going to Learn about some more HTML 5 tags and Classes of Bootstrap that we can deal with the Typography.

Subscribe at YouTube Channel : https://www.youtube.com/channel/UCFNHzU5Kvaf_9GUUj3ZZBuQ

05:58

In this Lecture you are going to Learn about the Bootstrap Typography CONTEXTUAL (Color Related) Classes or Tags or Elements.

Subscribe at YouTube Channel : https://www.youtube.com/channel/UCFNHzU5Kvaf_9GUUj3ZZBuQ

Section 4: Bootstrap Tables
02:26

This is simply the Introduction of Bootstrap Tables. You will see that how many types of Tables are there in Bootstrap.

Subscribe at YouTube Channel : https://www.youtube.com/channel/UCFNHzU5Kvaf_9GUUj3ZZBuQ

04:08

We will see in this Lecture that Bootstrap Table Has two Basic parts that are Table Head and Table Body. This Lecture is all about Table Head.

Subscribe at YouTube Channel : https://www.youtube.com/channel/UCFNHzU5Kvaf_9GUUj3ZZBuQ

04:04

Students in this Lecture you are Going to Learn about the Next Part of Our Tables that is Table Body.So move to video now.

Subscribe at YouTube Channel : https://www.youtube.com/channel/UCFNHzU5Kvaf_9GUUj3ZZBuQ

06:26

in previous two lectures you learn about the tables head and table body. This is the time to make complete basic Bootstrap Table from Scratch.Move ON !!

Subscribe at YouTube Channel : https://www.youtube.com/channel/UCFNHzU5Kvaf_9GUUj3ZZBuQ

04:59

We will use a Class of Bootstrap (.table-striped) that will create Zebra Striped over the Table Rows.

Subscribe at YouTube Channel : https://www.youtube.com/channel/UCFNHzU5Kvaf_9GUUj3ZZBuQ

05:38

In this lecture you will see that we have simply use a class for tables borders and we have made Borders around the Table.

Subscribe at YouTube Channel : https://www.youtube.com/channel/UCFNHzU5Kvaf_9GUUj3ZZBuQ

04:52

In this lecture we are going to use a Class of Bootstrap that will create a Hover effect on table rows when we bring our Mouse on table.

Subscribe at YouTube Channel : https://www.youtube.com/channel/UCFNHzU5Kvaf_9GUUj3ZZBuQ

08:36

Contextual Classes are basically classes that are use for the Colors. These are mostly used to give message through color. Like Light Green color for Success. Similarly Dark color for the Danger.

Subscribe at YouTube Channel : https://www.youtube.com/channel/UCFNHzU5Kvaf_9GUUj3ZZBuQ

05:44

In this lecture we will got introduction of Bootstrap Responsive Tables.

Subscribe at YouTube Channel : https://www.youtube.com/channel/UCFNHzU5Kvaf_9GUUj3ZZBuQ

09:26

In this Lecture we are going to make a table from Scratch and will make it by using almost all techniques and Styling Features that we learn in few of previous Lectures.

Subscribe at YouTube Channel : https://www.youtube.com/channel/UCFNHzU5Kvaf_9GUUj3ZZBuQ

Section 5: Bootstrap Images
02:01

In this Lecture you are going to Learn about the Bootstrap Classes with that we can deal with Image styling.

Subscribe at YouTube Channel : https://www.youtube.com/channel/UCFNHzU5Kvaf_9GUUj3ZZBuQ

03:31

In this Lecture we will see the Shapes of Images that we can made through Bootstrap Built in Classes.And will also see how many classes can be used for this purpose.

Subscribe at YouTube Channel : https://www.youtube.com/channel/UCFNHzU5Kvaf_9GUUj3ZZBuQ

05:11

Subscribe at YouTube Channel : https://www.youtube.com/channel/UCFNHzU5Kvaf_9GUUj3ZZBuQ

04:16

Subscribe at YouTube Channel : https://www.youtube.com/channel/UCFNHzU5Kvaf_9GUUj3ZZBuQ

Bootstrap Images Part-4 Thumbnail Images
06:56
Section 6: Bootstrap Jumbotron and Wells
05:12

In this Lecture you will Learn about the Bootstrap Jumbotron. You will see how can we make it and how can we use it in our web pages.

Subscribe at YouTube Channel : https://www.youtube.com/channel/UCFNHzU5Kvaf_9GUUj3ZZBuQ

03:16

Smaller Gray Box then Jumbotron. Similar Purpose like Jumbotron that is to Get Extra Attention of User on the Web Page.

Subscribe at YouTube Channel : https://www.youtube.com/channel/UCFNHzU5Kvaf_9GUUj3ZZBuQ

Section 7: Bootstrap Alerts
03:08

We will see the Introduction of Bootstrap Alerts in this Lecture. we will also compare it with the old JS Methods.

Subscribe at YouTube Channel : https://www.youtube.com/channel/UCFNHzU5Kvaf_9GUUj3ZZBuQ

05:30

In this Lecture we are going to make simple (Default) Alerts with the help of Bootstrap Elements and Classes.

Subscribe at YouTube Channel : https://www.youtube.com/channel/UCFNHzU5Kvaf_9GUUj3ZZBuQ

09:42

In this Lecture you are going to Learn about the Closing Alerts.Closing Alerts has a Cross sign at the very right of Alert Bar.

Subscribe at YouTube Channel : https://www.youtube.com/channel/UCFNHzU5Kvaf_9GUUj3ZZBuQ

Section 8: Bootstrap Buttons
01:45

This Lecture has simply Introduction to Bootstrap Buttons.

Subscribe at YouTube Channel : https://www.youtube.com/channel/UCFNHzU5Kvaf_9GUUj3ZZBuQ

07:18

This Lecture Contains the Basic Elements and Basic Classes for the Buttons used in Bootstrap.

Subscribe at YouTube Channel : https://www.youtube.com/channel/UCFNHzU5Kvaf_9GUUj3ZZBuQ

07:33

In this Lecture you will Learn Linked Buttons , Buttons Sizes and many More.

Subscribe at YouTube Channel : https://www.youtube.com/channel/UCFNHzU5Kvaf_9GUUj3ZZBuQ

09:49

In this Lecture you are going to Learn about the Active and Disabled Buttons and also see the Groups of Buttons.

Subscribe at YouTube Channel : https://www.youtube.com/channel/UCFNHzU5Kvaf_9GUUj3ZZBuQ

Bootstrap Buttons Part-5 Justified Buttons
05:13
Bootstrap Buttons Part-6 Drop Down Buttons
07:07
Bootstrap Buttons Part-7 Split Drop Down Button
Preview
05:25
Section 9: Bootstrap Glyphicons
Bootstrap Glyphicons
09:27
Section 10: Bootstrap Badges and Lables
02:36

This is a Lecture Contains very small Introduction about Bootstrap Badges.

Subscribe at YouTube Channel : https://www.youtube.com/channel/UCFNHzU5Kvaf_9GUUj3ZZBuQ

03:07

In this Lecture we will encode the Badges.

Subscribe at YouTube Channel : https://www.youtube.com/channel/UCFNHzU5Kvaf_9GUUj3ZZBuQ

Bootstrap Labels , Introduction and Code
03:27
Section 11: Bootstrap Progress Bars
01:45

In this Lecture we will see the Introduction of Bootstrap Progress Bars and will see what exactly they are and what they are used for.

Subscribe at YouTube Channel : https://www.youtube.com/channel/UCFNHzU5Kvaf_9GUUj3ZZBuQ

04:51

Students in this Lecture you will Learn that how to Create Default Progress Bars and How many classes are used for this Purpose.

Bootstrap Progress Bars Part-2 Multiple Progress Bars
03:37
04:43

In this Lecture you will Learn that how to Stylize Bootstrap Progress Bars.You will see that how we can create Zebra Stripes and Beautiful Animations on progress Bars.

04:16

Stacked Progress Bars are Multiple Progress bars but in a same row. In this Lecture you will Learn that how to make Stacked Progress bar.

Section 12: Bootstrap Collapsible
Bootstrap Collapsible Buttons
05:39
08:47

In this Lectures we will Learn About the Collapsible Panels. We will write their Code and Customize them Accordingly.

12:59

Bootstrap Accordian is one of the Most Useful Feature of Modern web Technologies.In this Lecture we will Learn that how to make Accordian from Scratch.

Collapsible Group of List
09:58
Section 13: Bootstrap Pills and Tabs
06:18

In this Lecture you will Learn that how to Create Pills in Bootstrap after the Introduction to Pills.

Bootstrap Pills Part-2 Dynamic Pills
10:05
04:26

In this Lecture you will Learn that what are Bootstrap Tabs and how can we make them.we will make tabs and understand their Classes.

Bootstrap Tabs Part-2 Dynamic Tabs
10:11
Section 14: Bootstrap Navbar
03:31

In this Lecture you will Learn that what exactly the Navbar is and how can we create it while using Bootstrap.

07:50

In this Lecture you will Learn that how to make Default Navbar by Using .navbar-default class.

07:07

In this Lecture you are going to Learn about inverted navbar for that purpose you will use class of .navbar-inverse

07:33

In this Lecture you will Learn about the Fixed Navigation Bar. Navbar can be Fixed either on the Top or Bottom.

07:59

In this Lecture you are going to Learn that how can we make a Dropdown Navigation. It is Quite Simple and Easy Lets make a Try here !

05:51

In this Lecture you will Learn that the Basic (By Default) Navbar Aligned to Left Side. But it can be Aligned either on Right Side with the help of .navbar-right class.

04:53

In this Lecture you will Learn that how to make a Collapsible Navbar. We will see that our Navbar will Collapse while our screen size will be Reduce.

Section 15: Bootstrap Forms
Introduction to Bootstrap Forms
02:38
Bootstrap Forms Part-1 , Types of Forms , Default Form
09:59
Bootstrap Forms Part-2 , Inline Forms
03:47
Bootstrap Forms Part-3 Horizontal Forms
03:47
Bootstrap Forms Part-4 , Input Types
11:10
Section 16: Bootstrap Carousel
06:07

In this Lecture you will Learn that how to make Bootstrap Carousel.We will see different Elements and Classes for Carousel.

08:19

In this Lecture we will finish our slider and also stylize our Slider a bit.

Section 17: Bootstrap Project - Blog
07:02

Introducing the Project Sample website and creating Directories where our Project Files will be. Moreover getting ready our HTML page for Whole Project Website.


Subscribe at YouTube Channel : https://www.youtube.com/channel/UCFNHzU5Kvaf_9GUUj3ZZBuQ

13:35

In this Lecture we will make Navigation bar that is Collapsible. It will be Stylize by our own way.One Part of Navigation that i have Left for you as Good Practice is to make Collapsible Button Visible by Simple CSS Codes.


Subscribe at YouTube Channel : https://www.youtube.com/channel/UCFNHzU5Kvaf_9GUUj3ZZBuQ

Navigation Small Assignment
Article
11:09

We will make Slider from Outside of the Container. We put it Outside of Container because of managing our slider on full screen.


Subscribe at YouTube Channel : https://www.youtube.com/channel/UCFNHzU5Kvaf_9GUUj3ZZBuQ

16:39

Students in this Lecture we will create our About Page. We will manage our content in Grid System and also included ScrollSpy in our Website.


<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">


Subscribe at YouTube Channel : https://www.youtube.com/channel/UCFNHzU5Kvaf_9GUUj3ZZBuQ

13:05

Students in this Lecture we will create Services page. We will make different columns and use Glyphicons and Stylize them At the End Included our Scrollspy and Finished it.


Subscribe at YouTube Channel : https://www.youtube.com/channel/UCFNHzU5Kvaf_9GUUj3ZZBuQ

06:45

In this Lecture you will Learn the Portfolio Gallery . you will Create it in the Grid System and Stylize it .


Subscribe at YouTube Channel : https://www.youtube.com/channel/UCFNHzU5Kvaf_9GUUj3ZZBuQ

20:37

In this Lecture You will Learn that how to make Pricing Tables. These are the Panels actually that we have made in Earlier Classes. We will create Panels and Stylize them accordingly.


Subscribe at YouTube Channel : https://www.youtube.com/channel/UCFNHzU5Kvaf_9GUUj3ZZBuQ

03:28

In this Lecture you will Finish out your Pricing Table.


/***PLEASE AVOID SOUND QUALITY OF THIS LECTURE***/


Subscribe at YouTube Channel : https://www.youtube.com/channel/UCFNHzU5Kvaf_9GUUj3ZZBuQ

20:22

In this Lecture you will Create Your Contact Page. Will make a Form and Map as well.


/*** PLEASE AVOID SOUND QUALITY ***/


Subscribe at YouTube Channel : https://www.youtube.com/channel/UCFNHzU5Kvaf_9GUUj3ZZBuQ

Map Script of Javascript
Article
09:17

In this Lecture we will make Footer of our project Blog.

Smooth Scrolling Effect Code
Article
Fading Effect Code (CSS and JavaScript)
Article
Section 18: Home Assignment / Portfolio Website

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Abdul Basit, Front End Website Developer and WordPress Expert

Abdul Basit is a Front End Website Developer and WordPress Expert since 2012. He has done a lot of Working Related to Web Development and SEO as Freelancer. He is a Teacher of Web Development in a Private Institute here in Pakistan. He has Teach HTML 5 , CSS 3 , Bootstrap , Javascript , JQuery , PHP and Wordpress in Brains College for more than 3 Years. in 2015 he Started Teaching Online Through Skype to Different Students in India and Other Countries and Charge Some Money. He Started Making Courses for udemy in Feb 2016 and Lauch his First Course of Basics of Bootstrap.

Ready to start learning?
Take This Course