Master HTML5 CSS3 Bootstrap5 by building Responsive Website

Develop responsive websites with HTML CSS3 and Bootstrap5

Language: english

Note: 4.0/5 (85 notes) 16,005 students

Instructor(s): Ramesh Pandey

Last update: 2022-03-16

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

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

Course content

Introduction & Installation
- Installing VS Code and Server extension
- What is meant by Responsiveness
- Example Non Responsive website
- Creating HTML Skeleton for non-responsive website
- Styling the non responsive page
Media Queries & Device Breakpoints
- Different Device break points
- Make Responsive in device upto 768px
- Make Responsive for device width upto 468px
- Make Responsive for device width above 1024px
- Making Responsive between 769px and 1023px
Website Development with Bootstrap5
- Adding Bootstrap Font Awesome Google Fonts
- Skeleton for different sections
- Adding navbar section
- Adding Carousel Section
- Giving custom height to carousel image
- Adding Latest Listings section
- Making Latest Listings Responsive
- Working on View All Listings Banner
- Applying FontAwesome Icon
- Contact form layout
- Contact form customization
- Converting button to full width
- Setting up the footer layout
- Designing Footer 3 Sections
- Working on Footer Quick Links Section
- Designing the newsletter section of footer
- Designing Contact Details section of footer
- Working on Copyright section
- Changing background Color of Navbar