CCS332 APP DEVELOPMEN L- 2 T -0 P - 2 C- 3
UNIT I FUNDAMENTALS OF MOBILE & WEB APPLICATION DEVELOPMENT
6
1. Basics of Web application development
2. Mobile application development,
3. Native App,
4. Hybrid App,
5. Cross-platform App,
6. What is Progressive Web App,
7. Responsive Web design
1.BASICS OF WEB APPLICATION DEVELOPMENT
Web Application
Traditional PC applications consist only of 1 tier, which resides on the client machine. Web
applications lend themselves to a multi-tiered approach by nature. Though many
variations are possible, the most common structure is the three-tiered application
In its most common form, the three tiers are called presentation, application and storage.
– The web browser sends requests to the middle tier
– middle tier services them by making queries and updates against the database
– generates a user interface.
–
Presentation Tier (User Interface):
Softwares used for presentation tier web app development
– HTML/CSS: HyperText Markup Language (HTML) is used for creating the
structure and content of web pages, while Cascading Style Sheets (CSS) is used for styling and
layout.
– JavaScript: For adding interactivity and dynamic behavior to web pages
– Front-end Frameworks: Frameworks like React, Angular, or Vue.js provide
powerful tools and abstractions for building interactive and responsive user interfaces.
–
Application Tier (EAB - Entity-Attribute-Boundary):
Softwares used for Application tier web app development
• Web Frameworks: Frameworks like Django (Python), Ruby on Rails (Ruby), ASP.NET
Core (C#), or Spring Boot (Java/Kotlin)
• ORM (Object-Relational Mapping): For mapping data between the application and the
database, using tools like SQLAlchemy (Python), ActiveRecord (Ruby), or Entity Framework
Core (C#).
• Validation Libraries: To handle data validation and ensure data integrity, such as Django
Forms (Python), Formik (JavaScript), or Express Validator (Node.js).
• JSON/XML Parsers: Libraries that handle parsing JSON or XML data, like Jackson
(Java/Kotlin), json (Python), or xml2js (JavaScript).
Data LayerTier (Database):
Softwares used for data tier web app development
– MySQL, PostgreSQL, Oracle, Microsoft SQL Server, MongoDB, etc.
– SQL Clients
– Database Abstraction Layers: These can be part of the application layer or the
data layer, and they provide an additional abstraction over the DBMS. For example, Django's
ORM or SQLAlchemy.
For more complex applications it may be beneficial to use an n-tiered approach, In a two-tier
architecture a "smart" client that performs all the work and queries a "dumb" server,
Security breaches - Protecting customer and organizational information is an important part of
any web application. This includes processes for authentication, authorization, asset handling,
input, and logging and auditing.
What Is A Web Development Framework?
A framework is a set of tools used in programming, to help build well-structured, reliable
software and systems, A web framework provides, through a library, access to ready-made
components, snippets of code, or templates used to aid in web development.
Benefits Of Using Web Development Frameworks
Streamlined development: Web development frameworks can be said to “bootstrap” the
development process, providing templates to kickstart a project or code for features that are
common to many projects.
2. Improved security & reliability: Web development frameworks are backed by
communities of developers actively contributing updates to help ensure components are
compliant to web standards, secure, and stable.
3. Improved performance & scalability: Frameworks help create a structure for web
application development that is both optimized for performance and scalability—factors
that also make these applications easier to debug and maintain.
2. BASICS OF MOBILE APP DEVELOPMENT
Mobile app development: Mobile app development is the act or process by which a mobile app
is developed for one or more mobile devices like personal digital assistants (PDA), enterprise
digital assistants (EDA), or mobile phones . Apps were originally intended for productivity
assistance such as email, calendar, and contact databases. Other examples - Microsoft Word,
Flipkart, Instagram, Telegram,NetFlix, Amazon, phonePe, Disney hotstar, etc
1. Developing apps for mobile devices requires considering the constraints and features of
these devices. Eg. Mobile devices run on battery and have less powerful processors than
personal computers and also have more features such as location detection and cameras.
2. Mobile application development requires the use of specialized integrated development
environments. .
3. Mobile user interface (UI) and User experience(UX) Design is also essential. Mobile UI
considers constraints and contexts, screen, input and mobility as outlines for design. The
user is often the focus of interaction with their device, and the interface entails
components of both hardware and software.
4. From a simple perspective, applications are designed with three different layers in mind.
The data layer includes all the data utilities, service agents and data access components.
Moving up from data, the business layer includes all of the different workflows and
business entities as well as the business components themselves. Finally,
the presentation layer is where the user-interface (UI) processes and components sit.
5. The mobile back-end facilitates data routing, security, authentication, authorization,
working off-line, and service orchestration
6. Mobile apps are first tested within the development environment using emulators and
later subjected to field testing
7. Mobile application when downloaded is stored in spaces maintained by data services of
mobile service infrastructure
8. During accessing of the application local data storage and services which are needed for
accessing the hardware of the mobile are used.
Common hardware constraints while designing
– CPU architecture and speeds
– memory (RAM),
– displays (technology, size, dimensions, resolution
– input methods (buttons, keyboard, touch screens with/without styluses)
Mobile apps example
Most companies that ship a product (e.g. Apple, iPod/iPhone/iPad) provide an official software
development kit (SDK). for developing, Testing and/or Quality Assurance (QA).
Mobile user interface (UI) design is an essential step in the creation of mobile apps. Mobile UI
design's goal is mainly for an understandable, user-friendly interface. Mobile apps are usually
distributed via an official online outlet or marketplace
Apple - The App Store,
Google - Google Play)
Mobile app develpoment process
Platform:
The software development packages needed to develop, deploy, and manage mobile
apps
Front-end development tools
Front-end development tools are focused on the user interface and user experience (UI-UX)
UI design tools
SDKs to access device features
Cross-platform accommodations/support
First party tools
include official SDKs published by, or on behalf of, the company
Platform – Android
Language –JAVA,Kotlin
IDE-Eclipse, IntelliJ IDEA, Android Studio, Project Kenai Android plugin for
NetBeans
Platform – IOS for apple
Language –Objective-C, Swift
IDE- Xcode, AppCode
Back End servers
– Integration with back-end systems
– User authentication-authorization
– Data services
– Reusable business logic
3. NATIVE APP DEVELOPMENT
Native components:
These are Components that are directly associated with the phone. Native apps have direct
access to the device's hardware and system functionalities and provides better performance and
user experience
Native Characteristics:
Portability:: Easy to carry, light weight
Touchscreen Interface: primary method of interaction
Sensors: equipped with various sensors, such as accelerometers, gyroscopes, GPS, proximity
sensors, and ambient light sensors
Connectivity:can connect to the internet through Wi-Fi, cellular data networksand Bluetooth
Limited Screen Size: Developers must design mobile apps to be responsive and adaptable to
different screen sizes and resolutions
Battery Life: :Mobile apps should be optimized to minimize battery consumption and provide
an efficient user experience
Multitasking: allowing users to switch between multiple apps and run them concurrently.
Native Apps:
Native apps are installed onto the device itself and are developed especially for a particular
operating system. These apps are available on app stores such as Apple App Store, Google
Play Store, etc.
Native apps work in specific operating systems such as Apple iOS, Android or Windows. If an
is app made for Android then it will not work on Apple iOS or Windows. We have to build
separate apps for each operating system if we want to our app to work across all major
operating systems. This means we have to spend more money and more effort (time,
resources).
Development needs a separate code base
Native mobile app development requires developers to build apps from scratch using
platform-specific programming languages and tools. For example, developers who code native
apps for Google Android write in Java or Kotlin, and developers who code native apps for Apple
iOS write in Objective-C and Swift. As a result, they can tailor-make apps that take full
advantage of all their chosen platform’s capabilities.
Native development requires additional time and resources but provides excellent
performance and user experiences (UXs), including greater customization and personalization. A
native approach is mandatory for building highly complex mobile apps, such a product inventory
app with heavy data processing, or a gaming app with 3D animations.
Advantages of Native Apps:
Native apps are faster than web apps.
Native apps can access system/device resources such as a GPS or camera.
These apps can work without an internet connection.
These apps have more safety and security than web apps, as native apps must be approved
by the App Store.
These apps are easier to develop due to the availability of developer tools, interface
elements, and SDKs.
Disadvantages of Native Apps:
These apps are more expensive to develop as compared to web apps.
Designing and building the app for different platforms such as iOS and Android, is costly
and time taking.
Maintaining and consistently update of native apps cause more cost.
It is difficult to have a native mobile app approved by the App Store.
4. HYBRID APP DEVELOPMENT
https://docs.wavemaker.com/learn/v10.15/hybrid-mobile/building-hybrid-mobile-apps/
Hybrid app
The concept of the hybrid app is a mix of native and web-based apps. Apps developed
using Apache Cordova, Flutter, Xamarin, React Native, Sencha Touch, and
their frameworks fall into this category.
These are made to support web and native technologies across multiple platforms. Moreover,
these apps are easier and faster to develop. It involves use of single codebase which works in
multiple mobile operating systems.[
Despite such advantages, hybrid apps exhibit lower performance. Often, apps fail to bear the
same look-and-feel in different mobile operating systems
Hybrid App Architecture
Hybrid Mobile App Development
• This allows hybrid apps to function the same on the web and on mobile devices, without
needing a unique build for each.
• Hybrid app development is often used to convert web apps to mobile apps. The hybrid
app reuses a lot of the code from the web app, while being able to function on iOS and
Android devices, like a native mobile app would.
• The result is a much quicker time to market, and less complexity maintaining each
platform, as there is shared code across each.
Hybrid app development entails using web-based languages such as CSS, HTML, and JavaScript
to code apps that are then executed in a native shell with an embedded web browser. Taking this
approach, developers can share backend code, enabling them to create apps quickly and cost-
effectively for multiple platforms.
Hybrid App Platforms and Tools
1. Ionic:
It’s an open-source framework with a large and active community. It supports multiple web
frameworks, letting developers translate their web code to a native mobile UI.
2.Cordova
Apache Cordova is, like Ionic, a cross-platform, open source framework, built to allow you
to reuse web code and build hybrid mobile apps. Cordova used to power a tool called
PhoneGap a simplified and user-friendly way to translate a web app to mobile apps.
3. Flutter
Flutter is a hybrid app framework developed by Google. It gives you the ability to build
high-quality, sophisticated cross-platform apps and hybrid app .
4. Meteor
Meteor is a slightly lower-profile hybrid app framework.It allows you build cross-
platform apps that share code across desktop web, mobile web, iOS and Android.
5.React Native
React Native is a cross-platform framework developed by Facebook/Meta. Meta uses this in all
of their apps, and a number of other huge brands - such as Microsoft, Shopify, Tencent, Walmart
and the NFL - also use React Native
Advantages of hybrid apps
Rapid creation and launching of a minimum viable product because it can be faster,
easier, and more affordable
Hybrid apps are developed using a single codebase and they can work on various
platforms like iOS and Android,
The maintenance and development of hybrid applications is simple.
The development of Hybrid application is cheaper than the native application.
Disadvantages of the hybrid applications
Requirement of an uninterrupted internet connection to work.
They are slower than the native applications
5 CROSS-PLATFORM APP DEVELOPMENT
General architecture of cross platform mobile app architecture
Cross-platform app development enables reusable, web-based code to be rendered
natively across platforms.
Developers rely on a cross-platform app development framework to provide the tools,
plug-ins, and UI components necessary for “write once, run anywhere” coding.
The many frameworks available on the market vary by toolsets, programming languages,
platform support, code reusability, ease of learning, documentation, and other factors.
Traditionally, cross-platform apps lag native apps in performance and UX, which has
made a cross-platform approach more suited to simpler apps, such as employee on
boarding and return-to-work apps.
However, when it comes to considering hybrid vs. cross-platform app development, the latter is
often preferred. Cross-platform app development frameworks continue to grow in robustness,
enabling more consistent and in some cases close-to-native UXs. For instance, because this
approach uses web-based code, many retailers adopt it to power fully functioning e-commerce
apps across platforms.
https://technostacks.com/blog/mobile-app-development-frameworks/
React Native
React Native, built and supported by Facebook
Cross-platform application development framework
React Native facilitates the development of Android and iOS mobile applications.
The most exemplary instances of React Native apps
Prominent businesses like Tesla, Airbnb, Skype, or Amazon Prime.
It allows for building platform-specific versions of multiple features enabling easy use of
a single codebase across all platforms.
The React Native design has a similar syntax to CSS.
The messages from the JavaScript thread are used to exploit native views.
When dealing with React Native, creators have to precisely write native code.
They have to leverage the languages of the focused platform.
These languages and platforms include
1. Objective – C or Swift for iOS,
2. Java or Kotlin for Android,
3. C++ or WinRT or C# for Windows 10.
The major appeal of React Native is because it enables quicker development and
implementation.
Reusable elements, interaction with third-party extensions, plus component-based GUI
creation for front-end apps
Features of React Native –
Exceptional performance
Components that can be reused
Compatibility with third-party extensions
Flutter
1. Flutter is an open and free framework from Google that allows you to create native
Android and iOS applications with a simple codebase.
2. It’s a ground-breaking SDK for cross-platform application development,
3. Contains widgets, a rendering engine, debugging and integrating APIs, and resources to
assist developers in creating and deploying beautiful mobile applications.
4. Flutter has been used by a number of well-known organizations, including Google and
Abbey Road Studios.
5. Features of Flutter –
a. More rapid development.
b. Cross-platform.
c. Visuals that are both appealing and engaging.
d. Performance that is pretty similar to that of a native
Xamarin
Xamarin is an alternative cross-platform application development framework for
developing applications for Android and iOS.
employ the C# programming language,
the applications need fewer lines of code
the process of coding is quicker.
rapidly transfer the scripts across other systems, such as Windows and macOS.
Xamarin-based apps deliver flawless native functionality about quality and efficiency.
its connection with Microsoft Visual Studio is a plus in terms of app development
management and productivity.
Features of Xamarin –
Rapid Advancement
Appearance and touch of a native app
Compatibility with a variety of devices
Apache Cordova
Apache Cordova, previously marketed as PhoneGap, is a popular developer-friendly
application development framework.
It’s a cross-platform application development framework that builds mobile apps using
CSS3, HTML5, and JavaScript.
The Cordova plugins allow programmers to utilize smartphone hardware features such as
GPS, cameras, and accelerometer to offer a native-like interface.
Apache Cordova’s prominent characteristics are a quicker production approach with a
single code plus third-party application administration tool.
Features of PhoneGap –
A single source of code
Streamlining the development procedure
App management methods from third parties
Ionic
Ionic is an explicit framework for crafting Progressive Web Apps (PWAs), hybrid, and
cross-platform mobile applications.
Ionic is an accessible framework that uses Apache Cordova (PhoneGap) plus Angular to
enable programmers to create Android and iOS applications
The framework aids developers in creating solid and feature-rich native apps.
The most prominent feature of Ionic would be that it lets programmers employ various UI
components in the application framework, including filtration, inputs, views, easy
navigation, and actions sheets.
Weighing the pros and cons of app development
Native app development
Pros:
Nonreusable code
Superior performance
Intuitive, customizable UX
Reduced productivity
Direct hardware access
Offline functionality
Built-in security
Cons:
Slower time to market
Limited audience reach
Higher costs
Hybrid app development
Pros:
Reusable code
Rapid time to market
Broad audience reach
Greater cost efficiencies
Offline functionality
Cons:
Slower performance
Inconsistent, non-customizable UX
Restricted hardware access
Increased security configurations
Cross-platform app development
Pros:
Reusable code
Rapid time to market
Robust performance
Close-to-native UX
Broad audience reach
Greater cost efficiencies
Cons:
Limited customization and personalization
Restricted hardware access
No offline functionality
Increased security configurations
6. PROGRESSIVE WEB APPS (PWAS)
https://www.geeksforgeeks.org/progressive-web-apps-benefits-components-and-how-it-works/ /
“Progressive Web App (PWA) is a term used to denote a new software development
methodology. Unlike traditional applications, progressive web apps are a hybrid of regular
web pages (or websites) and a mobile application. This new application model attempts to
combine features offered by most modern browsers with the benefits of mobile experience.”
-Wikipedia.org
A PWA is a website, which gives a feeling as if you are using a native mobile app. It is like
having an app on your phone without having to download or install it. Big companies have
already implemented this technology. Some famous examples are Instagram, Pinterest, Uber,
etc.
• Few examples
– Pinterest
• Pinterest is a unique social media platform designed to help people
– share creative ideas,
– find recipes,
– plan projects, etc
– Spotify
• The music-streaming company has thrived since it transitioned to PWA
technology.
The Spotify PWA is everything users expect from a progressive web application — it’s simple,
fast, reliable, and unobtrusive
• Telegram
– In 2021, the alternative communication app Telegram had approximately 500
millionregistered users.
– This cloud-based platform enables users to send secure messages, join chats,
and create threads
• Flipkart Lite:
– It provides a fast and seamless shopping experience for users on both mobile
and desktop devices.
Architecture of progressive Apps
• Server-side rendering:
– The first is server-side rendering (SSR). When you click on a PWA, the server
receives a request to find the suitable HTML files and page content and renders
it
• Client side
– client-side rendering (CSR) sends one request to the server.
From this, the entire skeleton of the PWA will be loaded, making for seamless navigation but a
longer initial loading time.
Service workers
– A service worker is a web worker
– implements a programmable network proxy that can respond to web/HTTP
requests of the main document.
– It is able to check the availability of a remote server and to cache content
– when that server is available, and serve that content later to the document.
– Service workers, like any other web workers, work separately from the main
document context.
– Service workers can handle
• push notifications and synchronize data in the background\
• cache or retrieve resource requests
• intercept network requests and receive centralized updates
• Service workers go through a three-step lifecycle
– Registration
– Installation
– Activation.
• Registration
– telling the browser the location of the service worker in
preparation for installation.
• Installation
– occurs when there is no service worker installed in the browser
for the web app, or
– if there is an update to the service worker.
• Activation
– occurs when all of the PWA's pages are closed,
– so that there is no conflict between the previous version and the
updated one.
• The lifecycle also helps
– maintain consistency when switching among versions of service worker
– only a single service worker can be active for a domain.
PWA brings a lot of benefits and functionality to the web, they don’t require rewriting
the entire application. Any app can be converted to a PWA by adding a few extra layers
to it.
Steps to create PWA :
Serve over HTTPS
Create an application shell
Register a Service Worker
Add push notifications
Add web app manifest
Configure the install prompt
Analyze your app’s performance
Audit your app with Lighthouse
Benefits
Besides providing a mobile-like experience to the users, a PWA has several other advantages.
Some of them are listed below:
1. Offline Usability
Have you ever noticed that even you are not connected to the internet, you can still access the
Whatsapp messages on your phone? You cannot send/receive messages but you can read the
previous messages and even type a reply as well. Once the internet is available on your phone,
your message gets delivered automatically. PWA offers you the exact same thing on the web.
Progressive Web pages enable you to connect to the website, even when you are offline
(provided the PWA was visited at least once before, in an online mode).
2. Page Loading Speed
A PWA loads faster than a normal website as PWA takes advantage of modern methods of
caching..
3. Installable
Just like a native app, a PWA can be installed locally on the device. They reside on the home
screen along with other native apps..
4. Automatic Background Sync
No need to install updates to access new features like a native app. As it is integrated with the
website, all new updates made to the website automatically syncs with the PWA stored locally
on the device.
5. SEO (Search Engine Optimization)
As PWA is technically a website, all SEO techniques can be used and implemented, to reach a
larger audience.
6. Platform Independent
As compared to native applications, which only run on their specific OS like Android or IOS, a
PWA runs anywhere as it runs on a browser.
What Makes a PWA?
A website uses the following three components to become a progressive web app. The three
components used are as follows :
1. Service Worker
A Service Worker is just a JavaScript code that works as a proxy between the browser and the
network. It helps to build an offline web application using the browser’s cache API. The App’s
performance increases because of that, no matter if you are connected to the internet or not.
2. Manifest File
The manifest file is basically a JSON file that has all the configuration and information of the
application, as the icon to be displayed on the home screen when installed, application name,
background color, theme, etc.
3. HTTPS
Service workers have the ability to intercept the network requests and can modify the
responses. Service workers perform all the actions on the client-side. Hence, PWA requires
secure protocol HTTPS.
How Does It Work?
Take an example of a native app. When we download and install them, critical resources like
UI components and some data are stored in the device, that’s why we can open them without
an internet connection.
PWA follows the same approach, when you install it, the PWA stores HTML files, CSS files,
and images in the browser cache and the developers can fully control the network call. Service
workers make all this possible.
Advantages :
Low Data Usage
No updates required
Low Cost
Best for SEO
Allowed to send push notifications
Can work in offline mode
Disadvantages :
Not a fully functional app
Poor compatibility
User will not get the native app experience
Progressive web apps launch from a user’s device without the need to open a web browser first
and they can send push notifications directly to your mobile device. They can also work offline
and load in a jiffy. PWAs are best defined as traditional websites in mobile app packaging.
In this way, they are not as interactive as a conventional web app nor as boring or inaccessible as
a standard website.
7. RESPONSIVE WEB DESIGN
T2 pg 45
when the browser window switches from a portrait to a landscape orientation, much of the
available screen real estate would go unused. Designing a web application so it properly renders
the application’s content across varying display widths or changing orientations is called
responsive design. responsive web design will automatically adjust for different screen sizes and
viewports. Responsive Web Design is about using HTML and CSS or CSS3 and HTML5.to
automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices
(desktops, tablets, and phones):
https://www.geeksforgeeks.org/short-note-on-responsive-web-design/
• Introduction to HTML:
– HTML stands for Hypertext Markup Language.
– It is used to structure content on the web.
– HTML elements are represented by tags enclosed in angle brackets.
Creating a Basic HTML Page:
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
HTML Elements and Tags:
Headings:
<h1> to <h6>
Eg <h1> HEADER <\h1>
Paragraph:
<p>
Eg <p> This is a paragraph<\p>
Links:
<a href="URL">Link Text</a>
Images:
<img src="image.jpg" alt="Image“>
Lists:
Ordered List:
<ol><li>Item 1</li><li>Item 2</li></ol>
Unordered List:
<ul><li>Item A</li><li>Item B</li></ul>
Forms:
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>
Semantic Elements:
<header>, <nav>, <main>, <article>, <section>, <footer>
CSS (Cascading Style Sheets)
Introduction to CSS
– CSS is used for styling HTML elements.
– It controls layout, colors, fonts, and more.
Internal CSS:
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
color: blue;
}
</style>
External CSS:
Create a separate .css file:
/* styles.css */
body {
font-family: Arial, sans-serif;
}
h1 {
color: blue;
}
Link it in HTML:
<link rel="stylesheet" href="styles.css">
How to check whether the Website is Responsive?
One should know that not all Websites are responsive. Non-responsive websites display
perfectly on desktop, laptop but not on mobile or tablets. Below are some steps given that one
can follow to determine whether website is responsive or not.
How to design a responsive Web Page in HTML
RWD can be obtained by 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).
https://www.w3schools.com/html/html_images_picture.asp
Creating a responsive webpage in HTML:
1. We can make our webpage responsive by adding a “viewport“.The viewport
does not have any fixed size. It changes according to the screen orientations and
sizes.HTML provides a <meta>tag for setting the viewport.
<meta name=’viewport’ content=’width=device-width, initial-scale=1.0′>
2. HTML Image Tags
Tag Description
<img> Defines an image
<map> Defines an image map
<area> Defines a clickable area inside an image map
<picture> Defines a container for multiple image resources
For displaying responsive images on the webpage, we can use the <picture>element
of HTML
Though using these tags can make your page responsive it’s always better to use
CSS framework and Bootstrap.
<img src="image file name" style="width:100%;">
3. Responsive Text Size
<h1 style="font-size:10vw">Hello World</h1> 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:
<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.
Example: In this example, we will design a responsive web
<!DOCTYPE html>
<html>
<head>
<meta name='viewport'
content='width=device-width, initial-scale=1.0'>
</head>
<body>
<div style="text-align: center;
background-color: green;">
<h1 style="color: white;">
Responsive Page Using Only HTML
</h1>
<h2 style="color: white;">
To make test responsive
</h2>
<p style="font-size: 5vw;color: white;">
This is a sample responsive web text
</p>
<picture>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190809013546/gfg_350X350.png"
alt="geeksforgeeks">
</picture>
</div>
</body>
</html>
Output: The title “Responsive Page Using Only HTML” does not change its size irrespective
of screen size but the text “This is a sample responsive web text” changes according to the
screen size.
