Practical Modern Web Projects Using Bootstrap 5

Build Modern websites with Bootstrap 5 framework - Online Course site, Travel Blog, Real estate site, Portfolio site

What you'll learn

Understand how to create responsive layouts with Bootstrap 5

Use Bootstrap 5 to create responsive carousels

Apply Bootstrap 5 to build responsive elements like images, texts

Create navigation with offcanvas menu

Experimenting with row-cols-* and col-* layout

Create pagination, breadcrumbs, sticky content, fixed navigation, accordion

Requirements

You should already be familiar with Bootstrap 5

You should already know how to code in HTML and CSS

You will need to have a text editor to code along with me - e.g. Visual Studio (which I will be using), Sublime Text, Notepad++, Brackets

Description

Welcome to "Practical Modern Web Projects Using Bootstrap 5" — your ultimate, hands-on guide to building real-world websites with the power of the world’s most popular front-end framework. Enroll Today and Build Your Web Portfolio with Bootstrap 5.3!The best way to learn web development is by building real things — and that’s exactly what this course is all about. Bootstrap 5 gives you the superpowers, and this course shows you how to use them wisely.Take the first step toward becoming a confident front-end web developer. Enroll now and start building amazing websites today!This course will take you on a creative journey through practical web projects — step by step. You’ll gain not just technical skills, but also design intuition, layout mastery, and real-world experience.This course is all about learning by doing. You won't just sit through lectures — you'll build. From landing pages to real estate pages, you’ll get your hands dirty writing HTML, CSS, and Bootstrap 5 classes in real time.You will learn how to use the CSS Media Query to make your web design mobile friendly and responsive. This means mobile-first approach.You will learn how to import font awesome in order to incorporate it in your designYou will learn how to import Google fonts as part of your font familyYou will learn how the cascading rule worksYou will learn how to customize Bootstrap classesHere is a list of the projects you will be creating:1. Responsive Business Landing Page with responsive Off-canvas MenuA full-width, landing page with a call-to-action button, unique carousel, Google map.2. Personal Portfolio WebsiteA modern developer/designer portfolio CV with project galleries,  skill bars, contact forms, and testimonials.3. Stock Photos ProjectCreate a Stock Photos Project featuring a sleek layout, mobile navigation, icons, and responsive image grids.4. Real Estate Listing GridA listing layout with property cards, filters, and a responsive grid view. This is a three page website project5. Online Course ProjectA responsive course page with home page. This project envelopes the dexterity of CSS and Bootstrap 5. Sticky content, responsive carousel, stretched-links, breadcrumbs, etc. This is a two page website project6. Travel Blog Page LayoutA blog-style layout with card-based blog posts, side content, categories, social share buttons, and pagination. This is a four page web projectBy the end of this course, you will have a diverse portfolio showcasing your web projects, demonstrating your ability to create modern websites with modern UI. Join us in Practical Modern Web Projects Using Bootstrap 5 and unlock your potential as a web designer! This course will not only enhance your coding skills but also empower you to bring your creative ideas to life through  Bootstrap 5.

Overview

Section 1: Introduction

Lecture 1 Introduction

Section 2: Creating the Bootstrap template

Lecture 2 Where to get free media if you need it

Lecture 3 Downloading Bootstrap folder and creating our project folder

Lecture 4 Linking Bootstrap and Creating our Bootstrap template for all our projects

Lecture 5 Accessing the bootstrap CSS file

Section 3: Stock Photos Project

Lecture 6 Basic Structure of the project and navbar

Lecture 7 Worknig on the navbar-toggler

Lecture 8 Working on the list links and button links on the navbar

Lecture 9 Styling and customizing the navbar

Lecture 10 Navbar responsiveness

Lecture 11 Basic structure of Hero Section

Lecture 12 Styling the Hero Section

Lecture 13 Responsiveness of the Hero section

Lecture 14 Structure of the popular tags

Lecture 15 Styling the tags

Lecture 16 Structure of the footer

Lecture 17 Styling the footer

Lecture 18 Structure of the masonry grid

Lecture 19 Styling the masonry grid - part 1

Lecture 20 Styling the masonry grid - part 2

Lecture 21 load button

Section 4: Portfolio CV Project

Lecture 22 Basic linking of external resources

Lecture 23 Google font and Structure of the navbar toggler

Lecture 24 navbar-collapse

Lecture 25 Basic styling and navbar customizing

Lecture 26 responsiveness of navbar

Lecture 27 Hero Section

Lecture 28 Hero section styling

Lecture 29 responsiveness of Hero section

Lecture 30 About me section

Lecture 31 About me styling

Lecture 32 My portfolio section

Lecture 33 Styling My portfolio section

Lecture 34 My Skills - Progress section

Lecture 35 My Skills - Skillset section

Lecture 36 Styling the My Skills

Lecture 37 My Experience section

Lecture 38 Styling My Experience section

Lecture 39 Education section - part 1

Lecture 40 Education section - part 2

Lecture 41 Contact details

Lecture 42 Contact form

Lecture 43 Styling the contact

Lecture 44 Footer

Section 5: Travel Blog Project

Lecture 45 Structure of the general site

Lecture 46 Making the back to top responsive and Finishing up the general site

Lecture 47 Creating the navbar structure

Lecture 48 Creating the navbar collapse

Lecture 49 Responsiveness of the navbar

Lecture 50 Structure of the footer - part 1

Lecture 51 Structure of the footer - part 2

Lecture 52 Bottom of the footer and responsiveness

Lecture 53 Placing the navbar and footer in all other pages

Lecture 54 Home Page - Structure of the hero section

Lecture 55 Styling the hero section

Lecture 56 About section

Lecture 57 Structure of destination cards

Lecture 58 Styling of destination cards

Lecture 59 Structure of Team

Lecture 60 Styling of Team

Lecture 61 Structure of the gallery

Lecture 62 Styling of the gallery

Lecture 63 Get in touch section

Lecture 64 Header of the travel page and blog page

Lecture 65 Travel Page - Destination Guide background

Lecture 66 info-box Overview aside

Lecture 67 Top Attractions

Lecture 68 Food & Drink

Lecture 69 Where to Stay

Lecture 70 Best Time to Visit

Lecture 71 Getting There

Lecture 72 Practical Info

Lecture 73 Photo Gallery

Lecture 74 Blog Page - post structure - part 1

Lecture 75 post structure - part 2

Lecture 76 Pagination

Lecture 77 Featured post

Lecture 78 Styling the featured post

Lecture 79 Categories at the side

Lecture 80 Popular Posts

Lecture 81 About PamchBlog

Lecture 82 Subscribe to Newsletter

Lecture 83 Post Blog Page - Structure of the post page and aside contents

Lecture 84 Blog header breadcrumb

Lecture 85 Blog header badge and author

Lecture 86 Finishing the blog header

Lecture 87 Table of content

Lecture 88 blog-content write up

Lecture 89 Tags and Share

Lecture 90 Author box

Section 6: Business Web Project

Lecture 91 Structuring the offcanvas navbar

Lecture 92 Navbar toggle and offcanvas

Lecture 93 dropdown menu

Lecture 94 Inserting the SVG icons

Lecture 95 Styling the Navigation

Lecture 96 Footer

Lecture 97 Responsiveness of the navbar and footer

Lecture 98 Carousels structure and the text carousel

Lecture 99 Image carousel

Lecture 100 Carousel prev and next button and responsiveness

Lecture 101 Our brand section

Lecture 102 CEO section

Lecture 103 Structure of our teams section

Lecture 104 Finishing up our teams section

Lecture 105 Structure of visit us section and the map

Lecture 106 The Form

Lecture 107 Finishing up the responsiveness

Lecture 108 Adding some finishing touches

Section 7: Real Estate Listing Project

Lecture 109 Structuring and linking the necessary files

Lecture 110 Structuring the Navbar in home page

Lecture 111 Replicating the navbar in the other pages

Lecture 112 Styling and customizing the navbar

Lecture 113 Responsiveness of navbar

Lecture 114 Structuring the footer

Lecture 115 Styling the footer

Lecture 116 Responsiveness of footer

Lecture 117 Home page - Hero section

Lecture 118 Styling the hero section

Lecture 119 Contact page - Hero section

Lecture 120 Structure of featured properties

Lecture 121 Adding icons, duplicating the properties and adding similar properties to de

Lecture 122 Styling the featured properties

Lecture 123 Fixing the background image and responsive styling of featured properties

Lecture 124 Structure of our agents section

Lecture 125 Styling our agents section

Lecture 126 Testimonials section

Lecture 127 Contact page - Call to action

Lecture 128 Creating the contact details

Lecture 129 Creating the contact form

Lecture 130 Property Details Page - Property header

Lecture 131 property gallery - agent

Lecture 132 Structure of the carousel and the carousel buttons

Lecture 133 Creating the carousel inner and indicators

Lecture 134 Customizing the carousel

Lecture 135 Responsiveness of the property gallery

Lecture 136 About property section - part 1

Lecture 137 About property section - part 2

Lecture 138 Schedule a Tour form

Lecture 139 Structuring the features and amenities

Lecture 140 Styling the features and amenities

Lecture 141 Map and neighborhood

Lecture 142 Responsive Map and neighborhood

Section 8: Online Course Platform Project

Lecture 143 Introduction to the structure

Lecture 144 Choosing the Google font and laying the navbar

Lecture 145 Shopping cart dropdown from below large screen

Lecture 146 navbar-brand

Lecture 147 navbar-toggler and explore dropdown menu

Lecture 148 Finishing up dropdown menu and creating the search box

Lecture 149 Two other dropdown menu

Lecture 150 The cart icon, sign up and log in buttons

Lecture 151 Responsiveness of navbar

Lecture 152 Structure of the footer

Lecture 153 Styling the footer

Lecture 154 Responsiveness of footer

Lecture 155 Duplicating the nav and footer into the home page

Lecture 156 Understanding the structure of the course page (IMPORTANT!!!)

Lecture 157 Course hero breadcrumb and text title and headline

Lecture 158 Course stats with ratings

Lecture 159 Instructor profile, date and subtitle

Lecture 160 Responsiveness of the course hero content

Lecture 161 course-card and background play icon

Lecture 162 card-body with the price and buttons

Lecture 163 Includes-item

Lecture 164 Responsiveness of the whole course-card

Lecture 165 Understanding how to create the sticky course-card

Lecture 166 What you will learn

Lecture 167 What you will learn - responsiveness

Lecture 168 Content header

Lecture 169 accordion - part 1

Lecture 170 accordion - part 2

Lecture 171 Responsiveness of accordion

Lecture 172 Finishing up the accordion

Lecture 173 Frequently Bought Together - part 1

Lecture 174 Frequently Bought Together - part 2

Lecture 175 Frequently Bought Together - part 3

Lecture 176 Frequently Bought Together - responsiveness

Lecture 177 Instructor

Lecture 178 Finishing up the instructor profile

Lecture 179 Student Reviews - part 1

Lecture 180 Student Reviews - part 2

Lecture 181 Student Reviews - part 3

Lecture 182 Student Reviews - part 4

Lecture 183 More courses section - part 1

Lecture 184 More courses section - part 2

Lecture 185 Home page === Recommended courses

Lecture 186 Tooltip content structure

Lecture 187 Tooltip content styling

Lecture 188 check-list styling

Lecture 189 tooltip arrow and last tooltip

Lecture 190 tooltip arrow responsiveness

Lecture 191 Adjusting the tooltip content for a better user experience

Lecture 192 Structure of the carousel section

Lecture 193 carousel-inner and carousel-overlay

Lecture 194 Styling the carousel-inner

Lecture 195 Carousel responsiveness

Lecture 196 Career - part 1

Lecture 197 Career - part 2

Lecture 198 Top Categories - part 1

Lecture 199 Top Categories - part 2

Lecture 200 Pamchdemy for Business

Lecture 201 Trending Courses

Lecture 202 Popular Topics To Explore

Lecture 203 Become an instructor

Lecture 204 Why People Choose Us

From landing pages to real estate pages, you’ll get your hands dirty writing HTML, CSS, and Bootstrap classes in real time.,A Bootstrap 5 and CSS enthusiast,Freelancers who want to expand their portfolio with dynamic projects.