Bootstrap 5 From Scratch - Build 5 Modern Websites

Packt via Coursera

Go to class Write review

Details

Go to class

Provider

Coursera
Pricing

Paid Course
Languages

English
Certificate

Paid Certificate Available
Duration & workload

17 hours 27 minutes
Sessions

On-Demand
Subtitles

English

Found in

Overview

Coursera Flash Sale

40% Off Coursera Plus for 3 Months!

Grab it

Updated in May 2025. This course now features Coursera Coach! A smarter way to learn with interactive, real-time conversations that help you test your knowledge, challenge assumptions, and deepen your understanding as you progress through the course. Master Bootstrap 5 by building five modern, fully responsive websites from scratch. This hands-on course takes you from the fundamentals of Bootstrap, including its grid system, typography, and UI components, to advanced features like dynamic JavaScript elements, Sass customization, and deployment strategies. By the end, you'll have a deep understanding of Bootstrap and practical experience in crafting real-world websites. You'll begin with an introduction to Bootstrap and its essential components, learning how to structure layouts, apply styling, and utilize Bootstrap’s powerful utilities. Next, you’ll dive into interactive JavaScript-driven features such as carousels, modals, tooltips, and dark mode toggles. As you progress, you'll refine your front-end development skills with mini-project challenges that reinforce core concepts. The heart of this course is the creation of five diverse websites, including an eBook store, a training platform, a personal portfolio, an office design firm site, and a software solutions company page. Each project will help you master different aspects of Bootstrap, from navigation bars to form validation, animations, and responsive design techniques. You'll also learn how to deploy your sites using modern hosting platforms. Perfect for beginners and intermediate web developers, this course requires basic HTML and CSS knowledge. If you're looking to level up your front-end development skills with Bootstrap 5, this is the course for you.

Syllabus

Getting Started

In this module, we will establish a strong foundation for learning Bootstrap by understanding its purpose, features, and real-world applications. We will explore the structure of the course, the projects we will build, and how to set up our development environment efficiently. By the end of this section, we will be ready to dive into Bootstrap and start crafting responsive web interfaces.

Bootstrap Fundamentals - Part 1

In this module, we will dive into the essential building blocks of Bootstrap, from containers and typography to spacing, colors, and responsive design techniques. We will explore how to structure content, style text, manage layout positioning, and create interactive elements like buttons and navigation bars. By the end of this section, we will have a strong grasp of Bootstrap's fundamental utilities to craft well-designed, responsive web pages.

Bootstrap Fundamentals - Part 2

In this module, we will expand our knowledge of Bootstrap by exploring its grid system, Flexbox utilities, and essential UI components. We will learn to structure content using cards, tables, and list groups, design user-friendly forms with validation, and incorporate interactive elements like alerts, progress bars, and pagination. By the end of this section, we will have a solid grasp of Bootstrap’s advanced styling and layout capabilities.

Dynamic JavaScript Components

In this module, we will explore Bootstrap’s dynamic JavaScript components that bring interactivity and functionality to our web pages. We will learn to create dropdowns, accordions, and carousels, as well as integrate toast notifications, modals, and spinners for a seamless user experience. Additionally, we will implement popovers, tooltips, and a dark mode toggle to enhance usability and accessibility. By the end of this section, we will be equipped to build highly interactive and user-friendly web interfaces.

Mini-Project Challenges

In this module, we will put our Bootstrap skills to the test by working on engaging mini-projects. We will start with an introduction to the challenges ahead and then dive into creating practical UI components like pricing cards, rating systems, and user lists. These hands-on exercises will strengthen our understanding of Bootstrap while preparing us to build functional and visually polished web elements for real-world applications.

Custom Sass Workflow & Starter Template

In this module, we will dive into Sass, a powerful CSS preprocessor that simplifies and enhances web styling. We will learn how to install and set up Sass, customize Bootstrap using Sass variables, and integrate Font Awesome for rich iconography. By the end of this section, we will have a solid foundation for creating scalable, maintainable, and visually appealing web projects.

Website 1 - eBook Website

In this module, we will build a professional eBook website from scratch, applying our Bootstrap and Sass knowledge to create a visually appealing and user-friendly design. We will craft key sections such as the navigation bar, hero section, testimonials, and download areas, while also incorporating interactive elements like modals and a scrolling navbar effect. Finally, we will deploy the website to Vercel and set up Formspree for efficient contact form handling. By the end of this section, we will have a fully functional and polished eBook website ready for real-world use.

Website 2 - Corso Training Website

In this module, we will develop the Corso Training Website, a professional and engaging platform for showcasing training courses. We will create essential components, including a navigation bar, image carousel, registration area, and detailed course sections. Additionally, we will enhance interactivity with scrolling effects, invitation callouts, and a well-structured footer. By the end of this section, we will have a polished, user-friendly training website ready for deployment.

Website 3 - Portfolio Website

In this module, we will build a sleek and professional portfolio website to showcase work, skills, and services. We will design a captivating header with overlay effects, integrate a dynamic typing animation, and create an engaging portfolio gallery with a lightbox feature. Additionally, we will implement user-friendly forms and statistics to enhance engagement. By the end of this section, we will deploy the portfolio to Netlify, making it accessible to potential clients and employers.

Website 4 - Yavin Office Design

In this module, we will create the Yavin Office Design website, a modern and elegant platform to showcase office design projects and services. We will build key sections, including a dynamic statistics counter, project portfolio, testimonials, and an intuitive navigation system. Additionally, we will enhance the user experience with a back-to-top button and a dedicated inner article page for sharing insights. By the end of this section, we will have a polished, functional website that effectively represents Yavin Office Design’s expertise.

Website 5 - Vera Software Solutions

In this module, we will build the Vera Software Solutions website, a dynamic platform showcasing software services, expertise, and client projects. We will implement key features such as an interactive header with rotating text, video and project modals, smooth navigation scroll effects, and an engaging pricing section. Additionally, we will enhance user interaction with a newsletter subscription, a structured footer, and a dedicated privacy policy page. By the end of this section, we will have a polished, functional website ready for professional use.