lOMoARcPSD|33377442

Web development report

B.tech (Dr. A.P.J. Abdul Kalam Technical University)

Studocu is not sponsored or endorsed by any college or university

Downloaded by Aanand Pandit ([email protected])
 lOMoARcPSD|33377442

SUMMER INTERNSHIP REPORT

on

WEB DEVELOPMENT

by

NEHA GUPTA (1900320210170)

Submitted to the Department of Electrical and Electronics Engineering

in partial fulfillment of the requirements

for the degree of

Bachelor of Technology

in

Electrical and Electronics Engineering

ABES Engineering College, Ghaziabad

Dr. APJ Abdul Kalam Technical University, Uttar Pradesh, Lucknow, November 2022

Downloaded by Aanand Pandit ([email protected])

 lOMoARcPSD|33377442

ACKNOWLEDGEMENT

The internship opportunity I had with CodeSpeedy Technology PVT. LTD. was a great chance
for learning and professional development. Therefore, I consider myself as an incredibly lucky
individual as I was provided with an opportunity to be a part of it. Bearing in mind previous, I
am using this opportunity to express my deepest gratitude and special thanks to the
Mr. SARAQUE AHAMED MOLLICK who despite being extraordinarily busy with her/his
duties, took time out to hear, guide and keep me on the correct path and allowing me to carry
out my project at their esteemed organization and extending during the training.

I would also like to thank to Dr. AMIT AGRAWAL (Head of Department, Electrical &
Electronics Engineering), Mrs. RIYA DEB (Assistant Professor), Mr.KULDEEP SINGH
(Assistant Professor) and faculty members of the department, who often helped and gave me
guidance to prepare my report.

Last but not the least, I would like to thank my colleagues who helped me a lot in gathering
information, collecting data and guiding me from time to time in making this project despite of
their busy schedules, they gave me different ideas in making this project unique.

Downloaded by Aanand Pandit ([email protected])

 lOMoARcPSD|33377442

SUMMER TRAINING CERTIFICATE

Downloaded by Aanand Pandit ([email protected])

 lOMoARcPSD|33377442

ABSTRACT
This report is the reflection and also the journey of my one-month internship period along with
the highlights of what I learned through errors, work responsibilities, and the importance of
internship program at CodeSpeedy Technology Private Limited. The knowledge I have gained
as a new developer on front end development, new frameworks, and also how to work in an
office environment is splendid. As an intern, my work was to learn and focus on web
development projects. In this report, I have focused my work territory and explain my
achievements which I have got through my internship at CodeSpeedy Technology Private
Limited. The challenge associated with web development is that the tools and techniques used
to create the front end of a website change constantly and so the developer needs to constantly
be aware of how the field is developing.

This report provides an overview of web development and its associated technologies. It
examines the current state of the industry, common web development frameworks, and emerging
trends. Additionally, it explores the impacts of different types of web development on businesses,
and possible challenges that web developers face. The report includes a discussion of the best
practices for web development projects and a review of the tools and technologies used by web
developers. Finally, the report provides an analysis of the future of web development and the
potential implications for businesses.

This report will provide an overview of web development in 2020, focusing on the various tools,
technologies, and frameworks available to developers. It will cover the popular trends in web
development and examine the challenges that developers face in building modern web
applications. It will also discuss the impact of the COVID-19 pandemic on web development
and the most important skills that developers need in order to stay competitive. Finally, it will
analyze the future of web development and the potential opportunities for developers in the
coming years.

Downloaded by Aanand Pandit ([email protected])

 lOMoARcPSD|33377442

TABLE OF CONTENTS

1. Introduction
1.1. Web Development
1.2. Classification of Web Development
1.3. Front End Development
1.4. Back End Development
1.5. Front End Developer
1.6. Skills required for Front End Developer
1.7. Working of Website
2. Training Details
2.1. Hyper Text Markup Language (HTML)
2.1.1. Features of HTML
2.1.2. HTML Page Structure
2.2. Cascading Style Sheets (CSS)
2.2.1. Features of CSS
2.2.2. Types of CSS
2.2.3. Properties of CSS
2.3. JavaScript
2.3.1. Features of JavaScript
3. Assignments
3.1. Pop-Up Box
3.2. Responsive Image Slider
4. Project
4.1. Description

Downloaded by Aanand Pandit ([email protected])

 lOMoARcPSD|33377442

4.2. Code
5. Learning From Training

LIST OF FIGURES

Fig 1.1 Working of a website

Fig 1.2. Web Application Development Process

Fig 1.3. HTML page structure

Fig 3.1 Pop up box

Fig 3.2. Pop up window after clicking on Click here

Fig 3.3. bullet 1 is clicked

Fig 3.4. bullet 2 is clicked

Fig 3.5. bullet 3 is clicked

Fig 3.6. bullet 4 is clicked

Fig 4.1 Home page

Fig 4.2 Menu

Fig 4.3 Gallery

Fig 4.4 Last Page

Downloaded by Aanand Pandit ([email protected])

 lOMoARcPSD|33377442

1. INTRODUCTION

1.1. WEB DEVELOPMENT

Web development refers to the creating, building, and maintaining of websites. It includes
aspects such as web design, web publishing, web programming, and database management. It
is the creation of an application that works over the internet i.e., websites. The word Web
Development is made up of two words, that is: Web: It refers to websites, web pages or anything
that works over the internet. Development: It refers to building the application from scratch.

1.2. CLASSIFICATION OF WEB DEVELOPMENT:

Front End Development:

Front-end web development, also known as client-side development is the practice of producing
HTML, CSS and JavaScript for a website or Web Application so that a user can see and interact
with them directly. The challenge associated with front end development is that the tools and
techniques used to create the front end of a website change constantly and so the developer
needs to constantly be aware of how the field is developing.

Back End Development:

Back-end development means working on server-side software, which focuses on everything

you can’t see on a website. Back-end developers ensure the website performs correctly, focusing
on databases, back-end logic, application programming interface (APIs), architecture, and

Downloaded by Aanand Pandit ([email protected])

 lOMoARcPSD|33377442

servers. They use code that helps browsers communicate with databases, store, understand, and
delete data.

1.3. FRONT END DEVELOPMENT:

Web design is the way a website looks, front end development is how that design
actually gets implemented on the web. The main objective of designing a site is to
ensure that when the users open up the site, they see the information in a format that
is easy to read and relevant. But now a days users uses a large variety of devices
with varying screen sizes and resolutions thus forcing the designer to take into
consideration these aspects when designing the site. They need to ensure that their
site comes up 8 correctly in different browsers (cross-browser), different operating
systems (crossplatform) and different devices (cross-device), which requires careful
planning on the side of the developer.

1.4. FRONT END DEVELOPER:

A front-end developer, also known as a front-end web developer, is a professional

responsible for the design and implementation of the interface. The users require
this interface so that they can access the application in question. A web designer is
a professional who creates a website’s appearance and design. And the front-end
developer makes sure that the design works online by using coding languages such
as CSS, HTML, and JavaScript.

1.5. SKILLS REQUIRED FRONT END WEB DEVELOPMENT:

Downloaded by Aanand Pandit ([email protected])

 lOMoARcPSD|33377442

HTML: Hyper Text Markup Language (HTML) is the standard markup language
used for creating web pages. It is the most basic building block required for
developing websites

CSS: Cascading Style Sheets (CSS) is used to apply styles to web pages. It is used
to make web pages presentable. The reason for using this is to simplify the process
of making web pages presentable. It allows you to apply styles on web pages. More
importantly, it enables you to do this independently of the HTML that makes up
each web page.

JavaScript: JavaScript is a very powerful tool that can do many things for a website.
For one, it powers the site’s general interactivity. JavaScript makes it possible to
build rich UI components such as image sliders, pop-ups, site navigation mega
menus, form validations, tabs, accordions, and much more.

1.6. WORKING OF WEBSITE:

A website is a collection of webpages located under a single domain name. These

webpages contain and display information about the business or organization and
are usually made up of elements such as photos, videos and text. Users need a device
with a web browser — laptops, smartphones or tablets — and an Internet connection
to access a website.

Downloaded by Aanand Pandit ([email protected])

 lOMoARcPSD|33377442

Fig .1.1 Working of a Website

Downloaded by Aanand Pandit ([email protected])

 lOMoARcPSD|33377442

Fig 1.2. Web Application Development Process

2. TRAINING DETAILS

Downloaded by Aanand Pandit ([email protected])

 lOMoARcPSD|33377442

2.1. Hyper Text Markup Language (HTML):

HTML (Hyper Text Markup Language) is the most basic building block of the Web. It defines
the meaning and structure of web content. Other technologies besides HTML are generally used
to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript).

"Hypertext" refers to links that connect web pages to one another, either within a single website
or between websites. Links are a fundamental aspect of the Web. By uploading content to the
Internet and linking it to pages created by other people, you become an active participant in the
World Wide Web.

HTML uses "markup" to annotate text, images, and other content for display in a Web browser.
HTML markup includes special "elements" such as <head>, <title>, <body>, <header>,
<footer>, <article>, <section>, <p>, <div>, <span>, <img>, <nav>, <video>, <ul>, <ol>,
<li> and many others.

2.1.1. Features of HTML:

1) It is a very easy and simple language. It can be easily understood and modified.

2) It is very easy to make an effective presentation with HTML because it has a lot of formatting
tags. 3) It is a markup language, so it provides a flexible way to design web pages along with
the text.

4) It facilitates programmers to add a link on the web pages (by html anchor tag), so it enhances
the interest of browsing of the user.

5) It is platform-independent because it can be displayed on any platform like Windows, Linux

etc.

6) It facilitates the programmer to add Graphics, Videos, and Sound to the web pages which
makes it more attractive and interactive.

7) HTML is a case-insensitive language, which means we can use tags either in lowercase or
upper-case.

Downloaded by Aanand Pandit ([email protected])

 lOMoARcPSD|33377442

2.1.2. HTML Page Structure:

Fig 1.3. HTML page structure

<!DOCTYPE>: It defines the document type or it instruct the browser about the version of
HTML.
<html>: This tag informs the browser that it is an HTML document. Text between html tag
describes the web document. It is a container for all other elements of HTML except
<!DOCTYPE>
<head>: It should be the first element inside the element, which contains the meta data
(information about the document). It must be closed before the body tag opens.
<title>: As its name suggested, it is used to add title of that HTML page which appears at the
top of the browser window. It must be placed inside the head tag and should close immediately.

<body>: Text between body tag describes the body content of the page that is visible to the end
user. This tag contains the main content of the HTML document.

2.2. Cascading Style Sheets:

Downloaded by Aanand Pandit ([email protected])

 lOMoARcPSD|33377442

Cascading Style Sheets are fondly referred to as CSS. It is used to make web pages
presentable. The reason for using this is to simplify the process of making web
pages presentable. It allows you to apply styles on web pages. More importantly,
it enables you to do this independently of the HTML that makes up each web page.

2.2.1. Features of CSS

1). Font, color, background style, element alignments, border, and size tags had to
be duplicated on each web page before CSS. This was a lengthy procedure.

2). CSS makes website maintenance much easier. If we need to make a global
change to the file, we can simply alter the style, which will update all of the elements
on the web page.

3). We can use CSS with older language versions because it is compatible with them.
CSS makes it possible to optimize material for several devices

4). A website that’s dull and plain will not attract the user, so adding some style
would surely make your website presentable to the user.

5). A website with a simple yet beautiful UI would help the users to go through the
website easily. It is used to make the user interface better.

6). Since CSS is a basic requirement while learning Web Development, therefor
there are abundant career opportunities for it. As a freelancer, you can land up to
many projects.

2.2.2. Types of CSS:

There are three types of CSS which are given below:

Inline CSS Internal CSS

External CSS

Inline CSS: Inline CSS contains the CSS property in the body section attached with
element is known as inline CSS. This kind of style is specified within an HTML tag
using the style attribute.

Downloaded by Aanand Pandit ([email protected])

 lOMoARcPSD|33377442

Internal or Embedded CSS: This can be used when a single HTML document
must be styled uniquely. The CSS rule set should be within the HTML file in the
head section i.e., the CSS is embedded within the HTML file.

External CSS: External CSS contains separate CSS file which contains only style
property with the help of tag attributes (For example class, id, heading, … etc.). CSS
property written in a separate file with .css extension and should be linked to the
HTML document using link tag. This means that for each element, style can be set
only once and that will be applied across web pages.

2.2.3. Properties of CSS:

Inline CSS has the highest priority, then comes Internal/Embedded followed
by External CSS which has the least priority. Multiple style sheets can be
defined on one page. If for an HTML tag, styles are defined in multiple style
sheets then the below order will be followed.
1) As Inline has the highest priority, any styles that are defined in the internal
and external style sheets are overridden by Inline styles.
2) Internal or Embedded stands second in the priority list and overrides the
styles in the external style sheet.
3) External style sheets have the least priority. If there are no styles defined
either in inline or internal style sheet then external style sheet rules are
applied for the HTML tags.

2.3. JavaScript

Downloaded by Aanand Pandit ([email protected])

 lOMoARcPSD|33377442

JavaScript (JS) is the world’s most popular lightweight, interpreted compiled

programming language. It is also known as a scripting language for web
pages. It can be used for Client-side as well as Server-side developments.
JavaScript can be added to your HTML file in two ways:
Internal JavaScript: We can add JS code directly to our HTML file by
writing the code inside the <script> tag. The <script> tag can either be placed
inside the <head> or the <body> tag according to the requirement.
External JavaScript File: We can create a file with .js extension and paste
the JS code inside it. After creating the file, add this file in
<script src=” file_name.js”> tag inside <head> tag of the HTML file.

2.3.1. Features of JavaScript

1) All popular web browsers support JavaScript as they provide built-in execution
environments.

2) JavaScript follows the syntax and structure of the C programming language.

Thus, it is a structured programming language.

3) JavaScript is a weakly typed language, where certain types are implicitly cast
(depending on the operation).

4) JavaScript is an object-oriented programming language that uses prototypes

rather than using classes for inheritance.

5) It is a light-weighted and interpreted language.

6) It is a case-sensitive language.

3. ASSIGNMENTS

Downloaded by Aanand Pandit ([email protected])

 lOMoARcPSD|33377442

3.1. Pop – Up Box:

This is pop - up box designed using HTML (Hyper Text Markup Language) and
CSS (Cascading Style Sheets).

The main functionality of this project is that, when we click on the text "Click here"
then a pop-up box opens containing additional information without reloading the
page.

With the help of this project one can view the additional information on the pop up
box on the similar page.

In this project when user click on the text "Click here " , pop up window will open
with other information and to return to the main content the user need to click on
the close button present on the pop up.

By adding pop up box in our web page, we can direct user attention to an important
piece of information on a website.

Click Here

Fig 3.1 Pop up box

Downloaded by Aanand Pandit ([email protected])

 lOMoARcPSD|33377442

Fig 3.2. Pop up window after clicking on Click here

Downloaded by Aanand Pandit ([email protected])