Complete Bootstrap 4 - build 5 modern projects

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

40 students enrolled

Created by Igneus Technologies

Last updated 1/2019

English

English [Auto]

Preview this course

Complete Bootstrap 4 - build 5 modern projects

$139.99 $199.99 30% off

5 hours left at this price!

30-Day Money-Back Guarantee

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

+ – Introduction to bootstrap 4

5 lectures 28:40

Let's get started with introduction to bootstrap

Introduction to bootstrap 4

Preview 04:54

Getting details about tools to be used in this course

Tools to be used in this course

Preview 04:34

Make sure that your exercise files are properly arranged

File structure for learning

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