Bootstrap 5 From Scratch | Build 5 Modern Websites

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

Requirements

You should know the basics of HTML and CSS

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 SandboxWe 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 ChallengesThere 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 / BoilerplateWe 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 WebsitesNext, 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

Overview

Section 1: Getting Started

Lecture 1 Welcome To The Course

Lecture 2 Projects Overview

Lecture 3 What Is Bootstrap?

Lecture 4 How To Use Bootstrap

Lecture 5 Basic Environment Setup

Lecture 6 Bootstrap Sandbox Setup

Section 2: Bootstrap Fundamentals - Part 1

Lecture 7 Containers

Lecture 8 Typography

Lecture 9 Display & Position

Lecture 10 Background & Text Colors

Lecture 11 Spacing

Lecture 12 Sizing, Borders & Shadows

Lecture 13 Breakpoints

Lecture 14 Buttons

Lecture 15 Navbar

Lecture 16 Dark Mode & Variables

Section 3: Bootstrap Fundamentals - Part Two

Lecture 17 Bootstrap Grid & Columns

Lecture 18 Flexbox Classes

Lecture 19 Cards

Lecture 20 List Groups & Badges

Lecture 21 Forms & Input

Lecture 22 Form Validation & Display

Lecture 23 Alerts & Progress Bars

Lecture 24 Tables

Lecture 25 Breadcrumbs & Pagination

Lecture 26 Other CSS Utilities

Section 4: Dynamic JavaScript Components

Lecture 27 Dropdowns

Lecture 28 Accordions & Collapse

Lecture 29 Carousel

Lecture 30 Toast Notification

Lecture 31 Spinners

Lecture 32 Modals

Lecture 33 Popovers & Tooltips

Lecture 34 Darkmode Toggle

Section 5: Mini-Project Challenges

Lecture 35 Intro & Mini-Project Starter

Lecture 36 Pricing Cards

Lecture 37 Ratings Component

Lecture 38 User List

Section 6: Custom Sass Workflow & Starter Template

Lecture 39 What Is Sass?

Lecture 40 Install & Setup Sass

Lecture 41 Install, Setup & Customize Bootstrap

Lecture 42 Install & Setup Font Awesome

Lecture 43 Starter Template Download

Section 7: Website 1 - Ebook Website

Lecture 44 Project Intro

Lecture 45 Project Setup

Lecture 46 Navigation & Sass Variables

Lecture 47 Header/Hero Section

Lecture 48 Icon Section

Lecture 49 Navbar Scroll Effect

Lecture 50 Details Sections With Modals

Lecture 51 Testimonials, Download Section & Footer

Lecture 52 Contact Page

Lecture 53 Deploy To Vercel

Lecture 54 Formspree For Contact Forms

Section 8: Website 2 - Corso Training Website

Lecture 55 Project Intro

Lecture 56 Project Setup

Lecture 57 Nav & Header

Lecture 58 Image Carousel

Lecture 59 Register Area, Nav Scroll & Details

Lecture 60 Points & Summary Sections

Lecture 61 Invitation & Takeaways

Lecture 62 Subscribe & Footer

Section 9: Website 3 - Portfolio Website

Lecture 63 Project Intro

Lecture 64 Project Setup

Lecture 65 Header With Overlay

Lecture 66 Typing Effect JavaScript

Lecture 67 About & Skills Sections

Lecture 68 Projects & Lightbox

Lecture 69 StyleShout & Services

Lecture 70 Stats & Forms

Lecture 71 Deploy To Netlify

Section 10: Website 4 - Yavin Office Design

Lecture 72 Project Intro

Lecture 73 Project Setup

Lecture 74 Navigation & Header

Lecture 75 Stats & JavaScript Increment

Lecture 76 Intro, Details & Services

Lecture 77 3 Middle Sections

Lecture 78 Projects & Testimonials

Lecture 79 Contact Form & Footer

Lecture 80 Back To Top Button

Lecture 81 Inner Article Page

Section 11: Website 5 - Vera Software Solutions

Lecture 82 Project Intro

Lecture 83 Project Setup

Lecture 84 Header & Rotating Text Script

Lecture 85 Partners & Form

Lecture 86 Nav Scroll & Solutions

Lecture 87 Details & Expertise

Lecture 88 Video Section & Animated Button

Lecture 89 Video Modal

Lecture 90 Pricing & Project Sections

Lecture 91 Project Modals

Lecture 92 Newsletter Section & Footer

Lecture 93 Privacy Page

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