WEB DEVELOPMENT INTERNSHIP

A SUMMER INTERNSHIP REPORT

Submitted by

SANJAY RAMAIYA.RM -721422243054

in partialfulfillmentfor the award of the degree

Of

BACHELOR OF TECHNOLOGY

IN

ARTIFICIAL INTELLIGENCE AND DATA SCIENCE

NEHRU INSTITUTE OF ENGINEERING AND TECHNOLOGY

(AUTONOMOUS)

COIMBATORE-641105

ANNA UNIVERSITY : CHENNAI 600 025

DECEMBER 2024

1
 BONAFIDE CERTIFICATE

Certified that this Internship report “WEB DEVELOPMENT INTERNSHIP” is the

bonafide work of “SANJAY RAMAIYA.RM” who carried out the project work
under my supervision.

SIGNATURE SIGNATURE

Dr.V T Krishna Prasath Mrs.Abhirami J S

HEAD OF THE DEPARTMENT INTERNAL GUIDE

Assistant Professor
Assistant Professor
Department of Artificial
Intelligence and Data Science Department of Artificial

Intelligence and Data Science

Nehru Institute of Engineering and
Nehru Institute of Engineering and
Technology
Coimbatore-641105 Technology Coimbatore-641105

2
 ACKNOWLEDGEMENT

At this pleasing moment of successful completion of summer internship,

We thank God Almighty for his blessings.
We convey my sincere thanks to our respected Founder Chairman Late
Shri. P.K. DAS, Chairman and Managing Trustee Adv. Dr. P
KRISHNADAS and CEO & Secretary Dr. P. KRISHNAKUMAR who
provided the facilities for me to complete the summer internship
successfully.

We express my deep gratitude to our beloved and honourable Principal, Dr.

P. MANIIARASAN for his valuable support.
We owe grateful and significant thanks to Dr. V T Krishna Prasath, our
Head of Department, Artificial intelligence and data science, and my
sincere thanks to our internal guide Ms.Abhirami J S,Assistant Professor /
AI&DS. who has given constant support and encouragement throughout the
completion of my course and my summer internship work.
We thankful for the support and guidance from all the Faculty of Artificial
Intelligence and Data Science Department and sincere thanks to my
supporting staff for their timely assistance. Finally, We would like to
express my gratitude towards my parents for their motivation and support
which helped me in the completion of summer internship.

3
 INTERNSHIPCERTIFICATE & DETAILS

has successfully completed the 04 weeks Internship In

Web Development Internship at SystemTron from
22-OCT-2024 to 18-NOV-2024.

Codec Technologies is a forward-thinking company specializing in innovative solutions

robotics, automation, and software development. With a strong focus on leveraging
technologies such as Artificial Intelligence (AI), Machine Learning (ML), and the
Internet of Things (IoT), Codec Technologies delivers scalable and efficient systems
tailored to meet the needs of diverse industries. The company excels in creating custom
automation solutions, integrating intelligent tools, and developing software that
enhances operational efficiency. By prioritizing sustainability and cutting-edge
innovation, Codec Technologies is empowering businesses to stay ahead in a rapidly
evolving technological landscape.

4
 TABLE OF CONTENTS

CHAPTER NO. TITLE PAGE NO.

ABSTRACT 6

1 INTRODUCTION 7

1. MOTIVATION
2. OBJECTIVE OF INTERNSHIP

3. ROLE OF HTML
2
LITERATURE SURVEY 10
3
INTRODUCTION TO HTML 11

1. TEXT FORMATTING

2. LISTS: ORDERED AND UNORDERED

3. LINKS AND IMAGES

4
CREATING FORMS 15

1. FORM STRUCTURE

2. DROPDOWN LISTS
5
DATAVISUALIZATION 19
1. CREATING TABLES

2. EMBEDDING MULTIMEDIA
6 INTRODUCTION TO CSS

6.1 BASIC CSS STYLING

7 TASKS AND PRACTICE PROJECTS 27

8 FINAL PROJECT 24
CONCLUSION 31
9
10 REFERENCES 32

5
 ABSTRACT

This internship report provides a comprehensive analysis of the transformative learning

experience gained at SystemTron, emphasizing the critical interplay between modern
web development practices and user-centric design principles. Through a hands-on,
one-month internship, the author explores foundational concepts, practical
implementations, and emerging trends in the realm of front-end development.

The report begins by outlining the fundamental principles of web development,

focusing on core technologies such as HTML, CSS, and JavaScript, while highlighting
the integration of responsive design and cross-browser compatibility techniques. It
delves into the progressive application of frameworks and libraries, showcasing their
role in enhancing development efficiency and creating dynamic, interactive user
interfaces.

Further, the report examines the practical applications of web development within real-
world projects undertaken during the internship. It details the systematic process of
developing scalable and visually engaging websites, emphasizing the importance of
code optimization, debugging, and performance tuning. Case studies from the
internship illustrate the strategic implementation of best practices, fostering seamless
user experiences and meeting client specifications.

Additionally, the report evaluates the significance of version control systems like Git,
collaborative workflows, and iterative development in achieving project milestones
efficiently. It underscores the value of mentorship and feedback in honing technical
skills and broadening the understanding of industry standards.

This internship report not only highlights the technical proficiency gained but also
reflects on the broader professional development, including the cultivation of problem-
solving abilities, adaptability, and a growth mindset essential for thriving in the
dynamic field of web development.

6
 CHAPTER 1
INTRODUCTION

Web development is a cornerstone of the digital age, transforming how individuals and
organizations interact with technology and access information. It involves the creation,
design, and maintenance of websites and applications, combining aesthetics,
functionality, and user experience to deliver seamless digital interactions. Leveraging
programming languages, frameworks, and advanced tools, web development enables the
design of visually appealing and highly interactive platforms tailored to diverse needs.
As a rapidly evolving field, it is driven by innovations such as responsive design,
progressive web applications, and AI-driven functionalities, ensuring websites remain
efficient, secure, and accessible across devices. Web development bridges the gap
between creativity and technology, empowering businesses to establish a robust online
presence, enhance user engagement, and streamline operations. From crafting e-
commerce platforms to building educational portals, it plays a pivotal role in shaping
digital solutions that address the dynamic demands of modern society, fostering
innovation, communication, and growth in an interconnected world.

1.1 MOTIVATION
The motivation behind pursuing web development lies in the recognition that websites
and web applications are essential tools for communication, commerce, and
innovation in the digital age. In a rapidly advancing technological landscape,
organizations are motivated to adopt web development practices to enhance their
online presence and meet evolving user expectations.
Web development provides the means to create dynamic, responsive, and user- friendly
platforms that bridge the gap between businesses and their audiences. Companies are
driven by the need to engage customers, streamline operations, and offer seamless
experiences that align with their strategic objectives.
The flexibility and scalability of modern web technologies motivate businesses to
innovate and adapt to changing market demands. By leveraging

7
frameworks, libraries, and cloud-based solutions, organizations can rapidly develop
and deploy solutions that address real-time challenges and opportunities. This
adaptability is critical in a digital-first world where competition is fierce, and user
expectations are ever-growing.
Additionally, the motivation to excel in web development stems from the desire to
remain competitive and future-proof. As technology continues to evolve, businesses
invest in web development to explore emerging trends such as Progressive Web
Apps (PWAs), headless architecture, and serverless computing. These innovations
not only enhance user experiences but also optimize resource utilization and
scalability.
Furthermore, the increasing availability of development tools, APIs, and
collaborative platforms motivates developers to push the boundaries of creativity
and efficiency. The rise of artificial intelligence and automation in web
development has opened doors to smarter workflows, faster delivery, and more
personalized user experiences. These advancements drive a deeper commitment to
mastering web development as a key enabler of success in the digital economy.

1.2 OBJECTIVE OF INTERNSHIP

This web development internship is designed to equip participants with a
comprehensive skill set at the intersection of front-end and back-end development,
fostering expertise in creating dynamic, user-centric websites and applications. The
overarching goal is to provide interns with a hands-on, practical learning
experience that extends beyond classroom knowledge. Interns aspire to enhance
their programming proficiency, mastering languages such as HTML, CSS,
JavaScript, and frameworks like React and Node.js, while gaining expertise in
utilizing development tools and version control systems. The program emphasizes
the practical application of web development principles in building responsive,
scalable, and visually appealing web solutions, enabling interns to contribute
meaningfully to ongoing projects. Furthermore, interns seek to deepen their
understanding of user experience (UX) and user interface (UI) design, fostering the
ability to create intuitive and efficient digital products. Effective collaboration and
problem-solving skills are honed as interns work within development teams, and
exposure to real-world client requirements and deadlines contributes to their
professional growth. Ultimately, the internship serves as a platform for interns to
explore career paths, build portfolios, and contribute to the success

8
of web development initiatives through innovative and efficient coding practices.

1.3 ROLE OF HTML

HTML (HyperText Markup Language) is the fundamental building block of web

development, playing a crucial role in structuring the content and layout of
websites. As the standard markup language for creating web pages, HTML allows
developers to define the structure of a webpage using various elements such as
headings, paragraphs, images, links, tables, forms, and more. These elements help
organize content in a way that is readable and accessible to both users and search
engines. HTML serves as the backbone for web development, ensuring that content
is displayed correctly on different devices and browsers.
The primary role of HTML is to provide the skeleton of a web page, where CSS
(Cascading Style Sheets) and JavaScript are then used to enhance the page's design
and functionality. By using semantic HTML elements, developers can create more
accessible and SEO-friendly web pages. For example, elements like <header>,
<footer>, and <article> help define the different sections of a webpage, improving
the user experience and making it easier for search engines to index content.
Additionally, HTML enables the integration of multimedia, such as images, videos,
and audio, enhancing the interactive and engaging aspects of a website. It also
supports the use of forms, allowing users to input data and interact with the web
application. As the foundation for responsive web design, HTML ensures that
content adapts seamlessly across different screen sizes and devices. Without
HTML, the creation of modern websites and web applications would be impossible,
making it an essential tool for any web developer.

9
 CHAPTER 2

LITERATURE SURVEY

The field of web development has seen rapid advancements, driven by technological
innovations and changing user needs. HTML, the foundational language for structuring
web content, has evolved significantly over time. HTML5, the latest version,
introduced new semantic elements, multimedia support, and better mobile
responsiveness, making it essential for modern web applications. Research by the W3C
emphasizes HTML5’s importance in creating accessible, cross-platform web
experiences.
CSS, the language responsible for styling web pages, has also advanced with the
introduction of CSS Grid and Flexbox. These tools allow for more flexible and
responsive layouts, improving the user experience across devices. Studies highlight the
growing need for responsive design, ensuring a seamless browsing experience on
various screen sizes.
JavaScript remains a core technology in web development, particularly with the rise of
libraries and frameworks such as React, Angular, and Vue.js. These frameworks enable
the development of dynamic, single-page applications (SPAs) that offer a smoother
user experience. Research by web development experts such as Addy Osmani indicates
that these tools help developers manage complex projects more efficiently through
component-based architectures.
On the backend, Node.js has gained popularity for its ability to handle asynchronous
requests, supporting scalable applications. Serverless computing, powered by platforms
like AWS Lambda, offers flexibility and cost savings, making it an attractive option for
developers.
With growing concerns about web security, the adoption of best practices such as
HTTPS and data encryption has become essential to protect user data and ensure secure
browsing. Understanding these key technologies and methodologies is fundamental for
building effective and user-friendly web applications.

10
 CHAPTER 3
HTMLElements

1. TEXT FORMATTING: Headings and Paragraphs

- HTML lets you structure text. The main ways are headings and paragraphs.
-Headings are like titles for sections. They range from '<h1>' to '<h6>', with '<h1>'
being the biggest.
-Headings help organize the content hierarchically, with <h1> representing the most
important title, followed by decreasing importance through <h2> to <h6>. These tags
not only structure the text but also enhance the page's accessibility and search engine
optimization (SEO). Paragraphs, defined by the <p> tag, are used to group related
sentences together, making content more digestible for readers. Proper use of headings
and paragraphs improves the clarity and organization of web pages, ensuring that
content is both visually appealing and easy to navigate for users.

Example:
'"html
<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>

- Paragraphs are used for regular text. You enclose text in '<p>' tags.
Example:
'''html
<p>This is a paragraph of text. It can be as long as you want.</p>

3.2 LISTS: Ordered and Unordered

- Lists help organize items. There are two main types: ordered and unordered.
- For ordered lists, use '<ol>'. Each item is '<li>'.

11
- In HTML, lists are used to group related items together, enhancing the organization
and readability of content. There are two main types of lists: ordered lists (<ol>) and
unordered lists (<ul>). An ordered list is used when the sequence or order of the items
matters, such as in step-by-step instructions or rankings. Each item within the ordered
list is defined using the <li> (list item) tag, and the list is automatically numbered by
the browser. On the other hand, an unordered list is used when the order of the items is
not important, such as in a list of features or ingredients. In this case, the items are
typically displayed with bullet points rather than numbers. Both types of lists help
structure content, making it easier for users to read and follow. Additionally, lists can
be nested within each other to create more complex structures, providing further
flexibility in organizing content. Proper use of ordered and unordered lists ensures a
clear and visually appealing presentation of information.

Example:
'''html
<ol>
<li>First item</li>
<li>Second item</li>
</ol>

- For unordered lists, use '<ul>'. Each item is '<li>'.

Example:
SYSTEMTRO

'''html
<ul>
<li>Apples</li>
<li>Bananas</li>
</ul>

12
3.3 LINKS AND IMAGES

- Links are how you navigate to other web pages.

- Use '<a>' with the 'href attribute to specify the URL.
-In HTML, links and images are essential elements for creating interactive and visually
engaging web pages. Links, defined using the <a> tag, allow users to navigate between
pages or external websites by specifying the target URL in the href attribute. Links can
also be styled using CSS to create visually appealing buttons, navigation menus, or
hyperlinks that connect related content across different sections of a website.
Additionally, links can be used to trigger specific actions like submitting forms or
opening a new window using the target attribute.
Images are embedded using the <img> tag, which requires the src attribute to specify
the image source and the alt attribute to provide alternative text for accessibility. The
alt text serves as a description of the image for users who may not be able to view it,
ensuring inclusivity for individuals with visual impairments. Proper image formatting,
including the use of attributes like width and height, helps ensure that images load
correctly and maintain responsive layouts across different devices and screen sizes.
In addition to providing visual content, images can also enhance the overall user
experience by making a website more engaging and informative. For example, using
images to illustrate concepts, showcase products, or display portfolio work can
significantly improve the impact of a page. Furthermore, images should be optimized
for fast loading to improve website performance and search engine rankings.
By properly using links and images in HTML, web developers can create more
engaging, user-friendly websites that offer better accessibility, faster navigation, and
visually appealing content. These elements are fundamental for enhancing both
functionality and design, ensuring that users have a seamless experience across all
devices and platforms.
alt text for images enhances accessibility, ensuring that users with visual impairments
can still understand the content. By optimizing these elements, web developers can
create more engaging, informative, and user-friendly web pages.

13
Example:
'''html
<a href=Mhttps://www.example.comM>Visit Example.com</a>

- To display images, use the '<img>' tag.

- Add the ' src' attribute to specify the image file's location.
Example:
'"html
<img src="image.jpg" alt="A beautiful image">

- Comments are notes for you and others; they don't show on the webpage.
-Wrap comments with '<!--' at the start and '-->' at the end.
Example:
'''html
<!-- This is a comment. It won't appear on the page. -->

Line Breaks and Horizontal Rules

-To create a new line without starting a new paragraph, you can use '<br>'.
Example:
'''html
<p>This is some text.<br>This is on a new line.</p>

- To insert a horizontal line, use '<hr>'.

Example:
'''html
<p>Some text before<hr>and some text after the horizontal line.</p>

14
 CHAPTER 4

CREATING FORMS

HTML forms are essential elements for collecting user input on web pages, enabling
interaction between the user and the website. Forms are defined using the <form> tag,
which serves as a container for various input elements such as text fields, radio
buttons, checkboxes, and submit buttons. The action attribute specifies the URL where
the form data should be sent for processing, while the method attribute defines how the
data is submitted (typically using GET or POST methods).
The most common input elements include the <input> tag, which can be used for
various types of data, such as text, email, password, and numbers. Other form
elements like <textarea> are used to gather multi-line text input, while <select> and
<option> tags allow users to choose from predefined options in a dropdown list. Each
input element can have associated attributes, such as placeholder for hints or required
to ensure that specific fields are filled before submission.
Buttons, such as the <button> or <input type-’submit'’>, are used to trigger form
submissions. Additionally, forms can include validation attributes like minlength,
maxlength, and pattern, ensuring that the user input meets specific criteria before
being submitted. JavaScript can also be used to enhance form functionality, enabling
real-time validation and providing feedback to users without needing to reload the
page.
HTML forms are crucial for creating interactive web applications, allowing users to
submit data for purposes like registration, login, searching, or feedback. Properly
designing and validating forms ensures data integrity, improves user experience, and
enhances the overall functionality of web pages. Moreover, integrating secure
practices like SSL encryption for form submissions helps protect sensitive
information.
HTML forms allow users to input data, and they are an essential part of many
websites. In this chapter, we will explore how to create and use HTML forms. Let's
break it down into simple language and examples:

15
4.1 FORM STRUCTURE

Form Structure ('<form>' element):

A form is like a container for various input elements. It's created using the
'<form>' element. Here's how you make a basic form:

'''html

<form>

<!-- Input elements go here -->

</form>

Text Input Fields ('<input type="text">):

Text input fields are where users can type text. You define them using the
'<input>' element with the 'type' attribute set to "text".

Here's an example:

'''html

<form>

<label for="username">Username:</label>

<input type="text" id="username" name="username">

</form>

In this example, the 'label' element provides a label for the input field. The 'for'
attribute links it to the 'id' of the input element for accessibility.
Radio Buttons and Checkboxes:
Radio buttons and checkboxes allow users to choose options. Radio buttons let users
select one option from a list, while checkboxes allow multiple selections.

16
Here's an example of radio buttons and checkboxes:

'''html

<form>

<p>Choose your gender:</p>

<input type-’radio" id-’male" name="gender" value="male">

<label for="male">Male</label>

<input type="radio" id="female" name="gender" value="female">

<label for="female">Female</label>

<p>Select your hobbies:</p>

<input type="checkbox" id="reading" name="hobby" value="reading">

<label for="reading">Reading</label>

<input type="checkbox" id="cooking" name-’hobby" value-’cooking">

<label for="cooking">Cooking</label>

</form>

4.2 DROPDOWN LISTS

Dropdown lists let users choose from a list of options. Use the '<select>' element to
create the dropdown and '<option>' elements for each option:

'''html

<form>

<label for="country">Select your country:</label>

<select id="country" name="country">

<option value="usa">United States</option>

17
<option value="canada">Canada</option>

<option value="uk">United Kingdom</option>

</select>

</form>

T ext Areas (' <textarea>'):

Text areas are for longer text inputs like comments or messages.

Here's an example:

'''html

<form>

<label for="comments">Comments:</label>

<textarea id="comments" name="comments" rows="4" cols="50"></textarea>

</form>

Form Submission ('<input type="submit">):

The submit button allows users to send the form data to a server. Here's how you add
it:

'''html

<form>

<!-- Other input elements -->

<input type="submit" value="Submit Form">

</form>

When the user clicks the "Submit Form" button, the data from the form is sent to a
server for processing.

18
 CHAPTER 5

DATAVISUALIZATION

5.1 CREATING TABLES

HTML tables are used to organize and display data in a structured format, making it
easier for users to read and compare information. The <table> tag defines the start of a
table, and it is used in combination with other tags such as <tr>, <td>, and <th> to
define the rows, cells, and headings of the table. Each row of the table is defined by
the <tr> tag, and within each row, individual data cells are created using the <td>
(table data) tag. The <th> tag is used to define header cells, typically appearing at the
top of the table, to describe the content of each column or row.
Tables can be enhanced with various attributes and styles to improve readability and
presentation. For example, the border attribute adds a border around the table, while
CSS can be used to style the table for better visual appeal. Using CSS, web developers
can adjust the width, height, and alignment of the table and its content, ensuring that it
fits within the overall design of the web page. Tables can also be made responsive by
using CSS techniques like max-width and overflow, allowing them to adapt to
different screen sizes and devices.
In addition to basic formatting, tables in HTML can be used to display complex data
such as financial reports, schedules, and product listings. When structuring data, it is
important to use semantic elements like <thead>, <tbody>, and <tfoot> to clearly
define the header, body, and footer of the table, which enhances both readability and
accessibility. By organizing data in a logical way, tables ensure that users can easily
find and interpret the information they need.
HTML tables play a crucial role in presenting structured data in a way that is clear,
concise, and accessible. Whether for displaying lists, charts, or complex datasets,
tables are indispensable for organizing information on a website and ensuring a
positive user experience.

Creating tables (<table>) :

HTML tables are used to display structured data. You

can create a table using the '<table>' element.

19
<th>Header 2</th>

</tr>

<tr>

<td>Data 1 </td>

<td>Data 2</td>

</tr>
</table>

Table data cells (<td>) : Table data cells contain the actual data within the table. You
use the '<td>' element inside a row to create a data cell.
Example:

'''html

<table>

<tr>
<th>Header 1 </th>

<th>Header 2</th>

</tr>

<tr>

<td>Data 1 </td>

<td>Data 2</td>

</tr>

</table>

Table captions (<caption>) : A table caption is used to provide a title or description

for the table. It's placed just after the opening '<table>' tag.

20
Example:

'''html

<table>

<caption>Monthly Expenses</caption>

<tr>

<th>Category</th>
<th>Amount</th>

</tr>

<tr>

<td>Rent</td>

<td>$800</td>
</tr>

</table>

In summary, HTML tables are used to organize data into rows and columns. You
create tables using '<table>', organize data into rows with '<tr>', label columns or
rows using '<th>', and place actual data in cells with '<td>'. You can also provide a
title or description for the table using the '<caption>' element. Tables are a
fundamental part of displaying structured information on a web page.

5.2 EMBEDDING MULTIMEDIA

Embedding audio and video:

You can add audio and video files to your webpage so that visitors can play them
without leaving the page.

21
Example for video:

'''html

<video width="320" height=M240M controls>

<source src="example.mp4" type="video/mp4">

Your browser does not support the video tag.

</video>

Embedding iframes:
An iframe is like a little window on your webpage that can display content from
another website, like Google Maps.

Example:

'''html

<iframe
src="https://www.google.com/maps/embed?pb=! 1m18! 1m12! 1m3!1d2530...">
Your browser does not support iframes.
</iframe>

These features help make your website interactive and engaging. Hyperlinks connect
information, and multimedia content like audio, video, and iframes bring your web
pages to life. It's like adding the finishing touches to your website to make it
informative and fun for your visitors.

22
 CHAPTER 6

INTRODUCTION TO CSS

CSS (Cascading Style Sheets) is a styling language used to control the visual
presentation of HTML elements. It allows developers to define the layout, colors,
fonts, spacing, and positioning of content on a web page, making it an essential tool
for creating visually appealing, well-structured, and responsive websites. By
separating the content (HTML) from the design (CSS), developers can ensure
consistent styling across multiple pages and improve the overall user experience.
CSS also supports advanced features like animations, transitions, and media queries,
enhancing interactivity and adaptability to different screensizes.
6.1 BASIC CSS STYLING
You can make your lists look more appealing by applying some basic CSS styles.
For example, you can change the font, color, or spacing of your list items.

'''html

<style>

ul {

list-style-type: square; color: blue;

}
</style>

Inline CSS vs. External CSS:

- Inline CSS is applied directly to the HTML elements. For instance:

'''html

<p style="color: red;">This is a red paragraph .</p>

23
- External CSS is stored in a separate CSS file and linked to the HTML
document. It helps maintain consistency and makes your code cleaner.

'''html

<!-- In your HTML file -->

<link rel="stylesheef ’ type="text/css" href="styles.css">

CSS Classes and IDs:

CSS classes and IDs allow you to target specific elements for styling. You
define them in your HTML and then apply styles in your CSS file.

HTML:

'''html

<p class="important">This is an important paragraph. </p>

CSS:

'''css

.important { font-weight: bold;

color: red;

IDs are similar but unique to a single element.

You define them with 'id' and apply styles using '#'.

HTML:

'''html

<p id="unique-paragraph">This is a unique paragraph. </p>

24
CSS:

'''css

#unique-paragraph {
font-style: italic;
color: blue;

The CSS is an indispensable tool in web development, providing the means to create
aesthetically pleasing and functional designs. By allowing developers to control the
layout, typography, and responsiveness of web pages, CSS ensures that websites are
both visually engaging and user-friendly. With its ability to support advanced
features like animations, transitions, and responsive design, CSS plays a vital role in
enhancing the user experience across different devices and screen sizes. Its
flexibility and power make it a fundamental skill for web developers in building
modern, dynamic websites.

25
 CHAPTER 7
TASKS AND PRACTICE PROJECTS

TASK 1 : SIMPLE CALCULATOR

HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calculator">
<input type="text" class="display" id="display" readonly>
<div class="buttons">
<button onclick="clearDisplay()">C</button>
<button onclick="appendValue('7')">7</button>
<button onclick="appendValue('8')">8</button>
<button onclick="appendValue('9')">9</button>
<button onclick="appendValue('/')">/</button>
<button onclick="appendValue('4')">4</button>
<button onclick="appendValue('5')">5</button>
<button onclick="appendValue('6')">6</button>
<button onclick="appendValue('*')">x</button>
<button onclick="appendValue('1')">1</button>
<button onclick="appendValue('2')">2</button>
<button onclick="appendValue('3')">3</button>
<button onclick="appendValue('-')">-</button>
<button onclick="appendValue('0')">0</button>
<button onclick="appendValue('.')">.</button>
<button onclick="calculate()">=</button>
<button onclick="appendValue('+')">+</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

26
CSS Code:

body {
font-family: Arial, sans-
serif;
background-color: #dfdff3;
margin: 0; padding: 0;
display: flex; justify-content:
center; align-items: center;
height: 100vh;
}

.calculator {
background-color:
#373668;
border-radius: 5px; box-
shadow: 0 2px 5px rgba(0,
0, 0, 0.1); padding: 20px;
width: 300px;
}

.display { width: 100%;

height: 40px; margin-
bottom: 10px; padding:
5px; font-size: 1.5em;
text-align: right;
}

.buttons { display: grid;

grid-template-columns:
repeat(4, 1fr); grid-gap:
5px;
}

button { padding: 10px;

font-size: 1.2em;
border: none; border-
radius: 5px; cursor:
pointer;

27
 background-color:
#a2a1bf;
transition: background-color
0.3s;
}

button:hover {
background-color:
#e0e0e0;
}

JavaScript Code:

let currentValue = ''; let

currentOperator = ''; let result =
'';

function
{
appendValue(value)
currentValue += value;

document.getElementById('di
splay').value = currentValue;
}

function clearDisplay() {
currentValue = '';
currentOperator = ''; result = '';

document. getEl ementById('d

isplay').value = '';
}

function calculate() { try {

result = eval(currentValue);

document. getEl ementById('d

isplay').value = result;
currentValue =
result.toString();
} catch (error) {

document.getElementById('di
splay').value = 'Error';
}
}

28
Output :

TASK 2 : NETFLIX CLONE WEBSITE

CODE:
<!DOCTYPE html>
<html lang=Mpt-brM>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style/main.css">
<!--responsividade-->
<link rel="stylesheet" href="style/responsive.css">
<!--owl css-->
<link rel="stylesheet" href="style/owl/owl.carousel.min.css">
<link rel="stylesheet" href="style/owl/owl.theme.default.min.css">
<title>NETFLIX CLONE</title>
</head>
<body>
<header>

29
 <div class="container">
<h2 class="logo">NETFLIX</h2>
<nav>
<a href="#">Inicio</a>
<a href="#">Series</a>
<a href="#">Filmes</a>
<a href="#">Documentarios</a>
</nav>
</div>
</header>
<main>
<div class="filme-principal">
<div class="container">
<h3 class="titulo">HOUSE OF CARDS</h3>
<p class="descricao">Nada pode impedir o politico sem escrupulos Frank
Underwood de conquistar Washington. Assista agora a nova temporada de House of
Cards que esta imperdivel.</p>
<div class="botoes">
<button role="button" class="botao">
<i class="fas fa-play"></i>
ASSISTIR AGORA

</button>
<button role="button" class="botao">
<i class="fas fa-info-circle"></i>
MAIS INFORMAgOES

</button>
</div>
</div>

30
 </div>
</main>
<div class="carrosel-filmes">
<div class="owl-carousel owl-theme">
<div class="item">
M

<img class="box-filme" src="img/mini1.jpg" alt="" srcset

</div>
<div class="item">

<img class="box-filme" src="img/mini2.jpg" alt="" srcset

</div>
<div class="item">
M

<img class="box-filme" src="img/mini3.jpg" alt="" srcset

</div>
<div class="item">

<img class="box-filme" src="img/mini4.jpg" alt="" srcset

</div>
<div class="item">
M

<img class="box-filme" src="img/mini5.jpg" alt="" srcset

</div>
<div class="item">
M

<img class="box-filme" src="img/mini6.jpg" alt="" srcset

</div>
<div class="item">
M

<img class="box-filme" src="img/mini7.jpg" alt="" srcset

</div>
<div class="item">
<img class="box-filme" src="img/mini8.jpg" alt="" srcset ""></div>
<div class="item">

31
 <img class-'box-filme" src=Mimg/mini9.jpgM alt="" srcset=MM>
</div>
<div class="item">
<img class="box-filme" src="img/mini10.jpg" alt="" srcset="">
</div>
</div>
</div>
<script src="https://kit.fontawesome.com/2c36e9b7b1.js"></script>
<script src="js/owl/jquery.min.js"></script>
<script src="js/owl/owl.carousel.min.js"></script>
<script src="j s/owl/setup.j s"></script>
</body>
</html>

OUTPUT :

32
 CHAPTER 8
FINAL PROJECT

CONNECT-FOUR GAME

HTML CODE:

<!DOCTYPE html>
<html lang=MenM>
<head>
<meta charset=MUTF-8M>
<meta http-equiv=MX-UA-CompatibleM content=MIE=edgeM>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-
scalable=no">

<title>Connect 4</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<div class="crdd">
<h1>Connect 4</h1>
<h2 id="winner"></h2>
<div id="board"></div>
</div>
</body>
</html>

33
CSS CODE:

body {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: rgb(255, 255, 255)}

.crdd{
background-color: rgb(67, 70, 83);
background-size: auto; height: 100vh;}

#board { height:
540px; width:
630px;
background-color: rgb(0, 0, 0); border:
10px solid navy; margin: 0 auto; display:
flex; flex-wrap: wrap;}

.tile {
height: 70px; width: 70px; margin: 5px;
background-color: white; border-radius:
50%; border: 5px solid navy;}

.red-piece {
background-color: red;}

.yellow-piece { background-
color: yellow;}

34
JAVASCRIPTCODE :

var playerRed = "R"; var playerYellow = "Y"; var currPlayer =

playerRed;

var gameOver = false; var board;

var rows = 6; var columns = 7;

var currColumns = []; //keeps track of which row each column is at.

window.onload = function() { setGame();

}

function setGame() { board = [];

currColumns = [5, 5, 5, 5, 5, 5, 5];

for (let r = 0; r < rows; r++) { let

row = [];
for (let c = 0; c < columns; c++) {
// JS
row.push(' ');
// HTML
let tile = document.createElement("div"); tile.id =
r.toString() + "-" + c.toString();
tile.classList.add("tile");
tile.addEventListener("click", setPiece); document.
getElementById("board").append(tile);
}

board.push(row);
}
}

function setPiece() { if (gameOver) { return;

35
 }
}
}
}
function setWinner(r, c) {
let winner = document.getElementById("winner"); if
(board[r][c] == playerRed) { winner.innerText =
"Red Wins";
} else {
winner.innerText = "Yellow Wins";
}

gameOver = true;
}

OUTPUT :

36
 CHAPTER-8
CONCLUSION

In conclusion, my internship at SystemTron in the field of web development has been

an incredibly rewarding and educational experience. It has provided me with the
opportunity to apply my theoretical knowledge in a practical setting, enhancing my
skills in building responsive and interactive web applications. The hands-on projects
and tasks I undertook allowed me to deepen my understanding of core web
technologies such as HTML, CSS, JavaScript, and various development frameworks.
One of the key objectives of this internship was to bridge the gap between academic
learning and real-world web development practices. I gained valuable experience in
designing, coding, and testing websites, and my proficiency in front-end development
has grown significantly. The tasks I worked on not only strengthened my technical
abilities but also allowed me to contribute meaningfully to live projects, making the
learning process even more impactful.
Collaborating with the team at SystemTron has been an eye-opening experience,
giving me insight into the collaborative and fast-paced nature of the web development
industry. The teamwork, feedback, and constant exchange of ideas have significantly
improved my communication and problem-solving skills, which are essential in the
tech industry.
As I reflect on the journey over the past month, I have come to appreciate the
importance of continuous learning and adaptability in web development. The rapid
advancements in technologies and design trends have sparked my interest in keeping
up with industry developments and improving my skills further.
This internship has been a crucial stepping stone in my career as a web developer. It
has equipped me with practical knowledge, technical expertise, and a deeper
understanding of how web development projects are executed in a professional
setting. I am confident that the lessons learned and the experience gained during this
internship will serve as a strong foundation for my future growth in the ever-evolving
world of web development.

37
 CHAPTER 9
REFERENCES

Books:
1. Jon Duckett, HTML and CSS: Design and Build Websites:
[https: //www.htmlandcssbook.comKhttps: //www.htmlandcssbook.com)

2. Jon Duckett, JavaScript and JQuery: Interactive FrontEnd Web Development:

(https://iavascriptbook.com)

3. Ethan Marcotte, Responsive Web Design:

[https://abookapart. com/products/responsivewebdesign]

4. Kyle Simpson, You Don't Know JS (Book Series):

[https://github.com/getify/YouDontKnowJS]

Websites:
1. Mozilla Developer Network (MDN) - https://developer.mozilla.org/
2. W3Schools - https://www.w3schools.com/
3. CSS-Tricks - https://css-tricks.com/
4. FreeCodeCamp - https://www.freecodecamp.org/
5. Stack Overflow - https://stackoverflow.com/

Tutorial Platforms:
1. Udemy - https://www.udemy.com/
2. Coursera - https://www.coursera.org/
3. Codecademy - https://www.codecademy.com/

38