Bootstrap 5 Online Course
This course is designed to help you master Bootstrap step by step, starting with the basics like containers, typography, and buttons, and moving on to JavaScript components such as dropdowns, modals, and carousels. What makes this course unique is its hands-on learning approach, with mini-projects throughout to reinforce concepts. You’ll also explore custom SASS workflows to learn advanced customization techniques.
By the end of the course, you’ll have built five fully functional websites, each showcasing different levels of design and complexity, giving you the confidence and skills to tackle any Bootstrap-based web project.
Who should take this Course?
The Bootstrap 5 Online Course is ideal for web developers, designers, and students who want to create responsive, mobile-first websites efficiently using the latest version of the Bootstrap framework. It’s also suitable for beginners aiming to learn modern front-end development practices, as well as professionals seeking to speed up their design process with ready-to-use components and utilities. Basic knowledge of HTML, CSS, and JavaScript is recommended for effective learning.
What you will learn
- 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
Course Outline
Getting Started
- 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 & Position
- Background & Text Colors
- Spacing
- Sizing, Borders & Shadows
- Breakpoints
- Buttons
- Navbar
- Dark Mode & Variables
Bootstrap Fundamentals - Part 2
- Bootstrap Grid & Columns
- Flexbox Classes
- Cards
- List Groups & Badges
- Forms & Input
- Form Validation & Display
- Alerts & Progress Bars
- Tables
- Breadcrumbs & Pagination
- Other CSS Utilities
Dynamic JavaScript Components
- Dropdowns
- Accordions & Collapse
- Carousel
- Toast Notification
- Spinners
- Modals
- Popovers & Tooltips
- Dark mode Toggle
Mini-Project Challenges
- Intro & Mini-Project Starter
- Pricing Cards
- Ratings Component
- User List
Custom Sass Workflow & Starter Template
- What is Sass?
- Install & Setup Sass
- Install, Setup & Customize Bootstrap
- Install & Setup Font Awesome
Website 1 - eBook Website
- Project Intro
- Project Setup
- Navigation & Sass Variables
- Header/Hero Section
- Icon Section
- Navbar Scroll Effect
- Details Sections With Modals
- Testimonials, Download Section & Footer
- Contact Page
- Deploy To Vercel
- Formspree For Contact Forms
Website 2 - Corso Training Website
- Project Intro
- Project Setup
- Nav & Header
- Image Carousel
- Register Area, Nav Scroll & Details
- Points & Summary Sections
- Invitation & Takeaways
- Subscribe & Footer
Website 3 - Portfolio Website
- Project Intro
- Project Setup
- Header With Overlay
- Typing Effect JavaScript
- About & Skills Sections
- Projects & Lightbox
- StyleShout & Services
- Stats & Forms
- Deploy To Netlify
Website 4 - Yavin Office Design
- Project Intro
- Project Setup
- Navigation & Header
- Stats & JavaScript Increment
- Intro, Details & Services
- 3 Middle Sections
- Projects & Testimonials
- Contact Form & Footer
- Back To Top Button
- Inner Article Page
Website 5 - Vera Software Solutions
- Project Intro
- Project Setup
- Header & Rotating Text Script
- Partners & Form
- Nav Scroll & Solutions
- Details & Expertise
- Video Section & Animated Button
- Video Modal
- Pricing & Project Sections
- Project Modals
- Newsletter Section & Footer
- Privacy Page