• Post category:StudyBullet-7
  • Reading time:5 mins read


Develop responsive websites with HTML CSS3 and Bootstrap5

What you will 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

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:


Get Instant Notification of New Courses on our Telegram channel.


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.

English
language

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