Scribd
Upload
127 views

Task

Uploaded by

Stanley Muteranduwa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
127 views

Task

Uploaded by

Stanley Muteranduwa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 62

HTML Web Page Examples

with Source Code


In this article, we are going to see some HTML web page examples
with source code. We will also see some of the key points to learn
how to create these web pages.

HTML Web Page Example 1


This is an example of a simple HTML web page that shows the profile
of a professional camel.

Here is how the camel profile is designed in HTML:

1. Container - The complete HTML web page is wrapped in a


container. The container is a div element with the
class container.
2. Header - Inside the container, we have a header element that
contains the logo and the navigation menu.
3. Aside - Aside contains the profile picture and other navigational
links.
4. Main - The main element contains the profile information. Like
the name, the career, the skills, the contact form, etc.
5. Footer - The footer contains copyright information.
Here is the complete code of the camel profile:
Example 1
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Mr. Camel</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css
/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?
family=Pacifico&display=swap');

body {
margin: 0;
box-sizing: border-box;
}

.container {
line-height: 150%;
}

.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
background-color: #e9e9e9;
}

.header h1 {
color: #222222;
font-size: 30px;
font-family: 'Pacifico', cursive;
}

.header .social a {
padding: 0 5px;
color: #222222;
}

.left {
float: left;
width: 180px;
margin: 0;
padding: 1em;
}

.content {
margin-left: 190px;
border-left: 1px solid #d4d4d4;
padding: 1em;
overflow: hidden;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
font-family: sans-serif;
}

li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

li a.active {
background-color: #84e4e2;
color: white;
}

li a:hover:not(.active) {
background-color: #29292a;
color: white;
}

table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
margin: 30px 0;
}

td,
th {
border: 1px solid #dddddd;
padding: 8px;
}

tr:nth-child(1) {
background-color: #84e4e2;
color: white;
}

tr td i.fas {
display: block;
font-size: 35px;
text-align: center;
}

.footer {
padding: 55px 20px;
background-color: #2e3550;
color: white;
text-align: center;
}
</style>
</head>

<body>
<div class="container">
<header class="header">
<h1>Mr. Camel</h1>
<div class="social">
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
</div>
</header>
<aside class="left">
<img src="./assets/html/mr-camel.jpg" width="160px" />
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#career">Career</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<br><br>
<p>"Do something important in life. I convert green grass to
code."<br>- Mr Camel</p>
</aside>
<main class="content">
<h2>About Me</h2>
<p>I don't look like some handsome horse, but I am a real
desert king. I can survive days without water.</p>
<h2>My Career</h2>
<p>I work as a web developer for a company that makes websites
for camel businesses.</p>
<hr><br>
<h2>How Can I Help You?</h2>
<table>
<tr>
<th>SKILL 1</th>
<th>SKILL 2</th>
<th>SKILL 3</th>
</tr>
<tr>
<td><i class="fas fa-broom"></i></td>
<td><i class="fas fa-archive"></i></td>
<td><i class="fas fa-trailer"></i></td>
</tr>
<tr>
<td>Cleaning kaktus in your backyard</td>
<td>Storing some fat for you</td>
<td>Taking you through the desert</td>
</tr>
<tr>
</table>
<form>
<label>Email: <input type="text" name="email"></label><br>
<label> Mobile: <input type="text" name="mobile">
</label><br>
<textarea name="comments" rows="4">Enter your
message</textarea><br>
<input type="submit" value="Submit" /><br>
</form>
</main>
<footer class="footer">&copy; Copyright Mr. Camel</footer>
</div>
</body>

</html>
HTML

▶ Try it

Here is the result of the code above:

Stay Ahead, Learn More

 Sample HTML code for homepage


 How to use CSS in HTML
 HTML code for registration form with validation

HTML Home Page Example 2


This is the second example of an HTML web page. This is a simple
error 404 page which is shown when the user tries to access a page
that does not exist.

This is a very simple webpage that shows the error 404 page on the
screen and gives a link to return to the homepage.

To design an error 404 page you need to use the following steps:
1. Create a div element that covers the whole page set height: 100vh.
2. Give it a background image that suits the 404 error.
3. Style your basic text and link elements with CSS.

Example 2
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Error 404 page</title>
<style>
body {
margin: 0;
box-sizing: border-box;
}

.container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: linear-gradient(to right, rgba(0, 0, 0, .5),
rgba(0, 0, 0, .1)), url('https://images.unsplash.com/photo-
1595624871930-6e8537998592?ixlib=rb-
1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&
fit=crop&w=871&q=80');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

h1 {
font-size: 10rem;
color: #fff;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 1rem;
}

h2 {
font-size: 2rem;
color: #fff;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 1rem;
}

p {
font-size: 1.5rem;
color: #fff;
font-weight: 700;
margin-bottom: 1rem;
}

a {
padding: 15px 20px;
background: #52caee;
font-size: 1rem;
text-decoration: none;
color: #333333;
border-radius: .25rem;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.808)
}
</style>
</head>

<body>
<div class="container">
<h1>404</h1>
<h2>Page not found</h2>
<p>The page you are looking for does not exist.</p>
<p><a href="#">Visit Homepage</a></p>
</div>
</body>

</html>
HTML

▶ Try it

Here is the result of the code in example 2.

HTML Home Page Example 3


This is the third example of an HTML web page. This is a simple
newsletter signup page.

Here is the list of steps to create a newsletter signup page:


1. First, we need to create the HTML structure of the page. We will use
the <main> tag to wrap the content of the page. Then, we will create two
sections: one for the intro and one for the sign-up form.
2. Next, we will style the page using CSS. We will use the display:
flex property to align the content of the page. We will also use the min-
height property to make sure that the page is always fully visible.
3. Then, we will style the intro section.
4. Next, we will style the sign-up section.
5. Finally, we will style the form. Look at the complete code below to see how
we did it.

Example 3
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Sample HTML Code - NewsLetter Form</title>
<style>
@import url("https://fonts.googleapis.com/css2?
family=Poppins:wght@400;500;600;700&display=swap");

body {
display: flex;
justify-content: center;
padding: 3rem 0;
font-family: "Poppins", sans-serif;
font-size: 1rem;
color: white;
background-color: #ff7a7a;
}

main {
max-width: 350px;
display: flex;
flex-direction: column;
align-items: center;
}

.intro {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
width: 100%;
margin-bottom: 3rem;
}

.title {
padding: 1rem;
font-size: 1.75rem;
}

.sign-up {
width: 100%;
}

.sign-up-para {
padding: 1rem 5rem;
margin-bottom: 1.75rem;
border-radius: 0.8rem;
box-shadow: 0 8px 0px rgba(0 0 0/0.15);
background-color: #7138cc;
text-align: center;
}

.sign-up-form {
display: flex;
flex-direction: column;
align-items: center;
padding: 1.2rem;
border-radius: 0.8rem;
box-shadow: 0 8px 0px rgba(0 0 0/0.15);
color: #b9b6d3;
background-color: white;
}

.form-input {
width: 100%;
margin-bottom: 1em;
position: relative;
}

.form-input span {
position: absolute;
top: 10%;
right: 0;
padding: 0 0.65em;
border-radius: 50%;
background-color: #ff7a7a;
color: white;
display: none;
}
.form-input.warning span {
display: inline-block;
}

.form-input input {
width: calc(100% - 20px);
padding: 10px;
border: 2px solid rgba(185, 182, 211, 0.25);
border-radius: 0.5em;
font-weight: 600;
color: #3e3c49;
}

.form-input input:focus {
outline: none;
border: 2px solid #b9b6d3;
}

.form-input.warning input {
border: 2px solid #ff7a7a;
}

.form-input p {
margin: 0.2em 0.75em 0 0;
display: none;
font-size: 0.75rem;
text-align: right;
font-style: italic;
color: #ff7a7a;
}

.form-input.warning p {
display: block;
}

.submit-btn {
cursor: pointer;
width: 100%;
padding: 1em;
margin-bottom: 1em;
border: none;
border-bottom: 5px solid #31bf81;
border-radius: 0.5em;
background-color: #38cc8c;
color: white;
font-weight: 600;
text-transform: uppercase;
}
.submit-btn:hover {
background-color: #5dd5a1;
}

.form-term {
margin-bottom: 0.75em;
font-size: 0.8rem;
text-align: center;
}

.form-term span {
font-weight: 700;
color: #ff7a7a;
}

@media (min-width: 768px) {


body {
align-items: center;
min-height: 100vh;
}

main {
max-width: 100vw;
flex-direction: row;
justify-content: center;
}

.intro {
align-items: flex-start;
text-align: left;
width: 45%;
margin-right: 1rem;
}

.title {
padding: 0;
margin-bottom: 2rem;
font-size: 3rem;
line-height: 1.25em;
}

.sign-up {
width: 45%;
}

.sign-up-form {
padding: 1.75rem;
}
.sign-up-form input {
padding-left: 1.5em;
}
}
</style>
</head>

<body>
<main>
<!-- intro section -->
<section class="intro">
<h1 class="title">Black Friday Deals</h1>
<p>Get up to 50% off on all our products and services. Hurry
up, the offer ends in 24 hours.</p>
</section>

<!-- sign-up section -->


<section class="sign-up">
<p class="sign-up-para">Sign up for our newsletter and get 10%
off your first purchase</p>
<!-- the form itself -->
<form class="sign-up-form">
<div class="form-input">
<input type="text" name="first-name" id="first-name"
placeholder="First Name" required>
<span>!</span>
<p class="warning">First name cannot be empty</p>
</div>

<div class="form-input">
<input type="text" name="last-name" id="last-name"
placeholder="Last Name" required>
<span>!</span>
<p class="warning">Last name cannot be empty</p>
</div>

<div class="form-input">
<input type="email" name="email" id="email"
placeholder="Email Address" required>
<span>!</span>
<p class="warning">Looks like this is not an email</p>
</div>

<div class="form-input">
<input type="Password" name="Password" id="Password"
placeholder="Password" required>
<span>!</span>
<p class="warning">Password cannot be empty</p>
</div>

<input class="submit-btn" type="submit" value="Claim your


offer">
<p class="form-term">By clicking the button, you are
agreeing to our <span>Terms and Services</span> </p>
</form>
</section>
</main>
</body>

</html>
HTML

▶ Try it

Here is the result of the code in example 3.

Conclusion
This brief guide includes HTML web page examples with source code.
We have learned how to create a basic HTML web page with 2
different examples. We have also learned how to create a basic CSS
style sheet and how to use it on our HTML web page.
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

Introduction to Design Web Page in HTML


HyperText Markup Language (HTML) is one of the most popular languages to

design Web Pages and their content. HTML uses different tags, elements, images

and some latest components to make Web Pages more attractive and user-friendly.

With the help of some CSS, the look and feel of the web page can be easily

changed. It should be considered an important source in the World Wide Web to

structure the web page properly. It is possible by using simple text editors to edit

and save changes whenever they want.


Steps to Design Web Page in HTML
There are some basic steps considered to design web pages using HTML are as

follows:

1. Designing Layout: Before actually starting to design a web page, it is

necessary to prepare a rough overview for your web page. This helps the

user to put elements according to their need. Web pages should be divided

into 3 parts header, body and footer part.

2. Do code set up: Firstly, create one folder where you are going to store all

your web pages. Simply prepare the style.css file if we want to add external

code to our HTML web page and simple index.html page just for checking

whether the code is working properly or not.

3. Building elements: Start designing elements for building web page ,firstly

create <head> , <body><main><sections> and after putting all elements

lastly<footer>part. It should be collection of different tags like <p>,<b>,<i>

<h1>to <h6> heading tags, <title>,<sub>,<ol>, <ul> ,<a herf=””>,

<section> , <articles> <img>, <iframe> and elements like<table> , <nav>,

<button> ,<textarea> etc.

4. Some CSS code to your layout: To fix elements at some specific location,

it is necessary to set them using some CSS code and try to highlight your

important elements.

5. Customize your web page: This step helps us to improve the looks and feel

of our webpage. It includes things like adding a background image to the


website, adding some video content to engage the user with web pages,

adding links, comments, lists to your web page.

How to Design Web Page in HTML?


Designing web pages by using HTML is one of the simplest concepts. There are

some scenarios that define how to design a web page in HTML. They are as

follows:

 Editor: In this scenario, we are going to write some HTML code by using

the editor. There are various editors available nowadays like notepad++,

brackets, TextEdit, etc.

 HTML code: As per your web page layout and all things discussed in the

syntax, put HTML code here in all tag and element format.

 Save File: once you are done with the Html code, the next step is to save all

HTML code. Save this with a .html extension on the required location.

 Open a web page in the browser: In this step, we are going to open our

HTML page in the browser to check the output.

Examples to Design Web Page in HTML


Let’s we will create some web pages to see the actual resultant web page.

Example #1
Here we are creating a simple web page with some HTML elements and tags.

Setting one image as a background and some text on it to look like:


HTML Code:

<head>

<style>

.card {

max-width: 200px;

margin: auto;

text-align: center;}

#main{

background-image: url('Travel.jpg');

background-repeat: no-repeat;

background-size:cover;

.price {

color: blue;

font-size: 18px;

.card button {

padding:10px;

color: white;

background-color: green;

text-align: center; }

</style>
</head>

<body id="main">

<h2 style="text-align:center">Place to visit in India</h2>

<div class="card">

<img src="download.jpg" style="width:100%">

<h1><b>Explore Best In India</b></h1>

<h2 class="price">INR 39,990/-</h2>

<h2>

<ul>

<li>Manali</li>

<li>Rushikesh</li>

<li>Chadar Trek</li>

<li>Andaman and Nicobar</li>

<li>Mount Abu</li>

</ul>

</h2>

<p><button>Book Here</button></p>

</div>
</body>

Output:

Example #2
In this example, we are going to create one Feedback form as a web page.

HTML Code:

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-


scale=1">

<style>

input[type=text], select, textarea {

width: 100%;

padding: 8px;

border: 1px solid #ccc;

margin-top: 4px;

margin-bottom: 10px;

input[type=submit] {

background-color:Blue;

padding: 8px 8px;

.container {

width:100%;

border-radius: 6px;
background-color: #EFF6F6;

padding: 10px;

</style>

</head>

<body>

<h3>We welcome your suggestions</h3>

<div class="container">

<form>

<label for="fname">First Name</label>

<input type="text" id="fname" name="firstname"


placeholder="Enter Your name">

<label for="lname">Last Name</label>

<input type="text" id="lname" name="lastname"


placeholder="Enter Your last name">

<label for="ename">Email</label>

<input type="text" id="ename" name="email"


placeholder="Enter Your Email here">

<label for="mobno">Contact No</label>

<input type="text" id="mobno" name="mobno"


placeholder="Enter Your Contact Number">

<label for="subject">Feedback</label>

<textarea id="subject" name="subject" placeholder="Give your


feedback
"style="height:50px"></textarea>

<input type="submit" value="Send">

</form>

</div>

</body>
</html>

Output:

Example #3

In this example, we are going to create another web page that will show the

homepage of a particular website.

HTML Code:

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-


scale=1">

<style>

* {

box-sizing: border-box;

body {margin: 0;}


.header {

padding: 10px;

text-align: center;

background: orange;

color: white;

.navbar {

overflow: hidden;

background-color: dimgrey;

.navbar a {

float: left;

display: block;

color: white;

text-align: center;

padding: 10px 10px;

.navbar a.right {

float: right;

.navbar a:hover{

background-color: #eee;
color: black;

.row {

display: flex;

flex-wrap: wrap;

.sidebar {

flex: 10%;

background-color: #f1f1f1;

padding: 20px;

.main {

flex: 80%;

background-color: white;

padding: 20px;

.logoimg {

height:10%;

float:left;

</style>

</head>
<body>

<div class="header">

<div class="logoimg" style=""><img src="cropped-


EDUCBA_LOGO.png"></div>

<h1>Welcome to EDUCBA</h1>

</div>

<div class="navbar">

<a href="https://www.educba.com/finance/courses/financial-
analyst-course/">Finance</a>

<a href="https://www.educba.com/data-science/courses/data-
science-course/">Data Science</a>

<a
href="https://www.educba.com/software-development/courses/so
ftware-development-course/">Software Development</a>

<a href="https://www.educba.com/excel/courses/excel-vba-
certification-course/">Excel</a>

<a href="https://www.educba.com/design/courses/design-
course/">Design</a>

<a href="#" class="right">Login</a>

</div>

<div class="row">

<div class="sidebar">

<h2>Contact US</h2>

<div><img src="Contact.jpg" style="height:100px;"></div>

<h2>Reviews</h2>
<div ><img src="Reviews.jpg" style="height:100px;"></div>

</div>

<div class="main">

<h2>WHO IS EDUCBA?</h2>

<p>Choose your interest area and get certified with our


online Courses in Finance, Data Science, Software
Development, Excel, Design, Project Management, Personal
Development, Marketing and Human Resources..</p>

<br>

<div class="row">

<div class="sidebar">

<h2><u>Certification Courses</u></h2>

<a href="https://www.educba.com/finance/">Financial Analyst


Course - All in One Bundle</a><br>

<a href="https://www.educba.com/marketing/">Marketing Course


- All in One Bundle</a><br>

<a href="https://www.educba.com/human-resource/">Human
Resource Course - All in One Bundle</a><br>

<a href="https://www.educba.com/design/">Design Course -All


in one Bundle</a> <br>

<a href="https://www.educba.com/excel/">Excel VBA Course -


All in One Bundle</a>

</div>

<div class="sidebar">

<h2><u>Free Courses</u></h2>
<a href="https://www.educba.com/data-science/courses/free-
data-science-course/">Free Course on Data Science</a><br>

<a href="https://www.educba.com/design/courses/free-graphic-
design-online-course/">Free Course Graphic Design</a><br>

<a href="https://www.educba.com/excel/courses/free-online-
excel-course/">Free Online Excel Course</a><br>

<a href="https://www.educba.com/marketing/courses/free-
digital-marketing-course/">Free Course Digital
Marketing</a><br>

<a
href="https://www.educba.com/software-development/courses/fr
ee-programming-course/">Free Course Programming</a>

</div></div></div></div>
</body>

Output:

<!––>

Conclusion
From all the above discussion, we can say that Web pages are created by using

HTML code in a very simplified manner. Just simply put your HTML code in any

one editor, save it with the .html extension and open it within any browser.
Recommended Articles
This is a guide to Design a Web Page in HTML. Here we discuss the introduction

and steps to design web pages in HTML along with the examples and code

implementation. You may also look at the following articles to learn more-

1. HTML Blocks

2. Html5 vs Html4

3. HTML Canvas

4. Moving Text in HTML

:focus {
outline: none;
border: 2px solid #b9b6d3;
}

.form-input.warning input {
border: 2px solid #ff7a7a;
}

.form-input p {
margin: 0.2em 0.75em 0 0;
display: none;
font-size: 0.75rem;
text-align: right;
font-style: italic;
color: #ff7a7a;
}

.form-input.warning p {
display: block;
}

.submit-btn {
cursor: pointer;
width: 100%;
padding: 1em;
margin-bottom: 1em;
border: none;
border-bottom: 5px solid #31bf81;
border-radius: 0.5em;
background-color: #38cc8c;
color: white;
font-weight: 600;
text-transform: uppercase;
}

.submit-btn:hover {
background-color: #5dd5a1;
}

.form-term {
margin-bottom: 0.75em;
font-size: 0.8rem;
text-align: center;
}

.form-term span {
font-weight: 700;
color: #ff7a7a;
}

@media (min-width: 768px) {


body {
align-items: center;
min-height: 100vh;
}

main {
max-width: 100vw;
flex-direction: row;
justify-content: center;
}

.intro {
align-items: flex-start;
text-align: left;
width: 45%;
margin-right: 1rem;
}

.title {
padding: 0;
margin-bottom: 2rem;
font-size: 3rem;
line-height: 1.25em;
}

.sign-up {
width: 45%;
}

.sign-up-form {
padding: 1.75rem;
}

.sign-up-form input {
padding-left: 1.5em;
}
}
</style>
</head>

<body>
<main>
<!-- intro section -->
<section class="intro">
<h1 class="title">Black Friday Deals</h1>
<p>Get up to 50% off on all our products and services. Hurry
up, the offer ends in 24 hours.</p>
</section>

<!-- sign-up section -->


<section class="sign-up">
<p class="sign-up-para">Sign up for our newsletter and get 10%
off your first purchase</p>
<!-- the form itself -->
<form class="sign-up-form">
<div class="form-input">
<input type="text" name="first-name" id="first-name"
placeholder="First Name" required>
<span>!</span>
<p class="warning">First name cannot be empty</p>
</div>

<div class="form-input">
<input type="text" name="last-name" id="last-name"
placeholder="Last Name" required>
<span>!</span>
<p class="warning">Last name cannot be empty</p>
</div>

<div class="form-input">
<input type="email" name="email" id="email"
placeholder="Email Address" required>
<span>!</span>
<p class="warning">Looks like this is not an email</p>
</div>
<div class="form-input">
<input type="Password" name="Password" id="Password"
placeholder="Password" required>
<span>!</span>
<p class="warning">Password cannot be empty</p>
</div>

<input class="submit-btn" type="submit" value="Claim your


offer">
<p class="form-term">By clicking the button, you are
agreeing to our <span>Terms and Services</span> </p>
</form>
</section>
</main>
</body>

</html>
HTML

▶ Try it

Here is the result of the code in example 3.

Conclusion
This brief guide includes HTML web page examples with source code.
We have learned how to create a basic HTML web page with 2
different examples. We have also learned how to create a basic CSS
style sheet and how to use it on our HTML web page.
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

Introduction to Design Web Page in HTML


HyperText Markup Language (HTML) is one of the most popular languages to

design Web Pages and their content. HTML uses different tags, elements, images

and some latest components to make Web Pages more attractive and user-friendly.

With the help of some CSS, the look and feel of the web page can be easily changed.
It should be considered an important source in the World Wide Web to structure

the web page properly. It is possible by using simple text editors to edit and save

changes whenever they want.

Steps to Design Web Page in HTML


There are some basic steps considered to design web pages using HTML are as

follows:

Designing Layout: Before actually starting to design a web page, it is necessary to

prepare a rough overview for your web page. This helps the user to put elements

according to their need. Web pages should be divided into 3 parts header, body and

footer part.

1. Do code set up: Firstly, create one folder where you are going to store all

your web pages. Simply prepare the style.css file if we want to add external

code to our HTML web page and simple index.html page just for checking

whether the code is working properly or not.

2. Building elements: Start designing elements for building web page ,firstly

create <head> , <body><main><sections> and after putting all elements

lastly<footer>part. It should be collection of different tags like <p>,<b>,<i>

<h1>to <h6> heading tags, <title>,<sub>,<ol>, <ul> ,<a herf=””>,

<section> , <articles> <img>, <iframe> and elements like<table> , <nav>,

<button> ,<textarea> etc.


3. Some CSS code to your layout: To fix elements at some specific location,

it is necessary to set them using some CSS code and try to highlight your

important elements.

4. Customize your web page: This step helps us to improve the looks and feel

of our webpage. It includes things like adding a background image to the

website, adding some video content to engage the user with web pages,

adding links, comments, lists to your web page.

How to Design Web Page in HTML?


Designing web pages by using HTML is one of the simplest concepts. There are

some scenarios that define how to design a web page in HTML. They are as

follows:

 Editor: In this scenario, we are going to write some HTML code by using

the editor. There are various editors available nowadays like notepad++,

brackets, TextEdit, etc.

 HTML code: As per your web page layout and all things discussed in the

syntax, put HTML code here in all tag and element format.

 Save File: once you are done with the Html code, the next step is to save all

HTML code. Save this with a .html extension on the required location.

 Open a web page in the browser: In this step, we are going to open our

HTML page in the browser to check the output.

Examples to Design Web Page in HTML


Let’s we will create some web pages to see the actual resultant web page.

Example #1
Here we are creating a simple web page with some HTML elements and tags. Setting

one image as a background and some text on it to look like:

HTML Code:

<head>

<style>

.card {

max-width: 200px;

margin: auto;

text-align: center;}

#main{

background-image: url('Travel.jpg');

background-repeat: no-repeat;

background-size:cover;

.price {

color: blue;

font-size: 18px;

.card button {
padding:10px;

color: white;

background-color: green;

text-align: center; }

</style>

</head>

<body id="main">

<h2 style="text-align:center">Place to visit in India</h2>

<div class="card">

<img src="download.jpg" style="width:100%">

<h1><b>Explore Best In India</b></h1>

<h2 class="price">INR 39,990/-</h2>

<h2>

<ul>

<li>Manali</li>

<li>Rushikesh</li>

<li>Chadar Trek</li>

<li>Andaman and Nicobar</li>

<li>Mount Abu</li>

</ul>

</h2>

<p><button>Book Here</button></p>
</div>
</body>

Output:

Example #2
In this example, we are going to create one Feedback form as a web page.

HTML Code:

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-


scale=1">

<style>

input[type=text], select, textarea {

width: 100%;

padding: 8px;

border: 1px solid #ccc;

margin-top: 4px;

margin-bottom: 10px;

input[type=submit] {

background-color:Blue;
padding: 8px 8px;

.container {

width:100%;

border-radius: 6px;

background-color: #EFF6F6;

padding: 10px;

</style>

</head>

<body>

<h3>We welcome your suggestions</h3>

<div class="container">

<form>

<label for="fname">First Name</label>

<input type="text" id="fname" name="firstname"


placeholder="Enter Your name">

<label for="lname">Last Name</label>

<input type="text" id="lname" name="lastname"


placeholder="Enter Your last name">

<label for="ename">Email</label>

<input type="text" id="ename" name="email"


placeholder="Enter Your Email here">

<label for="mobno">Contact No</label>


<input type="text" id="mobno" name="mobno"
placeholder="Enter Your Contact Number">

<label for="subject">Feedback</label>

<textarea id="subject" name="subject" placeholder="Give your


feedback

"style="height:50px"></textarea>

<input type="submit" value="Send">

</form>

</div>

</body>
</html>

Output:

Example #3
In this example, we are going to create another web page that will show the

homepage of a particular website.

HTML Code:

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-


scale=1">

<style>

* {
box-sizing: border-box;

body {margin: 0;}

.header {

padding: 10px;

text-align: center;

background: orange;

color: white;

.navbar {

overflow: hidden;

background-color: dimgrey;

.navbar a {

float: left;

display: block;

color: white;

text-align: center;

padding: 10px 10px;

.navbar a.right {

float: right;
}

.navbar a:hover{

background-color: #eee;

color: black;

.row {

display: flex;

flex-wrap: wrap;

.sidebar {

flex: 10%;

background-color: #f1f1f1;

padding: 20px;

.main {

flex: 80%;

background-color: white;

padding: 20px;

.logoimg {

height:10%;

float:left;
}

</style>

</head>

<body>

<div class="header">

<div class="logoimg" style=""><img src="cropped-


EDUCBA_LOGO.png"></div>

<h1>Welcome to EDUCBA</h1>

</div>

<div class="navbar">

<a href="https://www.educba.com/finance/courses/financial-
analyst-course/">Finance</a>

<a href="https://www.educba.com/data-science/courses/data-
science-course/">Data Science</a>

<a
href="https://www.educba.com/software-development/courses/so
ftware-development-course/">Software Development</a>

<a href="https://www.educba.com/excel/courses/excel-vba-
certification-course/">Excel</a>

<a href="https://www.educba.com/design/courses/design-
course/">Design</a>

<a href="#" class="right">Login</a>

</div>

<div class="row">

<div class="sidebar">
<h2>Contact US</h2>

<div><img src="Contact.jpg" style="height:100px;"></div>

<h2>Reviews</h2>

<div ><img src="Reviews.jpg" style="height:100px;"></div>

</div>

<div class="main">

<h2>WHO IS EDUCBA?</h2>

<p>Choose your interest area and get certified with our


online Courses in Finance, Data Science, Software
Development, Excel, Design, Project Management, Personal
Development, Marketing and Human Resources..</p>

<br>

<div class="row">

<div class="sidebar">

<h2><u>Certification Courses</u></h2>

<a href="https://www.educba.com/finance/">Financial Analyst


Course - All in One Bundle</a><br>

<a href="https://www.educba.com/marketing/">Marketing Course


- All in One Bundle</a><br>

<a href="https://www.educba.com/human-resource/">Human
Resource Course - All in One Bundle</a><br>

<a href="https://www.educba.com/design/">Design Course -All


in one Bundle</a> <br>

<a href="https://www.educba.com/excel/">Excel VBA Course -


All in One Bundle</a>

</div>
<div class="sidebar">

<h2><u>Free Courses</u></h2>

<a href="https://www.educba.com/data-science/courses/free-
data-science-course/">Free Course on Data Science</a><br>

<a href="https://www.educba.com/design/courses/free-graphic-
design-online-course/">Free Course Graphic Design</a><br>

<a href="https://www.educba.com/excel/courses/free-online-
excel-course/">Free Online Excel Course</a><br>

<a href="https://www.educba.com/marketing/courses/free-
digital-marketing-course/">Free Course Digital
Marketing</a><br>

<a
href="https://www.educba.com/software-development/courses/fr
ee-programming-course/">Free Course Programming</a>

</div></div></div></div>
</body>

Output:

<!––>

Conclusion
From all the above discussion, we can say that Web pages are created by using

HTML code in a very simplified manner. Just simply put your HTML code in any

one editor, save it with the .html extension and open it within any browser.

Recommended Articles
This is a guide to Design a Web Page in HTML. Here we discuss the introduction

and steps to design web pages in HTML along with the examples and code

implementation. You may also look at the following articles to learn more-

1. HTML Blocks

2. Html5 vs Html4

3. HTML Canvas

4. Moving Text in HTML

 Popular Course in this category

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

Overview of Add CSS in HTML


Cascading Style Sheets, commonly known as CSS, provide a means for web developers to

style web pages as per their choice. Simple HTML pages without any styling format defined

in CSS would appear very ugly and boring to the end-users. Hence CSS is a very critical

component in modern websites to give them a beautiful, attractive, and appealing look.

Traditionally, CSS was only responsible for controlling the look and feel of the website, but

continuous upgrades and new CSS provides the ability for web developers and designers to

control the responsiveness of the website for the web pages to have a distinguished UI for

laptop, tablet, and mobile screens.

Since CSS is a necessity for every website, it needs to be flexible and easy to define as per

the designer’s requirements. Also, since it can be very granular, CSS definitions need to be
re-usable for the same styling formats to be applied to several components together.

Fortunately, CSS’s capabilities do meet these requirements.

Methods to Add CSS in HTML


CSS can be added to a web page using either or all of the following options. Now, let’s

explore these 3 methods in detail.

1. Inline CSS
With inline CSS, HTML designers can define styling information within the HTML

element’s tag itself using the “style” attribute. It does possess several pros and cons, which

will discuss with several examples shortly. Inline CSS is the most basic method for applying

CSS. With this method, we can apply to style to just one HTML element at a time. It does not

provide any styling re-usability. The style information is defined in the HTML element’s

opening tag itself and is supplied as a value to the “style” attribute.

In the below example, we are changing the font color of h1, h6, and p elements using Inline

CSS.

Code:

<!DOCTYPE html>

<html>

<body>

<h1 style="color:blue;">I am a Blue H1 heading</h1>

<h1 style="color:blue;">I am a Blue H6 heading</h1>

<p style="color:blue;">I am a Blue Paragraph</p>


</body>
</html>

Output:

In the above example, all we wanted to do was to change the font color of the H1, H6, and P

tags to blue. Despite wanting to apply the same styling information, we were unable to re-use

it and had to define it 3 times individually for each element. Due to a lack of re-usability and

more time consumption, Inline CSS is not preferred when styling a website with several

pages. Also, making a mobile responsive website would be almost impossible with Inline

styling definitions.

2. Internal CSS
In Internal CSS, HTML designers can define styling information within the <style> </style>

tags in the <head> </head> section of the HTML page with the help of class and id

references. We will explore Internal CSS in-depth in the next section of this tutorial. As

discussed before, internal CSS is defined in the same HTML file as the HTML code on which

it is applied. The HTML code is located in the body whereas the CSS is located in the header

in <style> <style> tag. The internal CSS can be bound with the HTML elements with the help

of a class or an id. When the CSS is defined for a class, the CSS definition is re-usable since

multiple HTML elements can have the same class, but when bound with id, then the CSS is

applicable only to the element with that particular id. In most cases, web designers prefer

using class definitions of CSS instead of id.

Now let’s try the same example, but implemented with internal CSS.

Code:
<!DOCTYPE html>

<html>

<head>

.bluecolor {

color : blue ;

</head>

<body>

<h1 class = " bluecolor "> I am a Blue H1 heading </h1>

<h1 class = " bluecolor "> I am a Blue H6 heading </h1>

<p class = " bluecolor "> I am a Blue Paragraph </p>

</body>
</html>

Output:

As seen in the above example, we just have to declare the styling information once and then

use it multiple times. While internal CSS adds a great deal of styling re-usability, the CSS

defined in one HTML file cannot be used in another file. Also, declaring the CSS and HTML

in the same file could significantly increase the file size and may cause a delay while loading

the file.

3. External CSS
As the name suggests, External CSS can be applied to a webpage by defining all the CSS

information in an external CSS file which is saved by the extension .css and can be imported

with the <link></link> tag in the HTML file where the styling needs to be applied. The
external CSS mechanism was built to overcome the drawbacks of internal and inline CSS.

External CSS requires a .css file to carry all the styling information. This file can then be

linked to any number of HTML files where the HTML elements are referring to id or classes

defined in the linked CSS file.

This linking is implemented with the help of the HTML link tag. Let’s understand this with

an example. We will create a CSS file with the name mystyles and extension .css; This file

will contact the following data:

Code:

.bluecolor{

color:blue;
}

Now we will add the below content in the HTML file:

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="mystyles.css">

</head>

<body>

<h1 class = " bluecolor "> I am a Blue H1 heading </h1>

<h1 class = " bluecolor "> I am a Blue H6 heading </h1>

<p class = " bluecolor "> I am a Blue Paragraph </p>

</body>
</html>

The above code will produce the following output in t

Conclusion
With the above examples, we can conclude that External CSS would be the most efficient

way of implementing CSS in the website due to the highest degree of code reusability that it

provides limited time consumption. All professionally developed and popular themes

available are also built using External CSS since it makes web designing very manageable

and efficient.

Recommended Articles
This is a guide to How to Add CSS in HTML? Here we discuss the Overview and top 3

methods of css in html with examples and code implementation. You may also look at the

following articles to learn more –

1. Uses Of CSS

2. Iframes in HTML

3. Types of CSS Selectors

4. CSS Formatter

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

Responsive Web Design – Modern Website


Code for Beginners
Kolade Chris
When the internet was still young, website visitors
used desktop and then laptop computers with wide
screens to access websites.
Then when smart phones were developed, mobile phone users had
to endlessly zoom and scroll to access and view different parts of
those same websites.

Thankfully, this is no longer the case these days due to the


revolutionary introduction of Responsive Web Design.

In this article, I will take you through the evolution of Responsive


Web Design, the various integrations that have made it possible,
and how you can start to use it in your coding projects for a better
user experience.

What is Responsive Web Design?


Responsive web design makes web pages render properly on a wide
variety of device screen sizes without cutting short or distorting the
content.

This doesn't mean a website will appear exactly the same way on a
phone as on a laptop, for example. Rather, it means that the content
of the web page adapts to different screen sizes – from large screens
(desktops and laptops) to medium screens (tablets) to mobile
screens (phones of various screen sizes).

And it does this all while retaining the same content (just perhaps
arranged differently to fit each screen).

The Evolution of Responsive Web Design


In the past, people mostly used desktops and laptops to view
content online, because websites were optimized for those screens
only.

But as more and more people started using mobile phones to surf
the web, people started grumbling about the poor display and
layouts they were seeing.
This meant one thing for web designers and developers: websites
needed to be optimized for mobile, too!

In the last decade, the number of website users on mobile began to


surpass that of desktops and laptops for the first time. So everyone
from tech giants to small businesses started embracing a responsive
web design approach.

Developers and designers also created the shiny new mobile-first


design as well. This meant that the developers made the websites
for mobile devices first, and desktop later.

This often meant a separate website for mobile devices and larger
screens, with the same server system but different domains.

The original website, for example, could be examplewebsite.com, and


the mobile version would be examplewebsite.mobi,
or m.examplewebsite.com.
The user's device would be detected by ready-made scripts and then
the appropriate domain would be rendered. This practice still exists
today.

Apart from the two-domain method, web designers and developers


can create a website for a particular screen size first (it could be
desktop, tablet, or mobile), and then add what are called media
queries to make the website adapt to different screen sizes. This is
the mobile-first approach.

How to Make Your Site Responsive


Integrating responsive web design approaches into a project
includes every part of the code – within the HTML <head> element,
the HTML structure, the CSS, and even the JavaScript.
I will describe these processes as clearly and in as much detail as
possible.

Set the Viewport in the Head


<meta name="viewport" content="width=device-width, initial-scale=1.0">
Since HTML plays a huge role in defining the structure of a web
page, then it definitely has something to do with making websites
respond (adapt) to different screen sizes.

You'll need to include the meta viewport empty element in the head
section of any web page that you want to optimize for different
screen sizes.

This tells the browser to render the width of the web page to the
exact width of the device. So, if the device has a width of 1200px,
the web page width will be 1200px. If the device has a width of
720px, the web page width will be 720px, and so on.

This prevents annoying zooming in and zooming out that mobile


phone users experienced in the past, which wasn't good for user
experience.

Below is how a website looks on small phones without


the <meta> viewport element:
And here's how the same website with the <meta> viewport element
looks on small phones:

If you are wondering which website this is, it’s a free portfolio
website template I made for beginners. I will make it available to all
freeCodeCamp readers very soon – so, stay tuned. :)

But the <meta> viewport element is not all you need to make a


website adapt to different screen sizes. There's more.
CSS Media Queries
The most crucial tool you'll use to make your sites responsive is
CSS3 Media Queries. Media queries let you write the same CSS
code in different ways for multiple screens.

With media queries, you tell the browser to display the content in a
particular way on a particular screen.

The basic syntax of a media query looks like this:

@media screen and (max-width: 720px) {


/*CSS codes go here*/
}
This tells the browser to execute the CSS code written within the
media query when the screen width is below a 720 pixel breakpoint.
The breakpoint can usually be any value between 1200 pixels and
320 pixels.

In the code snippets below, I’m instructing the browser to change


the background-color to dark-grey, and the color to blue when the screen
width is below 768 pixels.
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
mollitia, consequuntur aliquid nobis vitae soluta maiores expedita ipsam
delectus molestiae!
</p>

<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur
architecto temporibus sed officiis vero, quisquam, corrupti quis veritatis
dolor amet nostrum quam! Voluptates nam architecto enim neque nemo
consectetur molestias unde fugit dolorum alias temporibus expedita
doloribus deserunt laborum asperiores illum saepe, voluptate rerum quia
sit facilis consequuntur perferendis aperiam. Nobis reiciendis debitis
consequuntur placeat maiores voluptas, quos esse eum.
</p>

<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus fugiat,
nemo rem facere cumque error. Aliquam consequatur nobis cupiditate atque!
Fugiat amet facere magni, nulla pariatur ut ullam, vel est eum voluptatum
dicta quis dignissimos labore repellendus. Maiores deserunt quas tempore
impedit, corporis quae amet blanditiis voluptatum laudantium magni ipsa!
</p>
</body>
@media screen and (max-width: 768px) {
body {
background-color: #333;
color: #3498db;
}
}

Several other breakpoints exist for different devices.

 320 - 480px for small phones such as iPhone 6, 7, and 5


 478 - 768px for Tablets and iPads
 1025 - 1200px for desktops and large screens
Some extra-large screens and TVs can take more than 1200px.

Responsive Text
Since text size won't be the same on a mobile phone as it is on a
desktop, text must be made to scale down as the device screen
width reduces.

You can do this within the media query for each screen. And one of
the ways to make it easier is to use relative units (%, rem, and em)
instead of an absolute unit such as px.

In the HTML and CSS code snippets below, I instruct the browser
to make the font size of the text 3rem on big screens, and 1.5rem on
screens below a width of 768pixels:
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
mollitia, consequuntur aliquid nobis vitae soluta maiores expedita ipsam
delectus molestiae!
</p>

<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur
architecto temporibus sed officiis vero, quisquam, corrupti quis veritatis
dolor amet nostrum quam! Voluptates nam architecto enim neque nemo
consectetur molestias unde fugit dolorum alias temporibus expedita
doloribus deserunt laborum asperiores illum saepe, voluptate rerum quia
sit facilis consequuntur perferendis aperiam. Nobis reiciendis debitis
consequuntur placeat maiores voluptas, quos esse eum.
</p>

<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus fugiat,
nemo rem facere cumque error. Aliquam consequatur nobis cupiditate atque!
Fugiat amet facere magni, nulla pariatur ut ullam, vel est eum voluptatum
dicta quis dignissimos labore repellendus. Maiores deserunt quas tempore
impedit, corporis quae amet blanditiis voluptatum laudantium magni ipsa!
</p>
@media screen and (max-width: 768px) {
p {
font-size: 1.5rem;
}
}
Responsive Images
Just like text, images must scale down as screen width reduces, too.

Images have a fixed width and height, so when they are larger than
the viewport width (screen width), a user typically has to scroll to
see the whole thing, which creates a bad user experience.

Developers get around this by setting a max-width of 100% for all


images and displaying them as block-level elements (images are
inline elements by default).

You can set this for the images in your code individually, but to
foster DRY (Do not repeat yourself) principles, you should do it in
your resets for all images.

img {
display: block;
max-width: 100%;
}
Another way to make images responsive is to use the picture
element in HTML. With this element, you can tell the browser to
display different images that correlate to the width on different
devices.

<picture>
<source
media="(max-width: 1100px)"
srcset="freecodecamp-large-logo.jpg"
/>
<source
media="(max-width: 900px)"
srcset="freecodecamp-medium-logo.jpg"
/>
<source media="(max-width: 760px)" srcset="freecodecamp-small-logo.jpg" />
<img
src="freecodecamp-large-logo.jpg"
alt="freeCodeCamp"
style="max-width: 100%"
/>
</picture>
 On a screen of size 1100px width and below, freecodecamp-
large-logo will be shown
 On a screen of size 900px width and below, freecodecamp-
medium-logo will be shown
 On a screen of size 760px width and below, freecodecamp-
small-logo will be shown
If the screen width meets none of the conditions, freecodecamp-
large-logo will be shown.
Responsive Layout
The layout of any web page determines how the content is
displayed in the browser.

In the past, developers had to use tables, which were not easy to
control. Then came float and clearfix, which were also difficult to
manage.
The introduction of CSS Grid and Flexbox revolutionized layouts
and gave more relevance to responsive design.

Flexbox
With CSS flexbox, responsive design gained more relevance
because, with it, you don't have to add too many media queries
unlike when you use floats for a layout.

Immediately when a display of flex is assigned to the containing


element, the element direction is rendered on the row by default.
You can later use a media query to set the direction to a column for
smaller screens with the flex-direction property. The flex-direction
property value has to be explicitly set to a column.

You can also layout the way you want the content on the web page
to render with properties such as flex-grow and flex-shrink. These
two properties make the element they contain grow as the screen
viewport (width) increases and shrink as the viewport decreases.
How cool is that?

In the code snippets below, the direction of the different pieces of


text in their respective containers will be a row on screens higher
than 768 pixels in width, and a column when the width is lower
than 768 pixels.

I was able to do it by displaying the whole items inside the body


element as flex.

<body>
<div class="container-one">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
mollitia, consequuntur aliquid nobis vitae soluta maiores expedita
ipsam
delectus molestiae!
</p>
</div>

<div class="container-two">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur
architecto temporibus sed officiis vero, quisquam, corrupti quis veritatis
dolor amet nostrum quam! Voluptates nam architecto enim neque nemo
consectetur molestias unde fugit dolorum alias temporibus expedita
doloribus deserunt laborum asperiores illum saepe, voluptate rerum quia
sit facilis consequuntur perferendis aperiam. Nobis reiciendis debitis
consequuntur placeat maiores voluptas, quos esse eum.
</p>
</div>

<div class="container-three">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus fugiat,
nemo rem facere cumque error. Aliquam consequatur nobis cupiditate atque!
Fugiat amet facere magni, nulla pariatur ut ullam, vel est eum voluptatum
dicta quis dignissimos labore repellendus. Maiores deserunt quas tempore
impedit, corporis quae amet blanditiis voluptatum laudantium magni ipsa!
</p>
</div>
</body>
body {
display: flex;
}

div {
border: 2px solid #2ecc71;
margin-left: 6px;
}

@media screen and (max-width: 768px) {


body {
flex-direction: column;
}
}
CSS Grid
CSS grid is more or less a hybrid and more powerful form of
flexbox. Many have argued that whatever you're doing with
Flexbox, you can do in fewer lines of code with Grid.

With CSS grid, you get to create flexible grids in a more


straightforward way as you can define the columns and rows you
want with the grid-auto-flow property set to either column or row.

You can do the same thing that we did in the Flexbox example this
way with Grid:

body {
display: grid;
grid-auto-flow: column;
gap: 6px;
}

div {
border: 2px solid #2ecc71;
margin-left: 6px;
}

@media screen and (max-width: 768px) {


body {
grid-auto-flow: row;
}
}

You can learn more about Flexbox and Grid in the freeCodeCamp
CSS curriculum.

Conclusion
As internet users now access websites on mobile phones more than
on desktops and laptops, responsive design is the way to go when it
comes to making modern websites.

Knowing Responsive Design best practices will set you apart from
other developers as you will be able to make websites that adapt to
different screen sizes within the same HTML, CSS, and JavaScript
files.
I hope this article has given you the insights you need to make
responsive real-world websites.

Thank you for reading, and keep coding

You might also like