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 !
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
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
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
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
All theory part is done !
Now, we will jump into learning and creating project section. Download your exercise files from here
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
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.