Scribd
Upload
4 views7 pages

MadExp8 (A)

The document outlines an experiment aimed at creating a responsive User Interface using HTML and CSS, focusing on Progressive Web App (PWA) design techniques. It explains the principles of responsive web design, including viewport settings, responsive images, text size, and media queries, along with providing example code for implementation. The conclusion emphasizes the successful design and development of a responsive web page that functions well on both desktop and mobile devices.

Uploaded by

Vishaka Irabatti
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views7 pages

MadExp8 (A)

The document outlines an experiment aimed at creating a responsive User Interface using HTML and CSS, focusing on Progressive Web App (PWA) design techniques. It explains the principles of responsive web design, including viewport settings, responsive images, text size, and media queries, along with providing example code for implementation. The conclusion emphasizes the successful design and development of a responsive web page that functions well on both desktop and mobile devices.

Uploaded by

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

DEPARTMENT OF INFORMATION TECHNOLOGY

EXPERIMENT NO.08 Batch/Roll No.: T2/621


Aim: To create a responsive User Interface

Lab Objective 04
To Design and Develop a responsive User Interface by applying PWA design technique

Compiler / Tool: HTML ,CSS

Theory:
Responsive web design is about creating web pages that look good on all devices
A responsive web design will automatically adjust for different screen sizes and viewports.

What is Responsive Web Design?


Responsive Web Design is about using HTML and CSS to automatically resize, hide,
shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and
phones):

Setting The Viewport


To create a responsive website, add the following <meta> tag to all your web pages:
Example: <meta name="viewport" content="width=device-width, initial-scale=1.0">

This will set the viewport of your page, which will give the browser instructions on how
to control the page's dimensions and scaling.Here is an example of a web page without
the viewport meta tag, and the same web page with the viewport meta tag:

15
DEPARTMENT OF INFORMATION TECHNOLOGY

Without the viewport meta tag: With the viewport meta tag:

Responsive Images
Responsive images are images that scale nicely to fit any browser size.
Using the width Property
If the CSS width property is set to 100%, the image will be responsive and scale up and
down:
Example: <img src="img_girl.jpg" style="width:100%;">
Using the max-width Property
If the max-width property is set to 100%, the image will scale down if it has to, but
never scale up to be larger than its original size:
Example: <img src="img_girl.jpg" style="max-width:100%;height:auto;">
Show Different Images Depending on Browser Width
The HTML <picture> element allows you to define different images for different browser
window sizes.
Resize the browser window to see how the images below changes depending on the width:

16
DEPARTMENT OF INFORMATION TECHNOLOGY

Example
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 600px)">
<source srcset="img_flowers.jpg" media="(max-width: 1500px)">
<source srcset="flowers.jpg">
<img src="img_smallflower.jpg" alt="Flowers">
</picture>

Responsive Text Size


The text size can be set with a "vw" unit, which means the "viewport
width". That way the text size will follow the size of the browser window:
Hello World
Resize the browser window to see how the text size scales.
Example: <h1 style="font-size:10vw">Hello World</h1>
Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is
50cm wide, 1vw is 0.5cm.

Media Queries:
In addition to resize text and images, it is also common to use media queries in responsive
web pages.With media queries you can define completely different styles for different
browser sizes. Example: resize the browser window to see that the three div elements
below will display horizontally on large screens and stacked vertically on small screens:

Example
/* Default layout for large screens */
.left, .right {
float: left;
width: 20%; /* 20% width by default */
}

.main {
float: left;
width: 60%; /* 60% width by default */
}

/* Responsive layout for screens 800px or smaller */


@media screen and (max-width: 800px) {
.left, .main, .right {
width: 100%; /* Full width on small screens */
}
}

17
DEPARTMENT OF INFORMATION TECHNOLOGY

CODE:
HTML File: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Card UI Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>My Responsive Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<div class="card-container">
<div class="card">
<img src="img.jpg" alt="Welcome Image">
<h2>Welcome to My Website</h2>
<p>This is a simple responsive layout using HTML and CSS.</p>
</div>
<div class="card">
<img src="img1.jpg" alt="About Us Image">
<h2>About Us</h2>
<p>We provide various services to help you succeed.</p>
</div>
<div class="card">
<img src="service.jpg" alt="Services Image">
<h2>Our Services</h2>
<p>Explore the range of services we offer to our clients.</p>
</div>
<div class="card">
<img src="contact.jpg" alt="Contact Image">
<h2>Contact Us</h2>
<p>Get in touch with us for more information.</p>
</div>
</div>
</main>
<footer>
<p>&copy; 2023 My Responsive Website</p>
</footer>
</body>
</html>

18
DEPARTMENT OF INFORMATION TECHNOLOGY

CSS File: styles.css

*{
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: Arial, sans-serif;
line-height: 1.6;
}

header {
background: #4CAF50;
color: white;
padding: 10px 20px;
text-align: center;
}

nav ul {
list-style: none;
padding: 0;
}

nav ul li {
display: inline;
margin: 0 15px;
}

nav ul li a {
color: white;
text-decoration: none;
}

.card-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 20px;
}

.card {
background: #f4f4f4;
border-radius: 5px;
margin: 10px;
padding: 15px;
width: 300px; /* Fixed width for cards */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
text-align: center;
}

19
DEPARTMENT OF INFORMATION TECHNOLOGY

.card img {
max-width: 100%; /* Make images responsive */
height: auto; /* Maintain aspect ratio */
border-radius: 10px; /* Set border radius to 10px for images */
}

footer {
text-align: center;
padding: 10px 0;
background: #333;
color: white;
}

/* Responsive Styles */
@media (max-width: 600px) {
nav ul li {
display: block;
margin: 10px 0;
}

.card-container {
flex-direction: column; /* Stack cards vertically on small screens */
align-items: center; /* Center cards */
}
}

Output Screenshot:

1) LAPTOP VIEW:

20
DEPARTMENT OF INFORMATION TECHNOLOGY

2) MOBILE VIEW:

Conclusion:
A responsive web page look good on large desktop screens and on small mobile
phones.

Lab Outcome 04:


We designed and developed a Responsive User Interface by applying PWA Design
Techniques

21

You might also like