Index

Sr. No. Contents Page No.

Annexure I– Micro Project Proposal 1-2

1.Aims/Benefits of the Micro-Project 1

2. Course Outcome Addressed 1

1 3.Proposed Methodology 1

4. Action Plan 2

5. Resources Required 2

6. Name of Team Members with Roll No.’s 2

Annexure II – Micro Project Report 3-12

1.Rationale 3

2.Aims/Benefits of the Micro-Project 3

3.Course Outcome Achieved 3

4. Literature Review 3-4

2 5.Actual Methodology Followed 4-10

5.1 Flow chart 4

5.2 Source code 5-10

6.Actual Resources Used 10

7.Outputs of Micro-Projects 10-12

8. Skill developed / Learning out of this Micro-Project 12

9. Applications of this Micro-Project 12

0
 Annexure –I

Micro-Project Report

Mobile Specs Info

1. Aims/Benefits of the Micro-Project:

1. Develop a website that provides users with comprehensive and up-to-date information
about the specifications of different mobile phones.
2. Gain experience in developing web applications using HTML and CSS.
3. Improve web development skills.

2. Course Outcome Addressed:

1. CO1- Creating interactive web pages using program flow control structure.
2. CO2- Implement Arrays and functions in Java Script.
3. CO3- Create event based forms using Java Script.
4. CO4- Create interactive webpage using regular expressions for validations.

3. Proposed Methodology:
The following methodology is proposed for the development of the website:
1. Requirements gathering: The developer will conduct surveys and interviews with users to
understand their needs and requirements for the website.
2. Design: The developer will create a wireframe and prototype of the website to get
feedback from users.
3. Development: The developer will develop the website using HTML and CSS, following
the best practices for web development.
4. Testing: The developer will test the website thoroughly to ensure that it is working as
expected and that it is accessible to all users.
5. Deployment: The developer will deploy the website to a web server so that it can be
accessed by users.
This methodology is designed to ensure that the website meets the needs of the users and that it
is developed using best practices for web development.

1
4. Action Plan:

Sr. Planned Planned Finish Name of Responsible

No. Details of Activity Start date date Team Members
1 Search the topic 08/08/82023 09/08/2023

2 Search the information 22/08/2023 23/08/2023

3 Algorithm developing 05/09/2023 06/09/2023

4 Flowchart developing 12/09/2023 13/09/2023

Nalwade Kunal
5 Function making 26/09/2023 27/09/2023

6 Coding developing 03/10/2023 04/10/2023

7 Debugging 10/10/2023 11/10/2023

8 Finalizing Project with its 17/10/2023 18/10/2023

report

5. Resources Required:

Sr.
No. Name of resource / material Specification Quantity Remarks

1 Computer WINDOWS 11,8GB 1

RAM, 512GB SSD
2 Operating System WINDOWS 11 1

3 Compiler VS CODE 1

4 Browser Chrome 1

6. Names of Team Members with Roll No.’s:

Sr.
No. Enrollment No. Name of Team Member Roll No.

1 2110950065 Mr. Nalwade Kunal Nitin 33

Ms. Kachare S. M.

Name and Signature of the Teacher

2
 Annexure – II

Micro-Project Report

Mobile Specs Info

1. Rationale:
Mobile phones have become an essential part of our lives. We use them for everything from
communication and entertainment to business and productivity. As a result, there is a growing
demand for information about mobile phone specifications.

This micro-project aims to create a website that provides users with comprehensive and up-
to-date information about the specifications of different mobile phones. The website will be
developed using HTML and CSS, which are two of the most fundamental web development
technologies.

2.Aims/Benefits of the Micro-Project:

1. Develop a website that provides users with comprehensive and up-to-date information
about the specifications of different mobile phones.
2. Gain experience in developing web applications using HTML and CSS.
3. Improve web development skills.

3. Course Outcomes Achieved:

1. CO1- Creating interactive web pages using program flow control structure.
2. CO2- Implement Arrays and functions in Java Script.
3. CO3- Create event based forms using Java Script.
4. CO4- Create interactive webpage using regular expressions for validations.

4. Literature Review:
There are a number of existing websites that provide information about mobile phone
specifications. However, many of these websites are outdated or incomplete. Additionally, some of
these websites are difficult to navigate and use.

This micro-project will aim to create a website that overcomes the shortcomings of existing
websites. The website will be developed using the latest web development technologies and will be
designed to be user-friendly and easy to navigate..

5.Actual Methodology Followed:

The following methodology will be followed to develop the website:
1. Requirements gathering: The developer will gather requirements from users to understand
what information they need and how they want to access it.
2. Design: The developer will design the website's layout and user interface.
3. Development: The developer will develop the website using HTML and CSS.
3
 4. Testing: The developer will test the website to ensure that it is working properly and that it
meets the requirements of the users.
5. Deployment: The developer will deploy the website to a web server so that it can be
accessed by users.

5.1 Source code :

<!DOCTYPE html>
<html lang="en">
<head>
<title>Main Page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
<style>
body,h1,h2,h3,h4,h5 { font-family: "Poppins", sans-serif}
body {font-size:16px;}
.w3-half img{margin-bottom:-6px;margin-top:16px;opacity:0.8;cursor:pointer}
.w3-half img:hover{opacity:1}
</style>
</head>
<body>

<!-- Sidebar/menu -->

<nav class="w3-sidebar w3-red w3-collapse w3-top w3-large w3-padding" style="z-index:3;width:300px;font-
weight:bold;" id="mySidebar"><br>
<a href="javascript:void(0)" onclick="w3_close()" class="w3-button w3-hide-large w3-display-topleft"
style="width:100%;font-size:22px">Close Menu</a>
<div class="w3-container">
<h3 class="w3-padding-64"><b>Mobile Specs<br>Info</b></h3>
</div>
<div class="w3-bar-block">
<a href="#" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Home</a>
<a href="#showcase" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Showcase</a>
<a href="#services" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Services</a>
<a href="#designers" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Designers</a>
<a href="#packages" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Premiums</a>
<a href="#contact" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Contact us</a>
<a href="#review" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Review</a>
</div>
</nav>

<!-- Top menu on small screens -->

<header class="w3-container w3-top w3-hide-large w3-red w3-xlarge w3-padding">
<a href="javascript:void(0)" class="w3-button w3-red w3-margin-right" onclick="w3_open()">☰</a>
<span>Mobile Specs Info</span>
</header>

<!-- Overlay effect when opening sidebar on small screens -->

<div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer" title="close side menu"
id="myOverlay"></div>

<!-- !PAGE CONTENT! -->

<div class="w3-main" style="margin-left:340px;margin-right:40px">

4
 <!-- Header -->
<div class="w3-container" style="margin-top:80px" id="showcase">
<h1 class="w3-jumbo"><b>Mobile</b></h1>
<h1 class="w3-xxxlarge w3-text-red"><b>Brands</b></h1>
<hr style="width:50px;border:5px solid red" class="w3-round">
</div>

<!-- Photo grid (modal) -->

<div class="w3-row-padding">
<div>
<img src="C:\Users\vvrn\Desktop\html\s short.jpg" style="width:16%" onclick="Sam()" alt="Samsung">
<img src="C:\Users\vvrn\Pictures\mi short2.jpg" style="width:16%" onclick="onClick(this)" alt="MI">
<img src="C:\Users\vvrn\Desktop\html\i short.jpg" style="width:16%" onclick="onClick(this)" alt="Infinix">
<img src="C:\Users\vvrn\Desktop\html\on short.png" style="width:16%" onclick="onClick(this)" alt="oneplus">
<img src="C:\Users\vvrn\Desktop\html\a short.png" style="width:16%" onclick="onClick(this)" alt="Iphone">
<img src="C:\Users\vvrn\Desktop\html\vshort.png" style="width:16% ;" onclick="onClick(this)" alt="Vivo">
</div>
</div>

<!-- Modal for full size images on click-->

<div id="modal01" class="w3-modal w3-black" style="padding-top:0" onclick="this.style.display='none'">
<span class="w3-button w3-black w3-xxlarge w3-display-topright">×</span>
<div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-padding-64">
<img id="img01" class="w3-image">
<p id="caption"></p>
</div>
</div>

<!-- Services -->

<div class="w3-container" id="services" style="margin-top:75px">
<h1 class="w3-xxxlarge w3-text-red"><b>Services.</b></h1>
<hr style="width:50px;border:5px solid red" class="w3-round">
<p>Our variety of services, including:

<br>- <b>detailed specifications for mobile devices:</b> This includes basic information such as the device name,
manufacturer, model number, operating system, and release date, as well as more detailed specifications such as the
display, processor, memory, storage, camera, battery, and connectivity options.
<br>- <b>Comparison tools: </b>These tools allow users to compare the specifications of multiple mobile devices
side-by-side, making it easier to choose the best device for their needs.
<br>- <b>Reviews:</b> Mobile specs info websites often publish reviews of the latest mobile devices, providing
their readers with insights into the devices' strengths and weaknesses.
<br>- <b>News and updates:</b> These websites also keep their readers informed about the latest news and updates
in the mobile industry, such as new device releases, software updates, and carrier promotions.
<br>- <b>Forums and communities:</b> Some mobile specs info websites also have forums and communities where
users can discuss mobile devices and ask questions.
<br>
In addition to these core services, our mobile specs info websites may also offer additional services such as:

<br>- <b>Price comparisons:</b> These tools allow users to compare the prices of mobile devices from different
retailers.
<br>- <b>Deals and promotions:</b> These websites may also publish deals and promotions on mobile devices and
accessories.
<br>- <b>Device compatibility checker:</b> This tool allows users to check if a particular mobile device is
compatible with a particular app or service.
<br>- <b>Troubleshooting guides: </b>These guides can help users to troubleshoot problems with their mobile
devices.

</p>
</div>

5
 <!-- Designers -->
<div class="w3-container" id="designers" style="margin-top:75px">
<h1 class="w3-xxxlarge w3-text-red"><b>Designers.</b></h1>
<hr style="width:50px;border:5px solid red" class="w3-round">
<p><i>The best Designer in the world.</i></p>
<p>This website was designed and developed by <b>Kunal Nalwade</b>, a talented and experienced web designer.
Kunal Nalwade is passionate about creating websites that are both visually appealing and user-friendly.
</p>
<p><b>Our designers are thoughtfully chosen</b>:</p>
</div>

<!-- The Team -->

<div class="w3-row-padding w3-grayscale">
<div class="w3-col m4 w3-margin-bottom">
<div class="w3-light-grey">
<div class="w3-container">
<h3>Kunal Nalwade</h3>
<p class="w3-opacity">CEO & Founder</p>
<p>The best CEO<br> in the world.</p>
</div>
</div>
</div>
<div class="w3-col m4 w3-margin-bottom">
<div class="w3-light-grey">
<div class="w3-container">
<h3>Bard AI</h3>
<p class="w3-opacity">Designer</p>
<p>Google's AI used for theming the page</p>
</div>
</div>
</div>
<div class="w3-col m4 w3-margin-bottom">
<div class="w3-light-grey">
<div class="w3-container">
<h3>W3.Schools</h3>
<p class="w3-opacity">Architect</p>
<p>Referred for minor and major problems</p>
</div>
</div>
</div>
</div>

<!-- Packages / Pricing Tables -->

<div class="w3-container" id="packages" style="margin-top:75px">
<h1 class="w3-xxxlarge w3-text-red"><b>Premiums.</b></h1>
<hr style="width:50px;border:5px solid red" class="w3-round">
<p> <br>- <b>Ad-free browsing:</b> Premium users can enjoy an ad-free browsing experience, which can be a major
improvement for mobile users who are often bombarded with ads.
<br>- <b>Access to exclusive content:</b> Premium users may have access to exclusive content, such as in-depth
reviews, comparisons, and analysis of mobile devices.
<br>- <b>Advanced search features:</b> Premium users may have access to advanced search features, such as the
ability to filter search results by specific criteria or to save search queries for later use.
<br>- <b>Early access to new content:</b> Premium users may have early access to new content, such as reviews of
new devices or comparisons of upcoming devices.
<br>- <b>Personalized recommendations:</b> Premium users may receive personalized recommendations for mobile
devices based on their preferences.
<br>- <b>Priority customer support:</b> Premium users may receive priority customer support, which means that
their questions and requests will be handled first.</p>

6
 </div>

<div class="w3-row-padding">
<div class="w3-half w3-margin-bottom">
<ul class="w3-ul w3-light-grey w3-center">
<li class="w3-dark-grey w3-xlarge w3-padding-32">Basic</li>
<li class="w3-padding-16">Ad-free browsing</li>
<li class="w3-padding-16">Priority customer support</li>
<li class="w3-padding-16">Early access to new content</li>
<li class="w3-padding-16">personalizedrecommendations <b style="color: red;">X</b></li>
<li class="w3-padding-16">Advanced search features <b style="color: red;">X</b></li>
<li class="w3-padding-16">
<h2>199 INR</h2>
<span class="w3-opacity">per Account</span>
</li>
<li class="w3-light-grey w3-padding-24">
<button class="w3-button w3-red w3-padding-large w3-hover-black">Sign Up</button>
</li>
</ul>
</div>

<div class="w3-half">
<ul class="w3-ul w3-light-grey w3-center">
<li class="w3-red w3-xlarge w3-padding-32">Pro</li>
<li class="w3-padding-16">Ad-free browsing</li>
<li class="w3-padding-16">Priority customer support</li>
<li class="w3-padding-16">Early access to new content</li>
<li class="w3-padding-16">personalized recommendations</li>
<li class="w3-padding-16">Advanced search features</li>
<li class="w3-padding-16">
<h2>249 INR</h2>
<span class="w3-opacity">per Account</span>
</li>
<li class="w3-light-grey w3-padding-24">
<button class="w3-button w3-red w3-padding-large w3-hover-black">Sign Up</button>
</li>
</ul>
</div>
</div>

<!-- Contact -->

<div class="w3-container" id="contact" style="margin-top:75px">
<h1 class="w3-xxxlarge w3-text-red"><b>Contact Us.</b></h1>
<hr style="width:50px;border:5px solid red" class="w3-round">
<p>Do you want us to add your device ? Fill out the form and fill me in with the details :) We Appreciate your
Choice</p>
<form action="/action_page.php" target="_blank">
<div class="w3-section">
<label>Name</label>
<input class="w3-input w3-border" type="text" name="Name" required>
</div>
<div class="w3-section">
<label>Email</label>
<input class="w3-input w3-border" type="text" name="Email" required>
</div>
<div class="w3-section">
<label>Your Device</label>
<input class="w3-input w3-border" type="text" name="Message" required>
</div>

7
 <button type="submit" class="w3-button w3-block w3-padding-large w3-red w3-margin-bottom"
onclick="O()">Send Message</button>

</form>
</div>

<!--review -->
<div class="w3-container" id="review" style="margin-top:75px">
<h1 class="w3-xxxlarge w3-text-red"><b>Review.</b></h1>
<hr style="width:50px;border:5px solid red" class="w3-round">
<p> Fill out the form and fill me in with the details :) We Appreciate your Reviews</p>
<form action="/action_page.php" target="_blank">
<div class="w3-section">
<label>Review</label>
<input class="w3-input w3-border" type="text" name="Name" required>
</div>
<button type="submit" class="w3-button w3-block w3-padding-large w3-red w3-margin-bottom"
onclick="O()">Send Message</button>
</form>
</div>
<!-- End page content -->
</div>

<!-- W3.CSS Container -->

<div class="w3-light-grey w3-container w3-padding-32" style="margin-top:75px;"><h3 style="text-align:
center;padding-left: 27%;">THANK YOU</h3><p class="w3-right">Copyrights &copy; <a href="" title="W3.CSS"
target="_blank" class="w3-hover-opacity">2023</a></p></div>

<script>
// Script to open and close sidebar
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
document.getElementById("myOverlay").style.display = "block";
}

function w3_close() {
document.getElementById("mySidebar").style.display = "none";
document.getElementById("myOverlay").style.display = "none";
}

// Modal Image Gallery

function onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
var captionText = document.getElementById("caption");
captionText.innerHTML = element.alt;
}
function Sam(){
window.open("file:///C:/Users/vvrn/Desktop/kunal/s%20main.html","","");
}
function O(){
window.open("file:///C:/Users/vvrn/Desktop/kunal/thank%20you.html","","");
}
</script>

</body>
</html>

8
 6. Actual Resources Used:

Sr. Name of resource /

Specification Quantity Remarks
No. material
1 Computer WINDOWS 11, 8GB 1
RAM, 512GB SSD
2 Operating System WINDOWS 11 1
3 Compiler VS CODE 1
4 Browser Chrome 1

7. Outputs of Micro-Projects:

9
10
8. Skill developed / Learning out of this Micro-Project:
There are so many thing that we learn from this project of
1. I have learnt that how to make the project in Advance Java programming.
2. How to do the testing of program in VS CODE.
3. How to collect the information and how to make the presentation that we learn from
this project.
4. I have learnt how to use all the swing components and functions.
9. Applications of this Micro-Project:
1. Retail businesses
2. Wholesale businesses
3. Manufacturing businesses
4. Warehouses
5. Distribution centers

*********
11