Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Master HTML5 CSS3 Bootstrap5 by building Responsive Website

Name: Master HTML5 CSS3 Bootstrap5 by building Responsive Website
Rating: 4.2 (174 reviews)

Develop responsive websites with HTML CSS3 and Bootstrap5

Created byRamesh Pandey

Last updated 3/2022

English

What you'll learn

You will learn to develop website using HTML CSS3 & Bootstrap5
You will learn about Responsive web design and development
You will learn the concepts of Media Queries and how to use them
You will learn to use HTML and CSS3
You will learn to use Visual Studio Code editor and related extension

Course content

3 sections • 29 lectures • 1h 41m total length

Installing VS Code and Server extension1:41
What is meant by Responsiveness1:36
Example Non Responsive website2:51
Creating HTML Skeleton for non-responsive website3:07
Styling the non responsive page7:03

Different Device break points1:48
Make Responsive in device upto 768px5:05
Make Responsive for device width upto 468px3:02
Make Responsive for device width above 1024px2:28
Learn to target laptops and desktops using a min-width of 1024px in CSS media queries, applying color, background, and multiple properties to create responsive styles.
Making Responsive between 769px and 1023px3:03
Apply responsive design using media queries between 769px and 1023px, adjust text-transform and body background color, and override properties to tailor styles for specific devices.

Adding Bootstrap Font Awesome Google Fonts4:56
Create a new project folder in Visual Studio Code and start live server. Add Bootstrap, Font Awesome, and Google Fonts (Poppins) to build a responsive page with icons and typography.
Skeleton for different sections3:30
Adding navbar section0:53
Create a responsive navbar using Bootstrap, copy and customize the nav markup, disable a link, and refine the navigation section for a clean header.
Adding Carousel Section2:14
Giving custom height to carousel image1:15
Target the carousel images with a global selector and set a fixed height, trying 300px then 350px to achieve consistent controls and visuals across the slides.
Adding Latest Listings section5:18
Making Latest Listings Responsive1:43
Discover how to make latest listings responsive by adjusting card widths, removing fixed widths, and adding bottom spacing to cards to create clean gaps in mobile and vertical views.
Working on View All Listings Banner11:01
Applying FontAwesome Icon5:20
Contact form layout4:57
Learn to build a responsive contact form layout with Bootstrap, centering the form and adjusting width via media queries up to 768px for mobile-friendly design.
Contact form customization4:31
Style a centered contact form by applying padding, margins, configuring labels and inputs, adding a textarea with rows and columns, and turning the submit button into a full-width flat control.
Converting button to full width0:39
wrap the button inside the deal and ensure it occupies the full width, adding a bottom margin for spacing.
Setting up the footer layout3:34
Advance the footer layout using bootstrap's container-fluid, set a blue primary background, and establish a three-section grid with a newsletter signup and contact details, and set a minimum height.
Designing Footer 3 Sections2:59
Design a responsive footer with three columns on medium to large screens and a single column on small devices, featuring quick links, a newsletter, and contact details.
Working on Footer Quick Links Section3:43
Arrange the footer quick links to stack vertically by applying a flex column on desktop, style with text-white, and tune margins and padding for a clean layout.
Designing the newsletter section of footer4:27
Designing Contact Details section of footer3:46
Working on Copyright section1:55
Changing background Color of Navbar3:33
Learn to customize a Bootstrap 5 navbar by changing its background to dark, applying gradients to header and footer, and adjusting margins and padding for responsive mobile layouts.

Requirements

Laptop with Internet connection

Description

In this course, you will learn to develop responsive websites using HTML, CSS3, Mediaqueries and Bootstrap5.

We will be also setting up IDE with required extensions to make our development experience smooth.

We will learn all the concepts with the help of code examples.

Following are the topics we will cover:

1.1-What is meant by Responsiveness

1.2-Example Non_responsive website

1.3-Creating HTML Skeleton for non-responsive website

1.4-Styling the non responsive page

2.1-Different Device break points

2.2-Make Responsive in device upto 768px

2.3-Make Responsive for device width upto 468px

2.4-Make Responsive for device width above 1024px

2.5-Making Responsive between 769px and 1023px

We will then learn about Bootstrap5, Font awesome, Google fonts in which we will be using following:

1. Navigation navbar

2. Buttons and nav links

3. Carousel and slides

4. Margin , Padding, Fontsize

5. Container & Container fluid

6. Column and Grid system

7. Form and Form controls

8. Fontawesome icons

9. Google fonts poppins

10. Block button

11. Bootstrap cards

We will develop website using all concepts of HTML CSS3 and Bootstrap5 and we will develop website with different sections like navigation section, slider section, listing section, call to action section, contact us section, footer section, copyright section.

After this course you will be able to develop any website of your own and use it for your own purpose.

Who this course is for:

Anyone who wants to learn and develop responsive websites using HTML, CSS3 and Bootstrap5

Master HTML5 CSS3 Bootstrap5 by building Responsive Website

What you'll learn

Explore related topics

Course content

Introduction & Installation5 lectures • 16min

Media Queries & Device Breakpoints5 lectures • 15min

Website Development with Bootstrap519 lectures • 1hr 10min

Requirements

Description

Who this course is for: