Complete Bootstrap 4 - build 5 modern projects
4.0 (3 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
40 students enrolled

Complete Bootstrap 4 - build 5 modern projects

Bootstrap 4 with modern trends in web development. Design mobile optimized projects and master bootstrap 4
4.0 (3 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
40 students enrolled
Last updated 1/2019
English [Auto]
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 9.5 hours on-demand video
  • 1 article
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Learn to design 5 modern web pages
  • Learn to use Bootstrap in any web project
  • develop websites for multiple sceens
  • Learn to read bootstrap docs and use them
  • Design responsive web pages
Course content
Expand all 68 lectures 09:23:17
+ Introduction to bootstrap 4
5 lectures 28:40

Let's get started with introduction to bootstrap

Preview 04:54

Getting details about tools to be used in this course

Preview 04:34

Make sure that your exercise files are properly arranged

Preview 05:10

An optional guide for emmet to write faster code

Emmet quick start part 1

Part 2 of optional emmet guide

Emmet quick start part 2
+ Bootstrap basics
4 lectures 38:39

Learn to integrate bootstrap in regular projects

Bootstrap integration

Lets basics about bootstrap like h1, h2 and p tags

Bootstrap typography basics

More advance typography and advance use case

Bootstrap typography for testimonials

Learn to embed youtube videos in a web page so that later we can design our first project

Embed responsive youtube videos
+ Project - Video Landing Page
3 lectures 29:41

Let's get started with our first project

Getting assets and preparing html

responsive background with embedded youtube video

Beautiful landing page

Adding a customised font as a final touch for the project.

Customized fonts
+ Buttons, breakpoints and utilities
5 lectures 45:45

Moving on and let's learn about bootstrap buttons

Get started with bootstrap buttons

more on bootstrap buttons like size and background themes

Button size and backgrounds

Amazing new addition in bootstrap is utilities, one of them is border utility.

Border utilities in bootstrap

Moving on mobile first concept of bootstrap grid system

Mobile first concept of bootstrap

More on breakpoints available on grid system of bootstrap

Breakpoints in grid
+ Project - Team page
6 lectures 44:33

Lets setup our next project. Download the exercise files and let's get started

Getting assets and basic setup of projects

We will first put a logo and will use display utilities from bootstrap 4

Logo and display utilities

Let's first tackle heading section of this project

Heading section

WE will first create 1 team section. Rest of the stylings are almost the same.

Team person one content

Adding some custom effects like hover effects and some bootstrap buttons

Custom styling for team section

finally let's fix some errors and assignment for you

Some fix and assignments
+ Navbars, flexbox, forms and modals
8 lectures 01:16:49

Let's explore more topics in bootstrap, starting with navs

Get started with navs

In this video we will explore flexbox utilities classes in bootstrap 4

Flexbox utilities

In this video we will move towards navpanels and there is an assignment too.

Nav panels and assignments

Further in this video we will explore the basics of navbars.

Basics of navbars

Togglers are very common in navbars, also we will learn about changing colors of navbars

Toggles and colors in navbars

Designing great forms in one of the key thing in web world. let's learn to design forms

Forms in bootstrap

Input groups are groups of forms that are customized by bootstrap

input groups in Bootstrap

Modals are pop over actions in bootstrap. They are so well designed that anyone can put anything in that, forms, buttons etc

Modals in bootstrap 4
+ Project - App Launch website
16 lectures 02:10:55

Device mockups are very important as many apps are getting launched everyday.

Device mockups

Download the customized resources for this project

getting resources

First let's design a custom navbar

Navbar part 1

Then adding elements in the center of navbars

Center menu of navbars

Adding a modal window and we will add a custom login form in it.

Login modal

Adding a feature section for the webpage and adding custom fonts

Feature section with custom font

Adding a custom SVG image in background of web page

Background svg image

Now, let's add a custom device mockup. You can even choose any image from this mentioned github link

Device mockups usage

Now, let's add a custom subscription form, from bootstrap

Subscription form customization

Adding app store icons on the web page

App store icons

Now, let's customize CSS for the app store icons

App store CSS

Next comes is the feature section for this app landing page

Building feature section

next let's add another column for feature section

Feature column section

adding CSS for the last feature section

Customized CSS for features

Let's fix some bugs and add gradients to this section

Fixing bugs and gradients

This is a little unplanned video, to give idea about continuing this project

Just fun - unplanned video
+ Project - Build 4 Custom cards
13 lectures 01:47:22

Moving towards the card section of bootstrap

Introduction to cards

Part 2 for our discussion for the card components in bootstrap

02 Introduction to cards part 2

Download the projects file for Bootstrap 4 project

Download project 4 files

Designing HTML part for the card 1

Preparing HTML for card 1

Writing custom CSS for card 1 - part 1

Card 1 custom CSS part 1

Preparing HTML for card 2

Preparing HTML for Card 2

Writing custom CSS for card 2 in different style

Card 2 custom CSS

Preparing HTML for Card 3

Preparing HTML for card 3

Writing custom CSS for card 3 - part 1

Card 3 custom css part 1

Writing custom CSS for card 3 - part 2

Custom CSS for card 3 - part 2

Writing custom CSS for card 3 - part 3

Custom CSS for card 3 - part 3

Preparing HTML for card 4

Preparing HTML for card 4

Writing custom CSS for card 4

Custom CSS for card 4
+ Project - Bonus Signup page
7 lectures 01:00:52

download assets for this amazing login screen

Download projects 5 files

preparing HTML for this custom login screen

Preparing our HTML

Writing CSS for background image

CSS for background image

Adding purple styling to these google and facebook buttons

Purple styling of buttons

Adding colors to facebook and google buttons

Adding colors to buttons

Customize the default inputs and make them big

Fixing cutom forms

Fixing some minor errors and writing media queries to make it responsive

Fixing errors and media queries
+ Thanks for taking this course
1 lecture 00:01

Thanks for taking this course

Thanks for taking this course
  • Basics of HTML and CSS is required. No need to be expert in CSS

Welcome to a course on Bootstrap 4. 

Most important thing is that Bootstrap 4 is not dependent in any other version of bootstrap. So you can start learning bootstrap 4 without knowledge of any other version. Learning bootstrap is easy as their documentation is one of the best documentation available online. But the difficult part is to learn bootstrap and be able to develop projects that look modern and are responsive.

To resolve this major issues, we will be creating 5 completely different projects by using bootstrap 4 knowledge. These projects will not only help you in learning bootstrap but will also act as your portfolio while applying for jobs as a front end developer or full stack developer. One of the major reason that people love bootstrap so much is that everything looks so great right out of the box. Most of the components don’t require much CSS work. So if you think that you are not that much great in CSS, bootstrap is for you.

If you know CSS a little, you can take bootstrap projects to next level. 

I will walk you through with bootstrap basics, installation and usage for projects. Bootstrap is super easy to integrate and you will be using bootstrap in no time. One of the big myth is that all bootstrap projects looks the same. That is because most people don’t change anything default in bootstrap. In this course, I. Will walk you to edit CSS in bootstrap projects and make them customized. 
This is a very simple course that can be mastered within a week or so. All exercise files, graphic assets and some of my custom clicked amazing photos also comes with this course. 

Check the promo video to see all the projects that we will be building in this course.

Catch you inside the course!

Who this course is for:
  • Beginners in web development
  • Beginners, just after HTML and CSS
  • One who wants to improve web development skills