Bootstrap Bootcamp - Responsive web development- 8 projects
4.5 (37 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.
269 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Bootstrap Bootcamp - Responsive web development- 8 projects to your Wishlist.

Add to Wishlist

Bootstrap Bootcamp - Responsive web development- 8 projects

Learn Bootstrap and responsive web development
4.5 (37 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.
269 students enrolled
Last updated 12/2016
Current price: $10 Original price: $100 Discount: 90% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 7 hours on-demand video
  • 1 Article
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • By the end of this course you will have 8 projects to present in your resume
  • you will learn to apply your knowledge and create front end websites
  • You will learn about responsive web development
  • You will learn to solve your challenges
  • You will never face any problem in front end responsive web development in Bootstrap
  • Master Bootstrap with projects
View Curriculum
  • Basics of HTML would be great, before you join in
  • CSS is not required much as we will learn a lots of CSS on the go
  • Your favourite text editor (we will cover that in a lecture)

Bootstrap Bootcamp - Building 8 Projects

If you are coming from HTML knowledge and are looking to get some confidence in building projects OR you want to learn responsive web development, then you have landed on right page. In this course we will learn about responsive web development and will create 8 projects that you can use in your profile too. 

When any student starts learning HTML, although he gets the concept but still needs confidence in creating a full website. On top of that, creating a mobile website is not easy to do. In order to create a responsive design, that behaves according to screen sizes, is a tough task especially for a new web developer. With Bootstrap framework, it becomes much more easy to create web pages that are automatically responsive but of course, up to a limit. Beyond that limit we have to manually write responsive CSS to solve minor issues.

Learning Bootstrap is an essential skill in present era as every web page, hybrid app and even CMS use Bootstrap to make front end of their web pages. You can further take your knowledge in converting your site templates to CMS templates. Even most of the wordpress templates comes as Bootstrap templates at front end.

This course will teach you to understand Bootstrap directly from it’s documentation. Further we will apply that knowledge in create 8 different and professional projects. These are not any toy projects, these can be used in any professional website. 

All exercise files are already included with the course. Although we recommend to code along with us but in case, you got some mis match, then refer to these exercise files.

Take a look at free video and check the projects that we will create in this course. This help further help you to make a decision for this course.

Catch you inside the course !

Who is the target audience?
  • Beginners, interested in web development
  • interested in responsive web development
  • Front end web development
  • get trained as a freelancer web development
  • Apply for Front end development with Projects in resume
Compare to Other Bootstrap Courses
Curriculum For This Course
45 Lectures
Getting started with responsive web development
6 Lectures 33:58

Introduction to Bootstrap Bootcamp

Preview 06:51

This video is about giving you a quick look of what you will build by the end of this course. These cool 8 projects will help you to stand out in crowd from new developers

Preview 05:41

A lot of students are new here and wants to know what this responsive development means. If you already know what responsive web development is then feel free to skip this video

What is responsive web development

There are many frameworks like Bootstrap that can help you to create responsive web design. This video will help you learn more about why Bootstrap was selected and is most popular among other

Why Bootstrap and what is bootstrap

There are few quick and fast ways to write fast and clean code. In this video we will look at the options available for editors and plugins that we will use in this course like emmet

Getting tools and addons to code

All theory part is done !

Now, we will jump into learning and creating project section. Download your exercise files from here

Get Your exercise files here
Downloading and first usage of bootstrap
9 Lectures 01:10:13

A quick introduction of what we will do in this section. What you can expect by the end of the section

Section 2 - What we will do here

There are 2 major ways of including bootstrap. In this video we will learn about the manual download of bootstrap and including it in our project.

Setup bootstrap by manual downloading files

Another way to include bootstrap is via CDN aka content delivery Network. This is most common and popular way to include Bootstrap in project. 

Using Bootstrap with CDN

This video will talk about the most basic template of bootstrap project. Also will talk about common typography like H1 and h4 tags and paragraph tags

Template and typography basics

Grid is the most important topic of Bootstrap. This video is about the theory part of grid basics. This video will not make much sense without watching next video

Grid in Bootstrap - Theory

Code version is most important and is in continuation of grid system last video. This video will help you to understand about the grid system of bootstrap

Grid System in Bootstrap - code version

Moving into the project section, let's first setup the file structure for our very first project, jonny's Juice bar

Project - Jonny's Juice bar

Adding responsive full cover image is trending in responsive web design. we have to make sure that cover image looks good on mobile devices too.

Adding background responsive image

Further let's move on to adding custom fonts to our web page. Without custom fonts, website always looks like something is missing. 

Custom google fonts and responsive cover
Tables, buttons and Project
7 Lectures 58:12

Welcome to section 3. This video will give you a quick tour of what you can expect by the end of this section.

Section 3 - What we will do here

Tables are the most common ways to structure our content. Bootstrap gives us a lot of table design options to make sure that our content looks great

Tables in Bootstrap

Buttons in bootstrap are easy to setup. Bootstrap gives us a few option to use built in color options of button. button-primary and button-info are some examples

Buttons in Bootstrap

Moving into our next project, let;s create a structure for our Pricing comparison tables. we will follow the same structure in rest of our project as well.

Project - Feature comparison table - Font Awesome

First step is to get all the information that we want to display on web page to be dumped out on HTML page. So lets throw that info and use bootstrap in built classes as well

Writing HTML for Project

Next step is to add CSS to make sure that everything looks great and is at it's best. Bootstrap surely helps in this. Don't forget to add custom google fonts

Styling the project and Custom Fonts

Now our project looks great, let's add some custom icons here. We will add Font Awesome icons in this video to our project.

Finishing with custom font icons
Media queries, forms and Projects
13 Lectures 02:19:32
Section 4 - What we will do here

Media queries is the most important in adding different CSS rules for different screen sizes. After watching this movie on Media queries, you will get the topic as crystal clear

Preview 16:20

Although offset is considered as little scary topic in bootstrap but we will take it down easily. This video will get it clear in no time at all

Offset of columns in Bootstap

Almost every website need a form. Bootstrap gives us a lot of forms classes to handle forms and provide some cool styles to them

Forms in Bootstrap

Let's start a new project, this will be a registration form. Our goal is to make sure that forms behave according to screen sizes

Project - registration form setup

Giving some final touch to the form like adding background gradient and adding custom fonts

Registration form complete

Images in bootstrap comes with three different looks. let's explore all the classes of looks of images as well as classes for responsive images

All about images in Bootstrap

Moving further we will explore Navigation bar. Navigation bar in Bootstrap is responsive  and moves to Hamburger bar automatically on small sizes screens. Also we will look at Jumbotron

Navigation bar and jumbotron in Bootstrap

Let's create a new project, Ivan's Image gallery. This gallery will have a navigation bar, jumbotron and some images.

Project - Ivan's image gallery

Adding images is only thing left, but we want that on large screen 3 images shows side by side, on smaller 2 images and on smallest screen sizes just 1

Finishing Ivan's Image gallery

This login box will be 1 of it's kind. It will have image of admin, details like what is the IP and browser used to login from that login form

Project - Login Box

Finally we will add media queries to the project so that our form behaves differently with different screen sizes.

Media queries for project

Adding some final touches like border on images, Although project is complete but we will add some more touched to it

Final touch to project
Hand coding website section
10 Lectures 01:51:55

Introduction video about section 5. What you can expect in section 5 will be presented in this video

Section 5 - What we will do here

Moving into another project, we will create a web page for online bootcamp course selling purpose. The main goal of this project is learn about modal windows

Project - Course seller Page

Not only we will learn about the modal windows, we will also learn about playing youtube video in that modal window

Adding modal youtube pop over

Let's finish this project but there is an assignment that I have given with this video. Make sure that you the assignment solution in Q/A section

Finishing project and assignment

This is very unique project where we will not take help of documentation of site and will write all code by hand. This will help us to know more about classes of Bootstrap

Project - hand coded site

First of all let's write code for navigation bar. We will explore about the hamburger menu and drop down buttons as well.

Project - Writing Navigation Bar

Next step will be to add Carousels and images and make a new slider for our website. This will be only tough part in our website

Adding Carousel and images

Making marketing section is not at all very difficult. We need three section for large screen and one section for smaller screens

Marketing section

Feature section will be to write text for the feature products and complemented by an image

Features section and footer

Thank you so much for taking this course, make sure to check igneus library for more course

Thanks and where to go from here
About the Instructor
Igneus Technologies
4.3 Average rating
3,313 Reviews
81,337 Students
35 Courses
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.