Bootstrap 5 From Scratch: Build 5 Modern Websites

Bootstrap 5 From Scratch: Build 5 Modern Websites

13h 19mBeginner2026-08-18

Authors

Packt Publishing

Packt Publishing

Course details

Bootstrap has empowered countless developers and designers to build responsive websites quickly. In this course, learn how to harness that power for your own projects, starting with the fundamentals so even beginners can find their footing. Explore foundational elements like containers, typography, and buttons, then move into dynamic JavaScript components such as dropdowns, modals, and carousels. This course takes a hands-on approach built around learning by doing, with mini-project challenges throughout to test and solidify your knowledge. As you progress, discover custom Sass workflows that take customization to a new level. By the end of this course, you’ll have built five distinct websites, each with its own flavor and complexity, equipping you with the skills to take on any web project.

Learning objectives
Understand Bootstrap's foundational concepts, from containers to breakpoints.
Implement dynamic elements utilizing Bootstrap's JavaScript components.
Customize your website using Sass for a distinctive design touch.
Construct five varied websites, harnessing an array of Bootstrap functionalities.
Deploy your creations to renowned platforms like Vercel and Netlify.
Master techniques such as Navbar Scroll Effect, Rotating Text Script, and JavaScript typing effects.

Concepts

Introduction

  • Welcome to the course
  • Projects overview
  • What is Bootstrap
  • How to use Bootstrap
  • Basic environment setup
  • Bootstrap sandbox setup

Bootstrap Fundamentals - Part 1

  • Containers
  • Typography
  • Display and position
  • Background and text colors
  • Spacing
  • Sizing, borders, and shadows
  • Breakpoints
  • Buttons
  • Navigation bar
  • Dark mode and variables

Bootstrap Fundamentals - Part 2

  • Bootstrap grid and columns
  • Flexbox classes
  • Cards
  • List groups and badges
  • Forms and input
  • Form validation and display
  • Alerts and progress bars
  • Tables
  • Breadcrumbs and pagination
  • Other Cascading Style Sheets (CSS) utilities

Dynamic JavaScript Components

  • Drop-downs
  • Accordions and collapse
  • Carousel
  • Toast notification
  • Spinners
  • Modals
  • Popovers and tooltips
  • Dark mode toggle

Mini-Project Challenges

  • Introduction and mini-project starter
  • Pricing cards
  • Ratings component
  • User list

Custom Sass Workflow and Starter Template

  • What is Sass
  • Install and set up Sass
  • Install, set up, and customize Bootstrap
  • Install and set up Font Awesome

Website 1 - ebook Website

  • Project introduction
  • Project setup
  • Navigation and Sass variables
  • Header and hero section
  • Icon section
  • Navigation bar scroll effect
  • Details sections with modals
  • Testimonials, download section, and footer
  • Contact page
  • Deploy to Vercel
  • Formspree for contact forms

Website 2 - Corso Training Website

  • Project introduction
  • Project setup
  • Navigation and header
  • Image carousel
  • Register area, navigation scroll, and details
  • Points and summary sections
  • Invitation and takeaways
  • Subscribe and footer

Website 3 - Portfolio Website

  • Project introduction
  • Project setup
  • Header with overlay
  • Typing effect JavaScript
  • About and skills sections
  • Projects and lightbox
  • StyleShout and services
  • Statistics and forms
  • Deploy to Netlify

Website 4 - Yavin Office Design

  • Project introduction
  • Project setup
  • Navigation and header
  • Statistics and JavaScript increment
  • Introduction, details, and services
  • Three middle sections
  • Projects and testimonials
  • Contact form and footer
  • Back-to-top button
  • Inner article page

Website 5 - Vera Software Solutions

  • Project introduction
  • Project setup
  • Header and rotating text script
  • Partners and form
  • Navigation scroll and solutions
  • Details and expertise
  • Video section and animated button
  • Video modal
  • Pricing and project sections
  • Project modals
  • Newsletter section and footer
  • Privacy page
200,000 Toman