Mahavir Polytechnic, Nashik

(Year: 2024-2025)
Micro Project

Program: INFORMATION TECHNOLOGY (IT).

Semester: IF-5I (Fifth Semester).
Course: Client Side Scripting (CSS)
Course code: 22519

Title of the Project: CREATING A LOGIN PAGE USING CSS..

Members of the Group

1. Arya Ranjit Deshmukh Enrollment No.2205300143

1
 Mahavir Polytechnic

Vision
We strive to educate students to become industry ready engineers having professional attitude and
groomed personality.

Mission
M1. To provide well defined system toensure quality education by strengthening teaching
learningprocesses through innovative practices

M2. To provide a platform where students are exposed to the industry, up bridged with the
industrystandards and requirements.

M3. To train students by teaching them leadership and teamwork skills.

M4. To groom students enriching their personality and social values

IT Department

Vision
IT Department strives toeducate students to become Industry ready Engineers having Professional
attitude and groomed personality.

Mission
M1. To provides welldefined system to ensure quality education by strengthening teaching learning
processes through innovative practices.
M2. Toprovides a platform where students are exposed to the Industry, up bridged with the industry
standards and requirements.
M3. To train students by teaching them leadershipand teamwork skills.
M4. To groom students enriching their personality and social values.

2
 Part A

CREATING A LOGIN PAGE USING CSS.

1.0 Brief Introduction

A login page is a crucial component of many web applications, allowing users to securely access
their accounts. It typically includes fields for entering a username and password, along with a submit
button.

2.0 Aim/Benefit of the Micro-Project

 Aim of the Project:

1. User Authentication.
2. Enhanced Security.
3. User Experience Improvement.
4. Responsive Design.
5. Foundation for Advanced Features.

3.0 Course Outcomes Addressed.

 Create interactive web pages using program flow control structure.

 Implement Arrays and functions in Java script.
 Create event based web forms using Java Script.
 Use JavaScript for handling cookies.
 Create interactive webpage using regular expressions for validations.
 Create Menus and navigations in web Pages.

3
4.0 Proposed Methodology

Which Process & method follow.

• Which kind of information is required to know it.
• What u do in Client Side Scripting Language to know all.
• Lot of information include.
• Nearly analyzing everything about the environmental studies

4
 Progress Report / Weekly Report

Week Duration Sign of the

Date Work / Activity Performed
No in Hrs. Faculty

1 Selection topic

2 Finalizing topic

3 Information search

4 Making report

5 Project submission

5.0 Resources Required

S. No. Name of Resource/material Specifications Qty. Remarks

1 Ram 8GB 1

2 Hard disk 512GB 1

3 Processor I7 1

4 Operating system Windows 10pro 1

Sign of Course Teacher

5
 MICROPROJECT REPORT
CREATING A LOGIN PAGE USING CSS.

1.0 Rationale

Java is limited featured client side programming language. JavaScript runs at the client end
through theuser’s browser without sending message back and forth totheserver. It iswidelyused
bythewebdeveloperstodothingssuch asbuild dynamic web pages, respond to events, create
interactive forms, validate data that the visitor enters into a form, control the browser etc.
This coursehelps student to create highly interactive web pages using these features.

2.0 Aim/Benefits of the Micro – Project

1. Enhance Technical Skills: Improve proficiency in HTML, CSS, and JavaScript through hands-on practice in
building a web interface.

2. Implement User Authentication: Create a simple yet effective user authentication system that includes
client-side validation to ensure data integrity and enhance user experience.

3. Focus on User Experience: Design an intuitive and visually appealing interface that prioritizes usability,
ensuring that users can easily navigate the login process.

4. Incorporate Security Best Practices: Understand and implement basic security measures to protect user
data and mitigate common vulnerabilities associated with login forms.

5. Develop Responsive Design: Ensure the login page is fully responsive, providing a seamless experience
across various devices and screen sizes.

6. Integrate Asynchronous Functionality: Utilize AJAX to simulate server communication, allowing for real-
time feedback without page reloads, thereby improving the overall user experience.

7. Prepare for Future Projects: Lay a solid foundation for more complex web development tasks by
mastering the essential components of user authentication and interface design.

6
 COs addressed by the Micro Project:

Applying HTML, CSS, and JavaScript to build a web application.

CO 1 :
CO 2 : Handling challenges like user interactions and score calculation.

CO 3 : Gaining experience in planning and completing a web development project.

CO 4 : Laying the groundwork for more complex web development projects.

3.0 Literature Review

 Interactive Web Applications: Interactive features, like quizzes, enhance user engagement and learning
by providing immediate feedback.
 HTML, CSS, and JavaScript: HTML structures, CSS styles, and JavaScript adds interactivity to create
functional web applications.
 User Interface (UI) Design: Clear and simple UI design ensures easy navigation and usability for quiz users.
 Web Development Best Practices: Following coding standards and debugging guidelines ensures the quiz
game runs smoothly and is maintainable.

3.0Actual Methodology

1. Finalizing a topic for micro-project.

2. Approval of project topic from guide.
3. Preparing project proposal and submitting it.
4. Searching required information on internet.
5. Preparing a micro-project
6. Reporting to guide and verification of work done.
7. Preparing project report.
8. Submssion of Project report

7
5.0 Actual Resources Used

S. No. Name of Resource/material Specifications Qty. Remarks

1 Ram 8GB 1

2 Hard disk 512GB 1

3 Processor I7 1

Operating system Windows 10pro

4 1

8
9
 6.0 Outputs of the Micro-Projects
INTRODUCTION
 Web Development Micro Projects
 - Functional Websites: A fully functional website or web application (e.g., a personal portfolio, blog, or e-
commerce site).
- Responsive Design: A responsive layout that adapts to various screen sizes and devices.
- User Authentication System: A login page with user registration, password recovery, and secure
authentication features.
- Interactive Features: Implemented JavaScript features like form validation, modals, or dynamic content
updates.

 Data Analysis Micro Projects

- Data Visualizations: Charts, graphs, and dashboards created using tools like Tableau, Power BI, or
- Python libraries (e.g., Matplotlib, Seaborn).
- Reports: Comprehensive reports summarizing findings from data analysis, including insights and
recommendations.
- Predictive Models: Developed machine learning models for predictions based on datasets (e.g.,
regression models, classification algorithms).

 Mobile App Development Micro Projects

- Mobile Applications: A simple mobile app (e.g., to-do list, weather app) built for iOS or Android
platforms.
- User Interface Designs: Wireframes and prototypes created using tools like Figma or Sketch.
- App Store Submission: Successfully submitted apps to app stores with accompanying documentation.

 Content Creation Micro Projects

- Blog Posts or Articles: Written content on specific topics, including research and references.
- Social Media Campaigns: Designed graphics and content for social media platforms.
- Videos or Podcasts: Created multimedia content that informs or entertains.

 Advantages

 Interactive Learning: Engages users in a fun, hands-on way to test and improve their CSS knowledge.
 Simple Implementation: Uses basic HTML, CSS, and JavaScript, making it easy to build and maintain.
 Real-Time Feedback: Provides immediate scoring, allowing users to know their performance instantly.
 Responsive Design: The layout adjusts to different screen sizes, offering a smooth user experience.
 Customizable: Questions and styles can be easily updated or expanded for different topics or audiences.
 Minimal Resources: Requires no external libraries or frameworks, keeping the project lightweight and fast-
loading.

10
 Disadvantages

 Limited Functionality: The quiz is basic and doesn't offer advanced features like time limits or question
randomization.
 No Answer Review: Users cannot see which questions they got wrong or review correct answers after
submission.
 Static Content: The quiz content is hardcoded, making it difficult to add dynamic or randomized questions
without modifying the code.
 Single Attempt: Users can only submit the quiz once, with no option to retake or reset it without refreshing
the page.
 No Data Persistence: The scores aren't stored, so users can't track progress over multiple attempts.

11
 Input Code:-

<html>

<head>

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

<style>

<script> body, html {

height: 100%;

font-family: Arial, Helvetica, sans-serif;

*{

box-sizing: border-box;

.bg-img {

/* The image used */

background-image: url("csmss.jpg");

min-height: 650px;

/* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat;
background-size: cover;
position: relative;

/* Add styles to the form container */

12
.container { position: absolute; right: 0;
margin: 20px;

max-width: 300px; padding: 16px; background-color: white;

}

/* Full-width input fields */ input[type=text], input[type=password] { width: 100%;

padding: 15px; margin: 5px 0 22px 0; border: none;
background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus { background-color: #ddd;
outline: none;

/* Set a style for the submit button */

.btn {

background-color: #04AA6D; color: white;

padding: 16px 20px; border: none; cursor: pointer; width: 100%;
opacity: 0.9;

.btn:hover { opacity: 1;
}

</script>

</style>

</head
<body>

<h2>Form on Hero Image</h2>

<div class="bg-img">

<form action="/action_page.php" class="container">

13
<h1>Login</h1>

<label for="email"><b>Email</b></label>

<input type="text" placeholder="Enter Email" name="email" required>

<label for="psw"><b>Password</b></label>

<input type="password" placeholder="Enter Password" name="psw" required>

<button type="submit" class="btn">Login</button>

</form>

</div>
<p>This example creates a form on a responsive image. Try to resize the browser window to see how it
always will cover the whole width of the screen, and that it scales nicely on all screen sizes.</p>
</body>

</html>

14
 OUTPUT :

CONCLUSION

In this microproject of Microprocessor we have studied and analized the various method
and instructionof Assembly Language Program. After this we came on conclusion that
Assembly language helps programmersto write human-readable code that is almost similar to
machine language. Machine language is difficultto understand and read as it is just a series of
numbers. Assembly language helps in providing full control of
what tasks a computer is performing.

REFERENCE

 https://www.w3schools.com/Css/
 https://www.geeksforgeeks.org/css-tutorial/
 https://www.programiz.com/css
 https://www.coursera.org/courses?query=css
 7.0 Skill Developed / Learning outcome of this Micro-Project


 Team Management

• TeamManagement

• PersonalOrganization

• Taskmanagement

8.0 Applications of this Micro-Project

Educational Tools: Use it as a learning resource in web development courses to help students test their
CSS knowledge.
Skill Assessment: Implement it as a quick assessment tool for evaluating understanding of CSS concepts in
online or offline quizzes.
Interactive Demos: Incorporate it into portfolios or presentations to demonstrate basic web development
skills and create engaging content.
Training Exercises: Utilize it in workshops or training sessions to provide hands-on practice with CSS and
JavaScript.
Engagement Activities: Integrate it into websites or blogs to engage visitors with interactive content that
reinforces CSS knowledge.
 Teacher Evaluation Sheet for Micro Project
Rubrics for Assessment of Micro-Project
Poor Average Good Excellent
Characteristic to be
Sr. No (Marks 4-5) (Marks 6-8)
Assessed
(Marks 1-3) (Marks 9- 10)

1. Relevance to course
2. Literature survey
3. Project proposal
4. Completion of target
Analysis &
5.
representation of data
Quality of
6.
Prototype/Model
7. Report preparation
8. Presentation
9. Defense

Marks:-

Marks obtained
Marks for Total
by the
Roll No. Name Of Student Group Work individual based Marks
(06) on viva (04) (10)

53 Arya Ranjit Deshmukh

Name and designation of Faculty Member

Signature:
 Maharashtra State Board of Technical Education, Mumbai
CERTIFICATE
This is to certify that Mr.Arya Ranjit Deshmukh. Roll No.53. of 5th Semester of

Diploma in INFORMATION TECHNOLOGY of Mahavir Polytechnic has completed the

Micro Project satisfactorily in course CLIENT SIDE SCRIPTING (22519) for the

academic year2024-2025 as prescribed in the curriculum.

Place. Nashik Enrollment No .2205300143

Date Exam Seat No.

Mr.O.V.Khute Mrs.S.A.Pagare Dr.S.A.Sagare

(Course Coordinator) (HOD) (Principal)

Institute Seal