Bootstrap Bootcamp - Responsive web development- 8 projects

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

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.

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

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

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

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

Moving into the project section, let's first setup the file structure for our very first 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.

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

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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