Complete Bootstrap 4 course - build 3 projects
4.2 (454 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
13,984 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Complete Bootstrap 4 course - build 3 projects to your Wishlist.

Add to Wishlist

Complete Bootstrap 4 course - build 3 projects

A complete Bootstrap 4 course for beginners. Master Bootstrap 4 basics with 3 projects
4.2 (454 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
13,984 students enrolled
Last updated 4/2017
English
English
Price: Free
Includes:
  • 5 hours on-demand video
  • 1 Article
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Full understanding of Bootstrap 4 code
  • Design responsive web pages in Bootstrap 4
  • Will be able to read documentation on your own
View Curriculum
Requirements
  • A basic knowledge of HTML and CSS would be helpful
  • We will use Atom editor but you can use your favourite one
  • Bootstrap setup is covered in videos
Description

Welcome to complete Bootstrap 4 training with 3 projects.

What is Bootstrap ?

While writing code for a web page, we want our code to be responsive. In mobile oriented world, most people access websites on small devices. In order to do so, we have to write a lot of CSS. Not just vanilla CSS, CSS that is responsive. I know, that is a pain. 

Now, Imagine that If you could use CSS, written by someone else, that is fully responsive. Typical CSS things like button design, page structure design or sliders, already cooked up for you. Seems like unreal ? 

This is exactly what Boostrap is.

What knowledge do I need before learning Bootstrap 4?

First thing, this is a sound up course and is not dependent on any previous version of Bootstrap. Although, there is some amount of HTML and CSS that you need with you. We won’t be discussing things like what a body tag does or How you can select a paragraph with specific class in CSS.

This is kind of a course that is perfect once you are finished with your basic HTML and CSS training. 

What you will cover in this course ?

This course covers 3 main things.

  1. Bootstrap 4 in depth
  2. A walk through for creating projects from scratch
  3. Ability to read documentation 

These 3 points may look really simple but these are fundamental blocks of getting started as a web developer. Our goal is to make sure that you understand syntax of Boostrap 4. Further together, we will make projects so that you can understand entire workflow of creating landing pages and web pages. Further we will also look at finding right things from digging into documentation of Bootstrap 4. New elements like Cards and media queries are also covered.

There is a lot to learn in here, Catch you up inside the course

Who is the target audience?
  • Ideal student for this course is one, who is looking for responsive web development
  • Perfect course after finishing your basic HTML and CSS training
  • one who wants to learn Bootstrap 4 from scratch
Students Who Viewed This Course Also Viewed
Curriculum For This Course
36 Lectures
04:53:54
+
Get started with Bootstrap 4
4 Lectures 26:58
Introduction to the course
03:34

IN this video we will install Atom and a browser to work with

Tools that you will need (all free and cross platform tools)
06:50

Installing Bootstrap 4 by downloading CSS and JS files

Bootstrap manual install
10:37

Installing Bootstrap 4 by linking CSS and JS files online, AKA CDN linking

Bootstrap CDN installation - recommended
05:57
+
A project and text - images basics on Bootstrap 4
6 Lectures 47:59

Introduction about what is coming up in this section

Section 2 introduction
02:23

Let's start with text tags like H1 to H6 in Bootstrap 4

Basics of text tags in bootstrap 4
10:22

Text like paragraph and display 1 can be further helpful

More on texts
07:40

Let's look at some inbuilt classes for images

Handling Images in bootstrap 4
08:35

Our very first Project is a watch landing page

Project - Watch langing page
12:06

Let's complete watch landing page

Project - wathcing landing page - adding thumbnail
06:53
+
Containers, media break point and grid in Bootstrap
11 Lectures 01:34:13

Introduction about what is coming up in this section

Section 3 Introduction
02:37

Moving on to Container and fluid containers

Container and fluid containers
05:41

Media break points helps us to change CSS according to screen width

Media break points in Bootstrap 4
10:44

Boostrap has got 12 column grid system that we will explore in this video

12 column grid basics
09:45

Let's see if we can change column size based on screen sizes

Variable width content grid
05:32

Further we will have different column layout on different screens

Changing layouts on different screens
07:54

Basics of flexbox and focusing on align item property

Flexbox align items
10:03

moving on to another important flexbox property, justify content

Flexbox justify contents
07:18

Let's use these flexbox properties in order to align and nest grids

Flex properties and nesting grids
11:04

Now let's use grid knowledge to make our landing page further great

Project 2 - Code is awesome
13:04

Finishing up the project

Project 2 - Code is Awesome final
10:31
+
Colour, navbar, jumbotron and a project
8 Lectures 01:07:29

Introduction about what is coming up in this section

Section 4 introduction
02:30

Exploring the basic colour scheme in bootstrap like primary, info and danger colour

Colours in Bootstrap 4
09:55

Having a look at different types of buttons

Buttons in Bootstrap 4
05:21

Jumbotron is like a hero area in bootstrap. It gets quick focus on the page

Jumbotron in Bootstrap 4
07:28

Navbar is completely re-written in Bootstrap 4 and we will look at it's basic and color styling

Navbar and nav colours
11:15

Let's make a custom navigation bar 

A complete custom navbar part 1
10:41

Finishing custom navbar with drop downs

A complete custom navbar part 2
09:04

Modern websites uses sliders or know as carousels in bootstrap, a lot. Let's learn to use them

Carousel in Bootstrap 4
11:15
+
Cards, modal, forms and A project
6 Lectures 57:11

Introduction about what is coming up in this section

Section 5 Introduction
02:06

Cards are new introduction in Bootstrap 4, let learn the basics of cards

Cards basic in Bootstrap
09:29

Now, let's implement card by using them in a landscape based picture section

A finished card based landscape
12:39

Introduction to modals in bootstrap 4

Project - modal login
12:25

Modal have 2 phases to work on with, in this video we will work with trigger element.

Project - triggering modal
11:47

Finally, lets finish login modal window and also use input forms

Project - login modal finished
08:45
+
Farewell
1 Lecture 00:03

Thanks for taking out this course. Check out other igneus technologies courses, here at Udemy

Farewell and bonus
00:03
About the Instructor
Igneus Technologies
4.3 Average rating
2,940 Reviews
77,131 Students
35 Courses
Best Comprehensive Courses

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.