Explore Bootstrap 5 basics and advanced concepts while creating five real-world projects. Gain insights into building stunning, responsive websites and enhance your front-end development skills.

Learn Bootstrap 5 From Scratch With Projects.png

Bootstrap is an open-source CSS framework that allows developers to create responsive websites efficiently. Mastering Bootstrap 5 can enhance your skills and give you an advantage in the job market.

This course covers Bootstrap 5 basics, like the grid system, typography, and responsive design, and advanced topics, such as layouts, utilities, components, and custom CSS. You'll also learn to use Bootstrap's built-in JavaScript plug-ins and create five real-world projects, including a registration form, a profile card, a health tracker website, a movie streaming website, and a portfolio website. You'll be able to build stunning and responsive websites quickly and effortlessly using Bootstrap 5.

By completing this course, you'll have the knowledge and skills to create responsive and visually appealing websites with Bootstrap 5 and add five real-world projects to your portfolio. This knowledge will help you become a proficient front-end developer and advance your web development career.

Modern Web Design Using Bootstrap 5 with Hands-On Projects

<!doctype html>
<html lang="en">

<head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Health Tracker</title>
</head>

<body>

    <div class="container pt-5">
        <h2 class="text-center">Health Tracker</h2>
        <h5 class="text-secondary text-center pb-3">Track your health and fitness</h5>
        <div class="row">
            <div class="col-6 pt-5">
                
                <label>Mon</label>
                <div class="progress mb-2">
                    <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25"
                        aria-valuemin="0" aria-valuemax="100" id="Monday"></div>
                </div>
                <label>Tue</label>
                <div class="progress mb-2">
                    <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="25"
                        aria-valuemin="0" aria-valuemax="100" id="Tuesday"></div>
                </div>
                <label>Wed</label>
                <div class="progress mb-2">
                    <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="25"
                        aria-valuemin="0" aria-valuemax="100" id="Wednesday"></div>
                </div>
                <label>Thurs</label>
                <div class="progress mb-2">
                    <div class="progress-bar bg-danger" role="progressbar" style="width: 85%" aria-valuenow="25"
                        aria-valuemin="0" aria-valuemax="100" id="Thursday"></div>
                </div>
                <label>Fri</label>
                <div class="progress mb-2">
                    <div class="progress-bar bg-success" role="progressbar" style="width: 80%" aria-valuenow="25"
                        aria-valuemin="0" aria-valuemax="100" id="Friday"></div>
                </div>
                <label>Sat</label>
                <div class="progress mb-2">
                    <div class="progress-bar bg-primary" role="progressbar" style="width: 95%" aria-valuenow="25"
                        aria-valuemin="0" aria-valuemax="100" id="Saturday"></div>
                </div>
                <label>Sun</label>
                <div class="progress mb-2">
                    <div class="progress-bar bg-dark" role="progressbar" style="width: 75%" aria-valuenow="25"
                        aria-valuemin="0" aria-valuemax="100" id="Sunday"></div>
                </div>
            </div>

            
            <div class="col-6 text-center px-5">
                <h4 class="mb-3">Daily Tasks </h4>
                <div class="text-start ">

                    <div class="bg-secondary bg-opacity-25 p-3 mb-3">
                        <input type="checkbox" name="tasks" checked>
                        <span class="ps-3"> 20 pushups </span>
                    </div>
                    <div class="bg-secondary bg-opacity-25 p-3 mb-3">
                        <input type="checkbox" name="tasks">
                        <span class="ps-3">5 km walk</span>
                    </div>
                    <div class="bg-secondary bg-opacity-25 p-3 mb-3">
                        <input type="checkbox" name="tasks">
                        <span class="ps-3">20 situps</span>
                    </div>
                    <div class="bg-secondary bg-opacity-25 p-3 mb-3">
                        <input type="checkbox" name="tasks">
                        <span class="ps-3">20 squats</span>
                    </div>
                </div>
            </div>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
            crossorigin="anonymous"></script>
        <script src="index.js"></script>
</body>

</html>

const checkboxes = document.querySelectorAll('input[type="checkbox"]');
const progressMonday = document.getElementById('Monday');
const progressTuesday = document.getElementById('Tuesday');
const progressWednesday = document.getElementById('Wednesday');
const progressThursday = document.getElementById('Thursday');
const progressFriday = document.getElementById('Friday');
const progressSaturday = document.getElementById('Saturday');
const progressSunday = document.getElementById('Sunday');

// count the number of checkboxes that are checked

const weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

const d = new Date();
let day = weekday[d.getDay()];

const len = checkboxes.length;

if (day == 'Monday')
    progressMonday.style.width = 0 + '%';
if (day == 'Tuesday')
    progressTuesday.style.width = 0 + '%';
if (day == 'Wednesday')
    progressWednesday.style.width = 0 + '%';
if (day == 'Thursday')
    progressThursday.style.width = 0 + '%';
if (day == 'Friday')
    progressFriday.style.width = 0 + '%';
if (day == 'Saturday')
    progressSaturday.style.width = 0 + '%';
if (day == 'Sunday')
    progressSunday.style.width = 0 + '%';

const countChecked = () => {
    let num = 0;

    checkboxes.forEach(checkbox => {
        if (checkbox.checked == true)
            num++;
    })

    let per = (num / len) * 100;
    if (day == 'Monday')
        progressMonday.style.width = per + '%';
    if (day == 'Tuesday')
        progressTuesday.style.width = per + '%';
    if (day == 'Wednesday')
        progressWednesday.style.width = per + '%';
    if (day == 'Thursday')
        progressThursday.style.width = per + '%';
    if (day == 'Friday')
        progressFriday.style.width = per + '%';
    if (day == 'Saturday')
        progressSaturday.style.width = per + '%';
    if (day == 'Sunday')
        progressSunday.style.width = per + '%';
}

countChecked()
checkboxes.forEach(checkbox => checkbox.addEventListener('click', countChecked));



codemirror

Learn how to make the health tracker website responsive.

Introduction to Bootstrap

Layouts in Bootstrap 5

Utilities

Content

Forms

Components

Customization & Icons

Building a Registration Form

Building a Profile Card

Building a Health Tracker Website

Building a Movie Streaming Website

Building a Portfolio Website

Conclusion

Responsive Health Tracker Website

Layout