Bootstrap 4 Development For Professionals Online Course

Bootstrap 4 Development For Professionals

All levels
English

Course Description

Bootstrap 4 is the most popular HTML, CSS and JS framework which is used for developing responsive, mobile-first websites. It is completely free to download or use and is the latest version of Bootstrap with newer components and more responsiveness. It is easy to use and is compatible with all the major browsers like Chrome, Firefox, Safari, Opera, Edge and others. It includes various design templates for typography, fonts, tables, modals and others which are based on HTML and CSS. Moreover, anyone with the basic knowledge of HTML and CSS can use Bootstrap. All these and a lot of other features makes it one of the most popular front-end frameworks which is used by the web designers. Already big names like Spotify, Twitter, StackShare, Udemy, Coursera, Docker, Hootsuite and others are using Bootstrap. Owing to these facts, we created this course for anyone and everyone who wants to learn this amazing framework with the help of practical projects.

See more less

What you’ll learn

Basic introduction
SCSS + Gulp, Installing SASS and Gulp, Variable, and Nesting
Flexbox
Typography, font family, inline text elements, blockquotes and list
Code images and figures
Table syntax, bootstrap tables, responsive tables
Alert, badges, breadcrumbs and toasts
Buttons, button groups and pagination - Upcoming
Cards, carousel, collapse and dropdown - Upcoming
Jambotrone, Listgroups and Media objects - Upcoming
Nav and navbars - Upcoming
Utilities including colors, display, embed, positions, shadows and others and much more!

Covering Topics

Section 1 : Introduction section

Section 2 : Bootstrap 101

Section 3 : SCSS + Gulp

Section 4 : Grid and Flexbox

Section 5 : Typography

Section 6 : Code Images and Figures

Section 7 : Components I Alerts, Badges, Breadcrumbs and Toasts

Section 8 : Components 2 Buttons, Button Groups and Pagination

Section 9 : Components 3 Cards

Section 10 : Components 4 Carousel, Collapse and Dropdown

Section 11 : Components 5 Forms and Input Groups

Section 12 : Components 6 Jambotrone, List groups and Media objects

Section 13 : Components 7 Modal, popovers and tooltips

Section 14 : Accessibility

Section 15 : Utilities

Section 16 : Project 1

Section 17 : Project 2

Section 18 : Project 3

Section 19 : Project 4

Section 20 : Project 5

Section 21 : Project 6

Section 22 : Project 7

Section 23 : Project 8

Section 24 : Project 9

Section 25 : Project 10

Curriculum

  Section 1 : Introduction section
1
Intro Preview
2
who is this course for
3
How to Succeed
4
Advantages and Disadvantages
5
what this course will cover
6
Html Review
7
Css review

  Section 2 : Bootstrap 101
8
Framework vs Library
9
Reading Documentations
10
Detting Started
Quiz:
Section 2 Quiz

  Section 3 : SCSS + Gulp
11
Sass Intorduction Preview
12
Gulp Intorduction
13
Installing Sass Windows
14
Installing Nodejs and npm
15
Starting out with gulp and sass
16
Testing with browsersync
17
Sass Porject Structure Preview
18
Variables and Nesting
19
BEM
20
Extends Mixins and Includes
21
Functions and Operators
22
LAB1 Problem
23
LAB1 Solution
24
LAB2 Problem
25
LAB2 Solution
Quiz:
Section 3 Quiz

  Section 4 : Grid and Flexbox
26
Flexbox
27
Installing with NPM
28
Adding Custom Bootstrap to Project
29
Container and Breakpoints
30
Grid Options
31
Equally width Columns
32
Gutters and Alignment
33
What to Stay Away from in Bootstrap Grid
34
Nesting and Sass
35
Lab Problem
36
Lab Solution
Quiz:
Section 4 Quiz

  Section 5 : Typography
37
Typography
38
RFS
39
RFS in Action
40
Vertical rhythm Updated
Quiz:
Section 5 Quiz

  Section 6 : Code Images and Figures
41
Code
42
Images and Figures
43
Table Syntax
44
Bootstrap Tables
45
Bootstrap Responsive Tables
46
None Bootstrap Responsive Tables
47
Lab Problem
48
Lab Solution
Quiz:
Section 6 Quiz

  Section 7 : Components I Alerts, Badges, Breadcrumbs and Toasts
49
Node Modules
50
Building JavaScript
51
Util.js
52
Alerts
53
Bootstrap Colors
54
Close Alerts
55
JavaScript Alerts
56
Badges
57
Breadcrumb
58
Lab Problem
59
Lab Solution
Quiz:
Section 7 Quiz

  Section 8 : Components 2 Buttons, Button Groups and Pagination
60
Buttons
61
Overriding Bootstrap
62
Button State
63
Button Group
64
Pagination
Quiz:
Section 8 Quiz

  Section 9 : Components 3 Cards
65
Card
66
Media Object
67
List Group
68
Lab Problem
69
Lab Solution
Quiz:
Section 9 Quiz

  Section 10 : Components 4 Carousel, Collapse and Dropdown
70
Carousel
71
Carousel JavaScript
72
Collapse
73
Dropdown
74
Dropdown JavaScript
75
Jumbotron
76
Lab problem
77
Lab solution
Quiz:
Section 10 Quiz

  Section 11 : Components 5 Forms and Input Groups
78
Froms layout
79
Froms Validation and Custom Forms
80
Froms Testing Component
81
Input Groups
82
Navs
83
Navbar
84
Navbar Color Schemes
85
Nav tabs and List group tabs
86
Lab Problem
87
Lab Solution
Quiz:
Section 11 Quiz

  Section 12 : Components 6 Jambotrone, List groups and Media objects
88
Modal
89
Modal JavaScript
90
Progress
91
Scrollspy
92
Spinners
93
Lab Problem
94
Lab Solution
Quiz:
Section 12 Quiz

  Section 13 : Components 7 Modal, popovers and tooltips
95
Tooltip
96
Popovers
97
Toasts
98
Bootstrap Cheat Sheet
Quiz:
Section 13 Quiz

  Section 14 : Accessibility
99
Intro to Accessibility
100
Accessibility options
Quiz:
Quiz 14

  Section 15 : Utilities
101
Utilities borders clearfix close icon colors display embed
102
Utilities flex floats overflow position screen readers
103
Utilities shadow sizing spacing stretched link text vertical align visibility
104
Theming
Quiz:
Quiz 15

  Section 16 : Project 1
105
Single product page intro
106
Markup Overview
107
Decresing size-of css and js

  Section 17 : Project 2
108
Blog Intro
109
Blog Code Walkthrough
110
Blog Adding Contact Page

  Section 18 : Project 3
111
Stock Image Webiste Intro
112
Stock Image Webiste Code Overview

  Section 19 : Project 4
113
Image Gallery Intro
114
Image Gallery Header Live Code
115
Image Gallery Grid Column Layout

  Section 20 : Project 5
116
Intro Landing Page Project
117
Code Overview

  Section 21 : Project 6
118
Intro to Adming Dashboard
119
Admin Dashboard Layout Overview

  Section 22 : Project 7
120
Portfolio Header
121
Banner and Icons
122
Portfolio Markup and Styles
123
Portfolio Modal and js
124
Form

  Section 23 : Project 8
125
Resume Website Intro
126
Resume Website Code Review

  Section 24 : Project 9
127
Intro Coming Soon
128
Coming Soon Page Html Markup
129
Coming Soong Styling-1
130
Coming Soong Styling-2
131
Coming Soon Slider

  Section 25 : Project 10
132
Intor to Slicing
133
Header Section
134
Service Section
135
Pricing Table and Testimonials Sections
136
Contact us Section
137
Footer

Frequently Asked Questions

vIt is an online tutorial that covers a specific part of a topic in several sections. An Expert teaches the students with theoretical knowledge as well as with practical examples which makes it easy for students to understand.

A Course helps the user understand a specific part of a concept. While a path and E-Degrees are broader aspects and help the user understand more than just a small area of the concept.

A Course will help you understand any particular topic. For instance, if you are a beginner and want to learn about the basics of any topic in a fluent manner within a short period of time, a Course would be best for you to choose.

We have an inbuilt question-answer system to help you with your queries. Our support staff will be answering all your questions regarding the content of the Course.