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
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
08:03

Part 2 of optional emmet guide

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

Learn to integrate bootstrap in regular projects

Bootstrap integration
11:03

Lets basics about bootstrap like h1, h2 and p tags

Bootstrap typography basics
08:36

More advance typography and advance use case

Bootstrap typography for testimonials
09:03

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

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

Let's get started with our first project

Getting assets and preparing html
10:31

responsive background with embedded youtube video

Beautiful landing page
15:13

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

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

Moving on and let's learn about bootstrap buttons

Get started with bootstrap buttons
07:07

more on bootstrap buttons like size and background themes

Button size and backgrounds
11:36

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

Border utilities in bootstrap
08:18

Moving on mobile first concept of bootstrap grid system

Mobile first concept of bootstrap
11:23

More on breakpoints available on grid system of bootstrap

Breakpoints in grid
07:21
+ 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
08:20

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

Logo and display utilities
06:20

Let's first tackle heading section of this project

Heading section
05:21

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

Team person one content
07:21

Adding some custom effects like hover effects and some bootstrap buttons

Custom styling for team section
08:19

finally let's fix some errors and assignment for you

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

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

Get started with navs
07:42

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

Flexbox utilities
05:06

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

Nav panels and assignments
11:20

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

Basics of navbars
08:44

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

Toggles and colors in navbars
10:25

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

Forms in bootstrap
11:52

Input groups are groups of forms that are customized by bootstrap

input groups in Bootstrap
07:16

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
14:24
+ Project - App Launch website
16 lectures 02:10:55

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

Device mockups
06:53

Download the customized resources for this project

getting resources
10:13

First let's design a custom navbar

Navbar part 1
09:42

Then adding elements in the center of navbars

Center menu of navbars
09:05

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

Login modal
08:40

Adding a feature section for the webpage and adding custom fonts

Feature section with custom font
09:09

Adding a custom SVG image in background of web page

Background svg image
09:07

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

Device mockups usage
06:40

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

Subscription form customization
05:40

Adding app store icons on the web page

App store icons
04:41

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

App store CSS
05:56

Next comes is the feature section for this app landing page

Building feature section
08:26

next let's add another column for feature section

Feature column section
07:05

adding CSS for the last feature section

Customized CSS for features
09:24

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

Fixing bugs and gradients
04:22

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

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

Moving towards the card section of bootstrap

Introduction to cards
10:56

Part 2 for our discussion for the card components in bootstrap

02 Introduction to cards part 2
08:20

Download the projects file for Bootstrap 4 project

Download project 4 files
05:10

Designing HTML part for the card 1

Preparing HTML for card 1
11:07

Writing custom CSS for card 1 - part 1

Card 1 custom CSS part 1
12:51

Preparing HTML for card 2

Preparing HTML for Card 2
06:43

Writing custom CSS for card 2 in different style

Card 2 custom CSS
10:11

Preparing HTML for Card 3

Preparing HTML for card 3
06:01

Writing custom CSS for card 3 - part 1

Card 3 custom css part 1
06:51

Writing custom CSS for card 3 - part 2

Custom CSS for card 3 - part 2
08:30

Writing custom CSS for card 3 - part 3

Custom CSS for card 3 - part 3
06:21

Preparing HTML for card 4

Preparing HTML for card 4
06:59

Writing custom CSS for card 4

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

download assets for this amazing login screen

Download projects 5 files
04:03

preparing HTML for this custom login screen

Preparing our HTML
13:35

Writing CSS for background image

CSS for background image
08:50

Adding purple styling to these google and facebook buttons

Purple styling of buttons
10:16

Adding colors to facebook and google buttons

Adding colors to buttons
06:47

Customize the default inputs and make them big

Fixing cutom forms
10:24

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

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

Thanks for taking this course

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

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