Mô tả

Hi everyone!

This course covers all the different parts of the latest version of the world's most popular front-end framework, Bootstrap 5.1. Bootstrap has been used on millions of websites around the world and has been carefully developed to cover a wide range of typical user interfaces.

Web pages built with Bootstrap 5 works across all kinds of devices, browsers, and screen sizes while also taking care of accessibility and a clean and modern design.

I designed this course for:

  • Web developers who don't know bootstrap

  • Web developers who have used bootstrap 4 now want to upgrade to v5

  • Knows the basics of bootstrap 5 but needs to learn practical implementations

We are going to learn the basics of bootstrap 5 from scratch - bootstrap utilities, layouts, components. Then we are going to jump into the projects. After creating 5 courses with CSS we are going to see how to set up bootstrap 5 with sass. We will also see how to customize default bootstrap stylings using customization API. After that, we will be creating a website template by using bootstrap 5 and sass. If you don't have any prior knowledge of SASS, then don't worry! I got you covered. I will be explaining the SASS from the very basics.

Finally, I will walk you through how to create 6 different projects using Bootstrap 5.

PROJECTS

Learn to build the following projects using Bootstrap 5:

  • Project 1: Beginner Portfolio

  • Project 2: One-page Agency Template

  • Project 3: Bootstrap 5 Admin Dashboard

  • Project 4: Multipage Blog

  • Project 5: Professional Portfolio

  • Project 6: E-learning SASS template


WHY THIS COURSE?

Why this course instead of other Bootstrap courses?

Wondering why you should choose this course instead of other Bootstrap courses? This course has the following features that make it stand out among the rest:

  • No unnecessary staffs

  • Real-world professional projects

  • Other than learning about bootstrap 5, you will also learn how to use these-

    • Emmet for faster workflow

    • How to create beautiful animations using the AOS animations library

    • How to create charts and graphs using Chart js

    • Form validation methods

    • Typewriter effect using javascript

    • How to do filtering and sorting with isotope js

    • How we can create a working HTML form with PHP

    • Using vanilla js sliders like tiny slider

LET'S GET STARTED!

Bạn sẽ học được gì

Utilities, Layout and Components of the latest bootstrap 5 (v5.1.0) from September 2021

How to create real world professional websites with bootstrap 5

You will learn about other cool libraries and plugins like aos animations, tiny slider, smooth-scrollbar, isotope filtering and sorting and more...

How to create a setup with a bundler like parcel and also git and github

You will learn the basics of SASS by practical project

How to customize default bootstrap, create new utilities and more...

Not only bootstrap 5 but also how the real world web development works...

Yêu cầu

  • Basic understanding of HTML & CSS
  • A code editor and browser
  • A computer with internet connection

Nội dung khoá học

13 sections

Introduction

1 lectures
Introduction
02:25

Creating the Development Environment

4 lectures
Section 2 Introduction
00:32
Installing A Code Editor and Other Configurations
03:55
A Brief Overview of Emmet
05:16
Setting Up the Project Folder and Adding Bootstrap 5
09:12

Bootstrap 5 Utilities

13 lectures
Section 3 Introduction
00:34
Section Resources
00:01
Typography - 1
27:06
Typography - 2
10:49
Colors
11:54
Borders
15:40
Display
06:07
Bootstrap Flexbox
17:52
Clear your concepts on flexbox
00:02
Box Shadows
03:42
Positions
11:07
Sizing
11:16
Spacing
11:45

Bootstrap 5 Layouts and Responsiveness

6 lectures
Section 4 Introduction
00:23
Section Resources
00:01
Bootstrap 5 Containers
09:30
Breakpoints
03:18
Columns
20:12
Let's have some fun with quizzes!
2 questions

Bootstrap 5 Components

13 lectures
Section 5 Introduction
00:35
Section Resources
00:01
Alert Boxes
10:42
Buttons
11:32
Accordion
09:40
Carousel
09:40
Bootstrap Cards
11:03
Modals
08:45
Spinners
07:34
Navigation Bar
13:37
Pagination
03:31
Breadcrumb
03:38
Progressbar
10:00

First Project: Beginner Portfolio Website

10 lectures
Section 6 Introduction
01:56
Section Resources
00:01
Setting Up The Environment For The Project
04:22
Adding The Navigation Bar
09:32
Adding The Hero Section
11:15
Adding The About Section
13:48
Adding The Portfolio Section
08:47
Adding The Blog Section
05:48
Adding The Contact Form
10:07
Adding The Footer and ScrollSpy
10:18

Second Project: Indexter - One Page Bootstrap 5 Agency Template

12 lectures
Section 7 Introduction
02:05
Section Resources
00:02
Setting Up The Environment For The Project
07:18
Adding The Navigation Bar
08:01
Adding The Hero Section
10:46
Adding The Info Boxes
11:00
Adding The About Section
15:27
Adding The Services Section
09:37
Adding The Newsletter Section
15:32
Adding The Pricing Table
09:06
Adding The Footer & ScrollSpy
06:08
Adding The Animations
16:33

Third Project: Bootstrap 5 Admin Template

6 lectures
Section 8 Introduction
01:02
Section Resources
00:02
Adding The Top Navigation Bar
09:58
Adding The First Rows
16:02
Adding The Side Navigation Bar
20:24
Adding The Charts
15:20

Fourth Project: Bootstrap 5 Blog Template

11 lectures
Section 9 Introduction
03:01
Section Resources
00:01
Adding The Navigation Bar
10:07
Adding The Hero Section To The Homepage
07:21
First Carousel Post
16:21
Finishing Up The Main Blog Section
11:21
Adding The Right Sidebar With The Homepage
15:46
Right Sidebar Single Post Page
10:54
Full Width Single Post Page
04:03
Contact Page
24:56
Form Validation in Bootstrap Template
11:20

Fifth Project: Create A Professional Portfolio Site for Yourself

14 lectures
Section 10 Introduction
02:07
Section Resources
00:01
Adding The Hero Section
33:21
Adding The About Section Tabs
21:42
Adding The Services Section
11:09
Adding The Masonry Isotope Portfolio Section
35:41
Testimonial Section Slider
20:17
Creating A Functional Contact Form
25:43
Adding The Footer
12:19
Scroll To Top Button
09:00
Navbar And Scrollspy
24:07
Making The Template Responsive
09:11
Uploading the Template to Netlify
05:21
Issue With The Contact Form
03:13

Getting Started with SASS & Bootstrap 5

3 lectures
Setup of SASS with NPM & Parcel
20:55
How to Clone from GITHUB
05:40
Customization of Bootstrap with SASS
17:56

Project with SASS: E-Learning Website Template

12 lectures
Section 12 Introduction
01:32
Section Resources
00:01
Creating the Nav-Bar
24:47
Adding The Hero Section
22:22
Adding The Features Section
17:06
Adding The Courses Section
05:46
Stats Section
05:54
Adding The Pricing Section
12:57
Newsletter Section
05:11
Adding The Footer
12:24
Making The Template Responsive
16:08
Appling The Smooth Scrollbar
08:45

Final Thoughts

2 lectures
What Next?
06:08
Find A System That Works For You
06:04

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.