Create Json Object

Lab Practical Submission
Date: 16/01/24
Roll No. and Name: 22BCE305 ROSHNI PANKAJKUMAR RANA
Course Code and Name: 2CS201 FULL STACK WEB DEVELOPMENT
Practical 3
1. Create a responsive web page involves using the viewport meta tag in the head
of your HTML document.
p3_webpage1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0">
<title>Web-page 1</title>
<style>
body{
background-color: lightblue;
h1{
background-color: white;
color: darkblue;
}
</style>
</head>
<body>
<h1> Responsive webpage!<n></n></h1>
<h3> The size of this page changes as we move the sidebars!

The size of this page changes as we move the sidebars! The size
of this page changes as we move the sidebars! </h3>
</body>
</html>
Output
p3_webpage1.html
2. Create a responsive web page by using the width and max-width Properties and
Changing images according to the browser width.
p3_webpage2
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,

initial-scale=1.0">
<title>Responsive Web Page with Images</title>
<style>
body {
margin: 0;
font-family: 'Times New Roman';
header, footer {
background-color: #000000;
color: white;
text-align: center;
padding: 5px;
}
main {
padding: 20px;
.responsive-image {
width: 90%;
height: auto;
</style>
</head>
<body>
<header>
<h1>Full Stack Web Development</h1>
</header>
<main>
<img src="C:\Users\HP\Desktop\uni\fourth
sem\fswd\lab\fswd-1.png" alt="Front end"
class="responsive-image">
sem\fswd\lab\fswd-2.png" alt="Back end"
class="responsive-image">
<h2>Full-stack web development refers to the practice of

working with <i> <u>both the frontend (what users see and
interact with in a web application) and the backend (the
server-side logic, database, and server)</u> </i> of a web
application. A full-stack web developer is someone who has the
skills to work on both the client side (user interface) and
the server side (server logic and database). This includes
knowledge of languages, frameworks, and tools used in both
frontend and backend development.</h2>
<h4><a
href="https://www.geeksforgeeks.org/what-is-full-stack-develop
ment/">Click on the link below to know more about full stack
web development!</a></h4>
</main>
<footer>
<p>Responsive webpage 2</p>
</footer>
</body>
</html>
Output:
p3_webpage2.html
3. Create a responsive web page that demonstrates responsive text size using
the "vw" (viewport width) unit in CSS
<!DOCTYPE html>
<html>

initial-scale=1.0">
<title>Responsive webpage with Text</title>
<style>
body{
background-color: lightpink;
h1{
background-color: white;
h6{
background-color: rgb(244, 109, 109);
</style>
<body>
<h1 style="font-size:15vw;">Responsive Text</h1>

<h6 style="font-size:10vw;">Resize the browser window to see how
the text size scales.</h6>
<p style="font-size:5vw;">When we use the "vw" unit when sizing

the text, 10vw will set the size to 10% of the viewport
width.</p>
<p>Viewport is the browser window size. 1vw = 1% of viewport

width. If the viewport is 50cm wide, 1vw is 0.5cm.</p>
</body>
</html>
Output
p3_webpage3.html
4. Create a responsive web page that demonstrates media queries for creating
breakpoints in the web page.
<!DOCTYPE html>
<html lang="en">
<head>

initial-scale=1.0">
<title>Responsive Web Page with Media Queries</title>
<style>
body {
font-family: 'Times New Roman', serif;
margin: 0;
padding: 0;
text-align: center;
header {
color: white;
padding: 10px;
main {
padding: 20px;
.responsive-image {
width: 100%;
height: auto;
margin-bottom: 20px;
}
@media screen and (min-width: 400px) {
main {
padding: 40px;
.responsive-image {
max-width: 400px;
main {
padding: 40px;
.responsive-image {
max-width: 600px;
}
main {
padding: 60px;
.responsive-image {
max-width: 900px;
footer {
color: white;
padding: 10px;
</style>
</head>
<body>
<header>
<h1>Full Stack Web Development</h1>
</header>
<main>
sem\fswd\lab\fswd-1.png" alt="Image 1" class="responsive-image">
sem\fswd\lab\fswd-2.png" alt="Image 2" class="responsive-image">
<h3>Full-stack web development refers to the practice of

working with <i> <u>both the frontend (what users see and
interact with in a web application) and the backend (the
server-side logic, database, and server)</u> </i> of a web
application. A full-stack web developer is someone who has the
skills to work on both the client side (user interface) and the
server side (server logic and database). This includes knowledge
of languages, frameworks, and tools used in both frontend and
backend development.</h3>
<p><a
href="https://www.geeksforgeeks.org/what-is-full-stack-developme
nt/">Click on the link below to know more about full stack web
development!</a></p>
</main>
<footer>
<p>Responsive Webpage 4</p>

</footer>
</body>
</html>
Output:
p3_webpage4.html

Create Json Object

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Create Json Object

Uploaded by

Copyright:

Available Formats

Lab Practical Submission

<h1> Responsive webpage!<n></n></h1>

<h3> The size of this page changes as we move the sidebars!

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

<title>Responsive Web Page with Images</title>

font-family: 'Times New Roman';

<h1>Full Stack Web Development</h1>

<h2>Full-stack web development refers to the practice of

<p>Responsive webpage 2</p>

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

<title>Responsive webpage with Text</title>

background-color: rgb(244, 109, 109);

<h1 style="font-size:15vw;">Responsive Text</h1>

<p style="font-size:5vw;">When we use the "vw" unit when sizing

<p>Viewport is the browser window size. 1vw = 1% of viewport

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

<title>Responsive Web Page with Media Queries</title>

font-family: 'Times New Roman', serif;

@media screen and (min-width: 400px) {

@media screen and (min-width: 600px) {

<h3>Full-stack web development refers to the practice of

<p>Responsive Webpage 4</p>

You might also like