Bootstrap 5 From Scratch | Build 5 Modern Websites

Focused View

Brad Traversy

13:17:32

181 View

1. Getting Started

1. Welcome To The Course.mp4

04:49

2. Projects Overview.mp4

09:30

3. What Is Bootstrap.mp4

07:01

4. How To Use Bootstrap.mp4

05:54

5. Basic Environment Setup.mp4

08:31

6.1 bootstrap-sandbox.zip

6. Bootstrap Sandbox Setup.mp4

02:54

2. Bootstrap Fundamentals - Part 1

1. Containers.mp4

06:57

2. Typography.mp4

07:55

3. Display & Position.mp4

07:47

4. Background & Text Colors.mp4

07:13

5. Spacing.mp4

09:19

6. Sizing, Borders & Shadows.mp4

05:55

7. Breakpoints.mp4

03:25

8. Buttons.mp4

08:45

9. Navbar.mp4

11:22

10. Dark Mode & Variables.mp4

02:45

3. Bootstrap Fundamentals - Part Two

1. Bootstrap Grid & Columns.mp4

17:22

2. Flexbox Classes.mp4

05:44

3. Cards.mp4

08:44

4. List Groups & Badges.mp4

06:46

5. Forms & Input.mp4

12:14

6. Form Validation & Display.mp4

06:51

7. Alerts & Progress Bars.mp4

08:35

8. Tables.mp4

03:22

9. Breadcrumbs & Pagination.mp4

06:04

10. Other CSS Utilities.mp4

03:19

4. Dynamic JavaScript Components

1. Dropdowns.mp4

06:21

2. Accordions & Collapse.mp4

07:29

3. Carousel.mp4

08:44

4. Toast Notification.mp4

05:12

5. Spinners.mp4

03:22

6. Modals.mp4

04:51

7. Popovers & Tooltips.mp4

07:01

8. Darkmode Toggle.mp4

04:26

5. Mini-Project Challenges

1.1 mini-projects-starter.zip

1. Intro & Mini-Project Starter.mp4

05:57

2. Pricing Cards.mp4

13:17

3. Ratings Component.mp4

14:42

4. User List.mp4

19:17

6. Custom Sass Workflow & Starter Template

1. What Is Sass.mp4

05:50

2. Install & Setup Sass.mp4

12:55

3. Install, Setup & Customize Bootstrap.mp4

08:15

4. Install & Setup Font Awesome.mp4

04:07

5.1 bs5-simple-starter.zip

5. Starter Template Download.html

7. Website 1 - Ebook Website

1. Project Intro.mp4

04:06

2.1 ebook-website-final.zip

2.2 ebook-website-starter.zip

2. Project Setup.mp4

05:37

3. Navigation & Sass Variables.mp4

15:09

4. HeaderHero Section.mp4

12:05

5. Icon Section.mp4

06:12

6. Navbar Scroll Effect.mp4

05:10

7. Details Sections With Modals.mp4

14:02

8. Testimonials, Download Section & Footer.mp4

16:07

9. Contact Page.mp4

08:46

10. Deploy To Vercel.mp4

05:55

11. Formspree For Contact Forms.mp4

04:57

8. Website 2 - Corso Training Website

1. Project Intro.mp4

03:03

2.1 corso-website-final.zip

2.2 corso-website-starter.zip

2. Project Setup.mp4

04:12

3. Nav & Header.mp4

12:44

4. Image Carousel.mp4

07:17

5. Register Area, Nav Scroll & Details.mp4

10:26

6. Points & Summary Sections.mp4

10:51

7. Invitation & Takeaways.mp4

13:05

8. Subscribe & Footer.mp4

10:15

9. Website 3 - Portfolio Website

1. Project Intro.mp4

04:01

2.1 portfolio-website-final.zip

2.2 portfolio-website-starter.zip

2. Project Setup.mp4

04:30

3. Header With Overlay.mp4

12:58

4. Typing Effect JavaScript.mp4

04:58

5. About & Skills Sections.mp4

16:27

6. Projects & Lightbox.mp4

07:27

7. StyleShout & Services.mp4

11:06

8. Stats & Forms.mp4

13:38

9. Deploy To Netlify.mp4

06:21

10. Website 4 - Yavin Office Design

1. Project Intro.mp4

03:14

2.1 yavin-website-final.zip

2.2 yavin-website-starter.zip

2. Project Setup.mp4

03:38

3. Navigation & Header.mp4

16:30

4. Stats & JavaScript Increment.mp4

08:46

5. Intro, Details & Services.mp4

08:57

6. 3 Middle Sections.mp4

16:35

7. Projects & Testimonials.mp4

15:08

8. Contact Form & Footer.mp4

11:50

9. Back To Top Button.mp4

08:53

10. Inner Article Page.mp4

12:07

11. Website 5 - Vera Software Solutions

1. Project Intro.mp4

02:44

2.1 vera-website-final.zip

2.2 vera-website-starter.zip

2. Project Setup.mp4

02:51

3. Header & Rotating Text Script.mp4

13:34

4. Partners & Form.mp4

15:57

5. Nav Scroll & Solutions.mp4

08:42

6. Details & Expertise.mp4

15:40

7. Video Section & Animated Button.mp4

17:45

8. Video Modal.mp4

09:05

9. Pricing & Project Sections.mp4

13:53

10. Project Modals.mp4

06:14

11. Newsletter Section & Footer.mp4

05:55

12. Privacy Page.mp4

07:20

Description

Learn to customize and build modern websites from scratch using Bootstrap 5

What You'll Learn?

Create 5 high quality websites from scratch
Create an enviroment boilerplate to compile Sass & customize Bootstrap
3 mini-project challenges
Learn & examine Bootstrap classes & utilities using sandbox files
Learn semantic HTML5 & CSS techniques

Who is this for?

People that want to build high quality websites & UIs using Bootstrap

What You Need to Know?

You should know the basics of HTML and CSS

More details

Description
This course is for anyone that wants to learn how to build modern websites and UIs using the Bootstrap CSSÂ framework. This course is very beginner friendly, but is also for anyone that wants to build some cool projects.

The course is broken up into a few parts...

The Bootstrap Sandbox

We will start off by learning all of the important Bootstrap classes, utilities, helpers, etc by using the Bootstrap sandbox. This is a collection of files that are categorized for certain components and areas such as buttons, typography, grid columns, flex, etc. You will have a starter version without the classes and we will go through and add the classes and talk about them and in some cases examine the CSS. We will use the sandbox for all of the CSSÂ components as well as the JavaScript widgets such as the carousel, accordion, toast notifications and so on.

Mini-Project Challenges

There will be a couple mini-projects that I will ask you to complete yourself, based on what you learned in the sandbox sections. This includes a pricing grid, ratings component and a user list. I may add more to this section as well.

Starter Template / Boilerplate

We will be creating a template and environment to build our main projects. This will include using NPMÂ (Node Package Manager) to install Bootstrap and Sass. We will customize Bootstrap by changing Sass variables and then compiling a custom bootstrap.css file. If you don't know NPM or Sass, that is fine. I explain everything as I go.

5 Main Websites

Next, we will use the starter template to create 5 great looking websites. In these websites, we will use Bootstrap componenrs, JavaScript widgets as well as some custom JavaScript and 3rd part libraries to give us a little more functionality.

The websites are as follows:

- Ebook Website -Â Website that offers a free ebook about starting a blog
- Corso Website - Website that offers training courses and seminars
- Portfolio Website - Modern looking portfolio for developers
- Yavin Website - AÂ business that creates custom office spaces
- Vera Website - Software solutions website
Who this course is for:
People that want to build high quality websites & UIs using Bootstrap

User Reviews

Rating

average 0

Total votes0

Focused display

Brad Traversy has been programming for around 12 years and teaching for almost 5 years. He is the owner of Traversy Media which is a successful web development YouTube channel and specializes in everything from HTML5 to front end frameworks like Angular as well as server side technologies like Node.js, PHP and Python. Brad has mastered explaining very complex topics in a simple manner that is very understandable. Invest in your knowledge by watching Brad's courses.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.