Complete Bootstrap 4 course - build 3 projects

A complete Bootstrap 4 course for beginners. Master Bootstrap 4 basics with 3 projects

Created byIgneus Technologies

Last updated 4/2017

English

What you'll learn

Full understanding of Bootstrap 4 code
Design responsive web pages in Bootstrap 4
Will be able to read documentation on your own

Course content

6 sections • 36 lectures • 4h 53m total length

Introduction to the course3:34
Tools that you will need (all free and cross platform tools)6:50
IN this video we will install Atom and a browser to work with
Bootstrap manual install10:37
Installing Bootstrap 4 by downloading CSS and JS files
Bootstrap CDN installation - recommended5:57
Installing Bootstrap 4 by linking CSS and JS files online, AKA CDN linking

Section 2 introduction2:23
Introduction about what is coming up in this section
Basics of text tags in bootstrap 410:22
Let's start with text tags like H1 to H6 in Bootstrap 4
More on texts7:40
Text like paragraph and display 1 can be further helpful
Handling Images in bootstrap 48:35
Let's look at some inbuilt classes for images
Project - Watch langing page12:06
Our very first Project is a watch landing page
Project - wathcing landing page - adding thumbnail6:53
Let's complete watch landing page

Section 3 Introduction2:37
Introduction about what is coming up in this section
Container and fluid containers5:41
Moving on to Container and fluid containers
Media break points in Bootstrap 410:44
Media break points helps us to change CSS according to screen width
12 column grid basics9:45
Boostrap has got 12 column grid system that we will explore in this video
Variable width content grid5:32
Let's see if we can change column size based on screen sizes
Changing layouts on different screens7:54
Further we will have different column layout on different screens
Flexbox align items10:03
Basics of flexbox and focusing on align item property
Flexbox justify contents7:18
moving on to another important flexbox property, justify content
Flex properties and nesting grids11:04
Let's use these flexbox properties in order to align and nest grids
Project 2 - Code is awesome13:04
Now let's use grid knowledge to make our landing page further great
Project 2 - Code is Awesome final10:31
Finishing up the project

Section 4 introduction2:30
Introduction about what is coming up in this section
Colours in Bootstrap 49:55
Exploring the basic colour scheme in bootstrap like primary, info and danger colour
Buttons in Bootstrap 45:21
Having a look at different types of buttons
Jumbotron in Bootstrap 47:28
Jumbotron is like a hero area in bootstrap. It gets quick focus on the page
Navbar and nav colours11:15
Navbar is completely re-written in Bootstrap 4 and we will look at it's basic and color styling
A complete custom navbar part 110:41
Let's make a custom navigation bar
A complete custom navbar part 29:04
Finishing custom navbar with drop downs
Carousel in Bootstrap 411:15
Modern websites uses sliders or know as carousels in bootstrap, a lot. Let's learn to use them

Section 5 Introduction2:06
Introduction about what is coming up in this section
Cards basic in Bootstrap9:29
Cards are new introduction in Bootstrap 4, let learn the basics of cards
A finished card based landscape12:39
Now, let's implement card by using them in a landscape based picture section
Project - modal login12:25
Introduction to modals in bootstrap 4
Project - triggering modal11:47
Modal have 2 phases to work on with, in this video we will work with trigger element.
Project - login modal finished8:45
Finally, lets finish login modal window and also use input forms

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.

Bootstrap 4 in depth
A walk through for creating projects from scratch
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 this course is for:

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

Complete Bootstrap 4 course - build 3 projects

What you'll learn

Explore related topics

Course content

Get started with Bootstrap 44 lectures • 27min

A project and text - images basics on Bootstrap 46 lectures • 48min

Containers, media break point and grid in Bootstrap11 lectures • 1hr 34min

Colour, navbar, jumbotron and a project8 lectures • 1hr 7min

Cards, modal, forms and A project6 lectures • 57min

Farewell1 lecture • 1min

Requirements

Description

Who this course is for: