Internship Report On

“Web Development ”

Submitted by:

M. RANJITHKUMAR (21UJ1A1217)

DEPARTMENT OF

INFORMATION TECHNOLOGY

MENTOR: SANDIP GAVITH

 ACKNOWLEDGEMENT

I sincerely thank Mr. V. Barath Reddy, Director of Training and placement MREM, for
giving me permission to undergo my internship and training at Techno hacks,

I Would also thank Mr. Sandip Gavit for granting me permission to explore my
internship in such a great platform.

Secondly, I thank all the mentors of Techno hacks. Who helped me in getting the
programming done in Web development. I’m very grateful to all who have extended
their kind co-operation in the department.
 INTRODUCTION
This internship was my first real-world experience, allowing me to apply what I
learned in theory to practical situations. The 30-day training program provided me
with valuable insights and experiences that will benefit my future career.

The main reason I joined a well-known company as an intern was to understand how
professionals work and interact in a workplace. It helped me collaborate with
colleagues, boosted my confidence, improved my skills, and gave me a new
perspective on solving problems.

This report outlines what I observed and experienced during the internship. I learned
about responsibility, teamwork, and handling challenges. Even though my tasks were
simple, I gained a better understanding of how things are done in a professional
environment.

I also discovered how information flows between departments through the internet
and developed communication skills to assist others effectively.

The main goals of my internship were:

• Applying classroom knowledge to real-world scenarios.

• Building confidence and improving communication and teamwork.

• Learning how resources are shared in a workplace.

• Understanding networking and its technical details.

• Gaining knowledge about documentation, record-keeping, and security.

• Developing responsibility and good work habits.

This experience has been very valuable, and I am grateful for the chance to grow
professionally.
 OVERVIEW OF THE ORGANIZATION

TECHNOHACKS is a forward-thinking and innovative technology company

specializing in delivering cutting-edge software solutions and IT services to
businesses across various industries. Established with the mission to bridge the gap
between business needs and modern technology,
TECHNOHACKS is committed to providing reliable, scalable, and high quality
products tailored to meet the unique requirements of its clients.

Core Offerings:

1. Custom Software Development

TECHNOHACKS creates tailored software solutions that cater to specific business
requirements. Its team of skilled developers uses a wide array of programming
languages and frameworks to deliver secure, user-friendly, and scalable applications.

2. IT Consulting
The company offers strategic IT consulting services, helping businesses align their
technology infrastructure with operational goals, adopt the latest technologies, and
improve efficiency through optimized digital solutions.
3. Cloud Solutions
TECHNOHACKS provides robust cloud services, enabling businesses to manage,
store, and process data securely and cost-effectively. These services include cloud
application development, storage solutions, and seamless cloud migrations.

4. Cybersecurity
The company focuses on safeguarding businesses from cyber threats by offering
comprehensive cybersecurity solutions such as threat detection, secure networks,
encryption, and regular system vulnerability assessments.
5. Networking Services
TECHNOHACKS designs and implements advanced networking systems, ensuring
seamless and secure communication across businesses. This includes setting up
LANs, WANs, and VPNs to support efficient operations.

6. Digital Transformation
Helping businesses adapt to modern digital environments is a core focus of
TECHNOHACKS. Its services include process automation, cloud integration, and
data-driven decision-making tools to enhance productivity and innovation.
 Mission and Values:

• Mission: To empower businesses through innovative, cost-effective technology

solutions that drive growth, efficiency, and competitiveness.

• Core Values:

o Innovation: Staying at the forefront of industry trends to deliver cutting-edge

solutions.

o Quality: Ensuring excellence in every product and service.

o Customer-Centric Approach: Understanding client needs to deliver value-added,

tailored solutions.

o Integrity: Upholding honesty, transparency, and ethical practices in all operations.

o Collaboration: Promoting teamwork and partnerships to achieve the best outcomes

for clients.

Culture and Work Environment:

TECHNOHACKS fosters a collaborative and inclusive work culture that encourages

continuous learning and personal growth. Employees are provided with opportunities
to upskill and stay updated with the latest advancements in technology, contributing to
both personal and organizational success.

Vision for Growth:

As part of its expansion strategy, TECHNOHACKS is focused on growing its

footprint in domestic and international markets. The company is dedicated to helping
businesses of all sizes embrace digital transformation and achieve long-term success
through innovative technology solutions.

Conclusion:

TECHNOHACKS is a leading technology company that combines innovation,

quality, and customer satisfaction to deliver exceptional software and IT services.
With a strong focus on meeting evolving business needs, it has established itself as a
trusted partner for organizations looking to optimize their operations through
technology.
 Overview of Web Development Project
This project portfolio consists of three individual tasks designed to enhance your skills
in web development, particularly in UI/UX design, front-end technologies (HTML,
CSS, JavaScript), and functionality implementation. Each project focuses on different
aspects of web development, from building interactive user interfaces to working with
forms and responsive designs.
1. Calculator: The Calculator project was focused on building a functional web-based
calculator using HTML, CSS, and JavaScript. The project aimed to provide users with
basic arithmetic operations such as addition, subtraction, multiplication, and division
in an easy-to-use interface. The layout was designed to be simple and intuitive, and
the core functionality was powered by JavaScript. The project helped reinforce
concepts of DOM manipulation, event handling, and input validation, while also
enhancing the ability to create responsive and interactive user interfaces.
2. Amazon Landing Page Replica: The Amazon Landing Page Replica was a project
designed to practice UI/UX design principles and responsive web design. The goal
was to replicate the main sections of Amazon’s homepage, including a search bar,
product carousel, and navigation menus, with a focus on both the aesthetics and
functionality. The page was made fully responsive, ensuring it would look good on all
devices, from desktops to smartphones. The project also utilized modern CSS layout
techniques such as Flexbox and Grid to arrange the page elements, and JavaScript
was used to implement dynamic features like the carousel slider.
3. Netflix Login Form: The Netflix Login Form project involved designing a login
page that closely mirrors the Netflix user authentication form. The primary focus was
on creating a professional and aesthetically pleasing form with fields for email and
password inputs. JavaScript was used to implement input validation and error
handling, ensuring that users provide the correct information before submitting the
form. The project also emphasized clean and modern form design, with a focus on
providing useful error messages to improve the user experience.
 MODULES USED
• Modules for the Calculator
 HTML: Basic structure of the calculator (buttons, display, etc.).
 CSS: For styling the layout of the calculator, including button size, alignment, and
responsiveness.
 JavaScript: DOM manipulation: Accessing elements (buttons, display) and updating
the calculator’s output dynamically.

• Modules for Amazon Landing Page

 HTML: Structure of the page (search bar, carousel, featured products, etc.).

 CSS: To style and layout the page, including using Flexbox for alignment and
positioning.

 JavaScript: Managing event listeners for buttons or links (e.g., in a search bar).

• Modules for Netflix Login Form

 HTML: Structure of the login form (email, password fields, and submit button).
 CSS: Styling of the form, including layout, fonts, colors, and the visual appearance of
the form elements.
 JavaScript: Input validation: Ensuring the email is in the correct format and that the
password meets minimum length requirements.
 EXPLANATION

Task 1: Calculator

Objective:
Create a functional calculator with basic arithmetic operations, including addition,
subtraction, multiplication, and division, using HTML, CSS, and JavaScript.

Languages Used:

 HTML: Structure of the calculator interface.

 CSS: Styling and layout of the calculator buttons and display.

 JavaScript: Implementing calculator functionality (operations and event handling).

Description:
The goal of this project was to develop a simple, responsive, and interactive calculator
application. Users can click on the buttons to perform basic arithmetic operations. The
layout was designed to be intuitive, and a clean interface ensured that the user
experience was smooth. Using HTML and CSS, the buttons were styled, and
JavaScript was used to handle the logic behind each button click, ensuring that the
correct operation was performed.

 Key Features:

o Input buttons for numbers and operations.

o A display screen showing the result of calculations.

o Clear and delete buttons for resetting inputs.

Key Learnings:

 DOM Manipulation: Understanding how to interact with HTML elements through

JavaScript, especially handling events like button clicks.

 Responsive Design: Ensuring that the layout works across various screen sizes and
devices using CSS (e.g., media queries).
Task 2: Amazon Landing Page

Objective:

Design a replica of the Amazon landing page to practice UI/UX design and implement
responsive web design techniques.

Languages Used:

HTML: Structure of the page, including header, product sections, search bar, and
footer.

CSS: Styling and layout to make the page visually appealing and responsive.

JavaScript: Adding dynamic behavior, such as a carousel slider for featured products.

Description:

This project involved replicating the Amazon landing page with a focus on the main
sections such as the search bar, product listings, and navigation menus. The design was
responsive, adapting to various screen sizes, and visually attractive, making use of
layout techniques like CSS Grid and Flexbox. JavaScript was used to create a dynamic
product carousel slider and enhance user interaction, like filtering search results or
navigating the page.

Key Features:

A fully responsive layout that adjusts to different devices (desktops, tablets,

smartphones).

Dynamic product carousel to display featured products.

Navigation bar with hover effects and dropdown menus.

Search bar functionality.

Key Learnings:

Grid and Flexbox Layouts: Mastery of CSS Grid and Flexbox for building complex
layouts that adapt to various screen sizes.
 Task 3: Netflix Login Form

Objective:
Design and implement a Netflix-style login form with input validation, error handling,
and a clean, modern design.

Languages Used:

 HTML: Structure for the login form, including input fields for the user’s credentials.

 CSS: Styling the form to look aesthetically pleasing and match Netflix’s design style.

 JavaScript: Adding input validation for the email and password fields, including error
messages for incorrect inputs.

Description:
The Netflix login form project aimed at creating a simple yet professional form that
users can use to input their credentials. It included fields for email and password, with
validation for correct formats. JavaScript was employed to check whether the email
followed the correct pattern (using regular expressions) and to ensure the password
met the required criteria. If an error occurred, such as an invalid email format or empty
fields, an error message was displayed to guide the user. CSS was used to style the
form with modern aesthetics, ensuring a user-friendly experience.

 Key Features:

o Email and password input fields.

o Input validation to check for correct email format and password strength.

o Error messages that prompt users when the input is invalid.

o A clean and modern design resembling Netflix's login form.

Key Learnings:

 Input Validation: Mastering how to check and validate user inputs, ensuring data is
correct before submission.

 Error Handling: Understanding how to display error messages dynamically based on

user input, making the interface more interactive.

 Pseudo-classes: Using CSS pseudo-classes to style the form inputs when focused,
hovered, or invalid.
 CODE

1. Calculator
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.calculator {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
.display {
font-size: 2rem;
width: 100%;
padding: 10px;
text-align: right;
margin-bottom: 20px;
background-color: #f5f5f5;
border: none;
border-radius: 5px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
 }
button {
padding: 20px;
font-size: 1.5rem;
border: none;
background-color: #f5f5f5;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.2s ease;
}
button:hover {
background-color: #ddd;
}
button:active {
background-color: #bbb;
}
</style>
</head>
<body>
<div class="calculator">
<input type="text" class="display" id="display" disabled>
<div class="buttons">
<button onclick="clearDisplay()">C</button>
<button onclick="appendToDisplay('7')">7</button>
<button onclick="appendToDisplay('8')">8</button>
<button onclick="appendToDisplay('9')">9</button>
<button onclick="appendToDisplay('/')">/</button>
<button onclick="appendToDisplay('4')">4</button>
<button onclick="appendToDisplay('5')">5</button>
<button onclick="appendToDisplay('6')">6</button>
<button onclick="appendToDisplay('*')">*</button>
<button onclick="appendToDisplay('1')">1</button>
<button onclick="appendToDisplay('2')">2</button>
<button onclick="appendToDisplay('3')">3</button>
<button onclick="appendToDisplay('-')">-</button>
<button onclick="appendToDisplay('0')">0</button>
<button onclick="appendToDisplay('.')">.</button>
<button onclick="calculateResult()">=</button>
<button onclick="appendToDisplay('+')">+</button>
</div>
</div>
 <script>
function clearDisplay() {
document.getElementById('display').value = '';
}
function appendToDisplay(value) {
document.getElementById('display').value += value;
}
function calculateResult() {
let expression = document.getElementById('display').value;
try {
document.getElementById('display').value = eval(expression);
} catch (e) {
document.getElementById('display').value = 'Error';
}
}
</script>
</body>
</html>

2. Amazon Landing Page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Amazon Landing Page</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #131921;
padding: 20px;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 2rem;
}
 .search-bar input {
padding: 10px;
font-size: 1rem;
width: 300px;
}
.carousel {
display: flex;
overflow: hidden;
width: 100%;
margin-top: 20px;
}
.carousel img {
width: 100%;
transition: transform 1s ease-in-out;
}
.carousel-container {
position: relative;
}
.carousel-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 10px;
cursor: pointer;
}
.carousel-button.prev {
left: 10px;
}
.carousel-button.next {
right: 10px;
}
</style>
</head>
<body>
<header>
<div class="logo">Amazon</div>
<div class="search-bar">
<input type="text" placeholder="Search Amazon" />
</div>
</header>
<div class="carousel-container">
<div class="carousel" id="carousel">
<img src="https://via.placeholder.com/1200x500?text=Featured+Product+1" alt="Product 1">
 <img src="https://via.placeholder.com/1200x500?text=Featured+Product+2" alt="Product 2">
<img src="https://via.placeholder.com/1200x500?text=Featured+Product+3" alt="Product 3">
</div>
<button class="carousel-button prev" onclick="prevSlide()">❮</button>
<button class="carousel-button next" onclick="nextSlide()">❯</button>
</div>
<script>
let currentIndex = 0;
function nextSlide() {
const carousel = document.getElementById('carousel');
currentIndex = (currentIndex + 1) % 3;
carousel.style.transform = `translateX(-${currentIndex * 100}%)`;
}
function prevSlide() {
const carousel = document.getElementById('carousel');
currentIndex = (currentIndex - 1 + 3) % 3;
carousel.style.transform = `translateX(-${currentIndex * 100}%)`;
}
</script>
</body>
</html>

3. Netflix Login Form

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Netflix Login</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #141414;
color: white;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-container {
background-color: rgba(0, 0, 0, 0.7);
 padding: 40px;
border-radius: 10px;
width: 300px;
}
.input-field {
width: 100%;
padding: 12px;
margin: 10px 0;
border: none;
border-radius: 5px;
font-size: 1rem;
}
.submit-btn {
background-color: #e50914;
color: white;
padding: 12px;
border: none;
width: 100%;
border-radius: 5px;
font-size: 1.2rem;
cursor: pointer;
}
.submit-btn:hover {
background-color: #f40612;
}
.error {
color: red;
font-size: 0.9rem;
}
</style>
</head>
<body>
<div class="login-container">
<h2>Netflix Login</h2>
<form id="loginForm">
<input type="email" id="email" class="input-field" placeholder="Email" required>
 <input type="password" id="password" class="input-field"
placeholder="Password" required>
<button type="submit" class="submit-btn">Login</button>
</form>
<p id="errorMessage" class="error"></p>
</div>
<script>
document.getElementById('loginForm').addEventListener('submit', function(event) {
event.preventDefault();
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const errorMessage = document.getElementById('errorMessage');
if (!email.match(emailPattern)) {
errorMessage.textContent = 'Please enter a valid email address.';
return;
}
if (password.length < 6) {
errorMessage.textContent = 'Password must be at least 6 characters long.';
return;
}
errorMessage.textContent = ''; // Clear error message
alert('Login successful!');
});
</script>
</body>
</html>

OUTPUTS
 CONCLUSION

The three projects completed during this internship—the Calculator, Amazon Landing
Page Replica, and Netflix Login Form—have been crucial in enhancing both my
technical capabilities and design sensibilities. Each project focused on different
aspects of web development, providing valuable experience in HTML, CSS, and
JavaScript. The internship allowed me to improve my skills in both front-end
development and UI/UX design, while also teaching me how to create dynamic,
responsive, and user-friendly web pages.
The Calculator project was instrumental in building my understanding of JavaScript,
particularly in terms of handling user inputs, performing arithmetic operations, and
manipulating the DOM. I gained practical experience in event handling and
dynamically updating the user interface, which improved my problem-solving skills
and attention to detail. The project also taught me the importance of clean, functional
designs, as the user experience needed to be intuitive and responsive.
The Amazon Landing Page Replica allowed me to dive deeper into responsive web
design. By utilizing CSS Grid and Flexbox, I was able to create a flexible, responsive
layout that adapts to different screen sizes. This project also enhanced my JavaScript
skills, especially in creating interactive elements such as the product carousel. The
experience emphasized the importance of UI/UX design, reinforcing the need to
create visually appealing and user-friendly interfaces that prioritize usability across
devices.
Finally, the Netflix Login Form project taught me the importance of input validation
and error handling in web development. I learned how to validate email formats and
password lengths, ensuring proper user input before submission. The project also
highlighted the significance of user feedback, as clear and concise error messages
improve user experience. The overall focus was on designing a clean, modern
interface that aligns with best practices in form design and validation.
I extend my heartfelt gratitude to TechnoHacks EduTech for providing this opportunity
and to Mr. V. Bharat Reddy, Director of Training and Placement, MREM for fostering
an environment that encourages professional growth through internships.