INTERNSHIP REPORT

AT

DESIZNO SOLUTIONS

Submitted by

HARSH BHUSHAN GUPTA

19CS8115
Under the Supervision of

Rajeev Gupta Dr. Sujoy Saha

Senior Manager Assistant Professor
Desizno Solutions Pvt. Ltd. Computer Science and Engineering Department,
North West Delhi, India National Institute of Technology, Durgapur, India

COMPUTER SCIENCE AND ENGINEERING DEPARTMENT

राष्ट्रीय प्रौद्योगिकी संस्थान दिु ाापरु
NATIONAL INSTITUTE OF TECHNOLOGY DURGAPUR
WEST BENGAL – 713209
INDIA
JANUARY 2023 – JULY 2023

1
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
NATIONAL INSTITUTE OF TECHNOLOGY
DURGAPUR, INDIA

DECLARATION
I the undersigned declare that the dissertation / thesis work entitled “Internship Report on
Front-End Web Development”, submitted towards partial fulfilment of requirements for the
award of the degree in Bachelor of Technology in Computer Science and Engineering is
my original work and this declaration does not form the basis for award of any degree or any
similar title to the best of my knowledge.

-----------------------------------------------
Durgapur Harsh Bhushan Gupta
May,2023 Roll No. - 19CS8115

2
3
 COMPUTER SCIENCE AND ENGINEERING DEPARTMENT
राष्ट्रीय प्रौद्योगिकी संस्थान दिु ाापरु
NATIONAL INSTITUTE OF TECHNOLOGY DURGAPUR
WEST BENGAL – 713209
INDIA
JANUARY 2023 – JULY 2023

CERTIFICATE OF APPROVAL

This is to certify that we have examined the internship report submitted by Harsh Bhushan
Gupta and hereby accord our approval of it as a study carried out and presented in a manner
required for its acceptance in partial fulfilment of the requirements for the award of the
degree in Bachelor of Technology in Computer Science and Engineering for which it has
been submitted. It is to be understood that by this approval that the undersigned does not
necessarily endorse or approve any statement made, opinion expressed, or conclusion drawn
therein but approves the thesis only for the purpose for which it is submitted.

Examiners:
Name Signature

4
 ABSTRACT

This project is focused on developing a website for a rental home company,

which aims to showcase its products and services to potential customers. The
website will be designed with a modern and professional look, ensuring that it is
both visually appealing and user-friendly. We will use a combination of front-
end and back-end technologies to create a dynamic and interactive experience
for the users.
We have worked on the front-end aspect of the web page to give it a modern
look and make the user interface (UI) very interactive and user friendly.
The site will also be optimized for search engines to improve its visibility and
attract more traffic.
The site will also be available in multiple languages so that different diaspora of
people can easily view it in their native language.
The project will follow a structured development process, with regular feedback
and testing to ensure that the final product meets the requirements of the client.
The ultimate goal of this project is to deliver a high-quality website that reflects
the company's brand and supports its business objectives.

5
 ACKNOWLEDGEMENT

I would like to take this opportunity to express my deep appreciation and

gratitude to everyone who has contributed to the successful completion of my
project.

First and foremost, I would like to thank my supervisor Rajeev Gupta for his
unwavering guidance and support throughout the duration of this project. His
expertise, insights, and constructive feedback have been invaluable in shaping
the direction and scope of this work.

I would also like to extend my heartfelt thanks to my colleagues, friends, and

family members who have provided me with encouragement, motivation, and
moral support during the ups and downs of this project. Their patience,
understanding, and belief in my abilities have been a constant source of
inspiration.

I am also grateful to the participants who have generously shared their time,
knowledge, and experiences to make this project possible. Without their
willingness to participate and provide feedback, this work would not have been
possible.

Once again, thank you to everyone who has contributed to this project in any
way. Your support and encouragement have been instrumental in making this
project a success.

Harsh Bhushan Gupta

(19CS8115)
Dept. of Computer Science and Engineering
National Institute of Technology
Durgapur – 713209

6
 CONTENTS
Content Page No.

1. Title Page 01

2. Declaration 02

3. Bona-fide Certificate 03

4. Certificate Of Approval 04

5. Abstract 05

6. Acknowledgement 06

7. Chapter 1: Front End Web Development 09

8. Chapter 2: HTML 10

9. Chapter 3: CSS 11

10. Chapter 4: JavaScript 12

11. Chapter 5: Framework 13

12. Chapter 6: React JS 14

13. Chapter 7: Angular JS 15

7
14. Chapter 8: Vue JS 16

15. Chapter 9: Node JS 17

16. Chapter 10: Typescript 18

17. Chapter 11: Header of Webpage 19

18. Chapter 12: Navigation Bar 20

19. Chapter 13: Homepage 21

20. Chapter 14: Popular Vacation Destinations 22

21. Chapter 15: Top Featured Properties 23

22. Chapter 16: Sign Up 24

23. Chapter 17: Customer Testimonials 25

24. Chapter 18: Embedding Twitter Timeline 26

25. Chapter 19: Footer 27

26. Conclusion 28

8
Chapter 1: Front-End Web Development

Front-end web development refers to the creation of the user interface and user
experience of a website or web application. It involves designing and coding the
visual elements of a website, including the layout, typography, and colour
scheme, as well as the interactive features that enable users to interact with the
site.

HTML, CSS, and JavaScript are the primary technologies used for front-end
web development. HTML is used to create the structure and content of web
pages, while CSS is used to style and layout those pages. JavaScript is used to
create interactive features and dynamic content.

Front-end web developers need to have a strong understanding of these

technologies and how they work together, as well as an eye for design and user
experience. They should also be familiar with web development frameworks
and libraries, such as React, Angular, and Vue, which can help streamline the
development process.

In addition to technical skills, front-end web developers need to be able to work

collaboratively with designers, back-end developers, and other stakeholders to
ensure that the final product meets the needs of users and the business. Good
communication skills and the ability to work in an agile development
environment are also important.

9
Chapter 2: Hyper Text Markup Language (HTML)

HTML (Hypertext Markup Language) is a markup language used for creating

and structuring content for the web. It allows developers to define the
structure and layout of a webpage using a set of predefined elements and
attributes.
HTML documents are made up of a series of tags, which are enclosed in angle
brackets. Tags can be used to define headings, paragraphs, lists, links, images,
and many other elements of a webpage.
It is an essential part of web development and is often used in conjunction
with other technologies such as CSS (Cascading Style Sheets) and JavaScript. It
is supported by all modern web browsers and is constantly evolving to support
new features and functionality.
HTML is a markup language, not a programming language. It is used to add
structure and semantic meaning to text, but it cannot perform logical
operations like a programming language. It is based on tags, which are used to
define the structure and content of a web page. Tags are enclosed in angle
brackets, like <tagname>, and can have attributes that provide additional
information about the tag.
The basic structure of an HTML document includes the <html>, <head>, and
<body> tags. The <html> tag defines the document as an HTML document,
while the <head> tag contains meta information about the document (e.g., the
title) and links to external resources like stylesheets and scripts. The <body>
tag contains the main content of the web page.
HTML provides a wide range of tags for structuring text, including headings,
paragraphs, lists, and tables. These tags provide semantic meaning to the
content and help search engines and screen readers understand the structure
of the page.
It also provides tags for adding multimedia content like images, audio, and
video. These tags allow web developers to embed rich media content into web
pages. HTML5 is the latest version of HTML and includes many new features
like support for video and audio playback, canvas graphics, and improved
support for mobile devices.

10
Chapter 3: Cascading Style Sheets (CSS)

CSS stands for Cascading Style Sheets and is used for adding styles to HTML
documents. CSS can be written in a separate file or embedded within HTML
using the `<style>` tag.
It works by selecting HTML elements and applying styles to them. Selectors can
be based on element type, class, or ID. CSS properties control the visual
appearance of HTML elements, such as colour, size, font, and layout. It has a
variety of layout options, including float, position, and display.
It can be used to create responsive designs that adjust to different screen sizes.
It frameworks like Bootstrap and Foundation provide pre-built CSS styles and
layout components for faster development.
CSS pre-processors like Sass and Less allow for advanced features like variables
and functions. It can also be used for animations and interactivity with features
like transitions, transforms, and hover effects. CSS is constantly evolving with
new features and updates, so it's important to stay up-to-date with the latest
best practices and techniques.

11
Chapter 4: JavaScript (JS)

JavaScript is a popular programming language used to add dynamic

functionality to websites and web applications.
It was created by Brendan Eich in 1995 while he was working at Netscape
Communications Corporation. It is an interpreted language, which means that
code is executed by a browser's JavaScript engine without the need for a
separate compilation step. It is a dynamically typed language, which means
that variable types are determined at runtime rather than being explicitly
defined.
It can be used to manipulate the Document Object Model (DOM) of a web
page, which allows for dynamic updating of the content and appearance of a
page. It can also be used to create interactive user interfaces, handle user
events, and make network requests to APIs.
It has several frameworks and libraries that make it easier to develop web
applications, such as React, Angular, and Vue.js.
JavaScript is not limited to just the browser; it can also be used on the server-
side with technologies such as Node.js. JavaScript is an ever-evolving language,
with new features and updates being added on a regular basis. To get started
with JavaScript, we’ll need a text editor to write our code and a browser to run
and test our code. Many modern web browsers include a JavaScript console for
debugging.
JavaScript is a versatile language that can be used for a wide range of tasks,
from simple scripting to complex web applications. Learning JavaScript is a
valuable skill for anyone interested in web development.

12
Chapter 5: JavaScript Frameworks

In JavaScript, a framework is a collection of pre-written JavaScript code that

helps developers to create web applications more quickly and efficiently. It
provides a set of tools, libraries, and conventions that can make it easier to
develop complex applications by simplifying common tasks and providing a
structure for organizing code.

JavaScript frameworks such as React, Angular, and Vue are popular choices for
building modern web applications. These frameworks offer features such as
templating, routing, state management, and data binding, which help developers
build robust and scalable applications with ease.

In summary, a JavaScript framework is a reusable set of libraries and

conventions that helps developers build applications faster by providing
structure, standardization, and pre-built functionality.

13
Chapter 6: React JavaScript Framework

React is a popular JavaScript library for building user interfaces.

It is a component-based library, which means that applications are built by
composing small, reusable UI components. It uses a virtual DOM, which is an
in-memory representation of the actual DOM. This allows React to update the
UI efficiently by minimizing the number of actual DOM manipulations.
It uses JSX, a syntax extension that allows developers to write HTML-like code
within JavaScript files. It supports server-side rendering, which can improve
performance and SEO. It also supports unidirectional data flow, meaning that
data flows down from parent components to child components.
React has a large and active community, with many third-party libraries and
tools available. It can be used with other libraries and frameworks, such as
Redux for state management or React Native for mobile app development.
React is maintained by Facebook, which provides comprehensive
documentation and support. It has a shallow learning curve compared to other
frameworks, making it easy for beginners to get started.
React is constantly evolving, with new features and improvements being added
regularly.

14
Chapter 7: Angular JavaScript Framework

Angular is a popular open-source web application framework used for building

dynamic and scalable web applications. It's built on top of the JavaScript
language and provides a comprehensive set of tools and features to simplify
the development process.
Angular follows a component-based architecture. Components are the building
blocks of an Angular application, and each component has its own template,
styles, and logic. Angular uses TypeScript, which is a superset of JavaScript.
TypeScript provides additional features like static typing, which help in
catching errors during compile-time rather than runtime.
Angular provides a set of powerful tools for building reactive and responsive
user interfaces. The framework has built-in support for observables and
reactive programming, which allows developers to create applications that can
respond to changes in data in real-time. Angular provides a dependency
injection system, which makes it easy to manage dependencies between
components and services.
Angular provides a powerful set of directives, which are used to extend HTML
and add dynamic behaviour to web pages. Directives are used to create
custom HTML elements, attribute directives, and structural directives. Angular
provides a robust testing framework, which makes it easy to write unit tests for
individual components and services. The framework also provides tools for
end-to-end testing of Angular applications.
Angular has a large and active community of developers, which means that
there are plenty of resources, tutorials, and examples available online.

Overall, Angular is a powerful framework for building complex web

applications. It provides a comprehensive set of tools and features that can
help developers build scalable and responsive applications in a relatively short
amount of time.

15
Chapter 8: Vue JavaScript Framework

Vue.js is a progressive JavaScript framework used for building user interfaces.

It is a popular choice among developers due to its simplicity, versatility, and
ease of use. It follows the MVVM (Model-View-ViewModel) architecture
pattern, which separates the data and logic from the presentation layer.
It provides a set of directives, which are used to manipulate the Document
Object Model (DOM) and create dynamic templates. Some popular directives
include v-if, v-for, v-bind, and v-on. It also provides a reactivity system that
updates the DOM automatically when the data changes. This means that you
don't have to manually manipulate the DOM to update the view.
Vue.js provides a powerful set of tools for component-based development,
which allows you to create reusable and modular UI components. Components
can have their own data, methods, and lifecycle hooks. It supports server-side
rendering, which can improve the performance and SEO of your application.
It has a growing ecosystem of plugins and libraries, which can extend its
functionality and provide additional features. Vue.js is easy to learn and has
great documentation, making it a great choice for beginners and experienced
developers alike.

Overall, Vue.js is a powerful and versatile framework that can be used for a
wide range of web development projects. It is easy to learn, highly
customizable, and provides a great developer experience.

16
Chapter 9: Node JavaScript Framework

Node.js is a powerful JavaScript runtime environment that allows developers

to run JavaScript code outside of the browser, on the server side.
It is built to be non-blocking and asynchronous, which means that it can handle
multiple requests simultaneously without waiting for each one to finish before
moving on to the next. This makes it ideal for building scalable, high-
performance applications.
It allows us to use JavaScript on the server side, which can simplify
development and allow for greater code reuse across the front-end and back-
end of our application.
It comes with a powerful package manager called NPM (Node Package
Manager), which allows us to easily install and manage third-party libraries and
modules.
It is built on an event-driven architecture, which means that it responds to
events as they occur rather than following a linear program flow. This can
make it more efficient and responsive than traditional server-side
technologies.
Node.js is cross-platform, which means that you can run it on Windows, Mac,
or Linux. This makes it a versatile choice for developing server-side
applications.
It has a large and active community of developers who contribute to its
ongoing development, provide support and resources, and create useful
libraries and tools.

Overall, Node.js is a powerful and flexible platform for building server-side

applications with JavaScript.

17
Chapter 10: Typescript

TypeScript is an open-source programming language that is a typed superset of

JavaScript. It is designed to help developers write safer and more scalable code
by adding optional static types to JavaScript.
It is a superset of JavaScript. This means that any valid JavaScript code is also
valid TypeScript code. TypeScript adds additional features to JavaScript such as
static types, interfaces, and classes.
It allows developers to specify types for variables, function parameters, and
return types. This helps catch errors early in development and provides better
code completion and documentation.
It includes the concept of interfaces, which allow developers to define the
shape of an object. Interfaces are useful for defining contracts between
different parts of a codebase and can help catch errors when a piece of code
doesn't conform to the expected interface.
TypeScript has a class-based object-oriented programming model, similar to
Java or C#. Classes can have public, private, and protected members, and can
be extended and implemented.
It supports the use of modules to organize code into logical units. This can help
with code reuse and organization, and TypeScript has built-in support for
CommonJS, AMD, and ES6 modules.
It can be used in conjunction with existing JavaScript codebases, allowing
developers to gradually introduce static typing and other TypeScript features
over time.
TypeScript has excellent tooling support, including integration with popular
IDEs such as Visual Studio Code, and support for type checking, code
completion, and refactoring.

Overall, TypeScript is a powerful language that can help developers write more
robust and scalable code. Its static typing and object-oriented programming
features make it a popular choice for larger projects and teams.

18
Chapter 11: Header of Web Page

The above figure shows the header of our webpage.

The header here is visible and available for interaction even while we scroll
through the webpage. This is achieved using sticky class for our header.
The sticky class is added to the header with JS when it reaches its scroll
position.
We provide the position as fixed and width as 100% so that it sticks to the top
and covers the entire width of the webpage.

Our header also uses css media queries to convert the navbar display in the
header into a menu form display for screens smaller than a pre-specified width.
This optimizes our webpage for mobile view.
The mobile look is displayed as :

In the mobile form the navbar is accessed through the menu button immediately
left to the sign in button.

19
Chapter 12: Navigation Bar (Navbar)

The navbar contains three Home, Popular Destinations, Select Language.

This information is entirely visible in desktop view. However, in mobile view
due to the application of CSS media queries the navbar is accessible via a button
present on the immediate left of the sign in button.
This button interprets and reacts to the mouse click using the
‘addEventListener’ function.
On clicking this we get a mobile view of the navbar which covers a part of the
webpage.

20
Chapter 13: Home Page

In this section of the webpage we have created a container, in which we have

added a background image along with a search bar and button to help the user
search for a specific place where he/she would like to book home using our
website.
The Search Button uses the ‘addEventListener’ to associate the click event to
search the input entered in the search bar.

21
Chapter 14: Popular Vacation Destinations

In the above section we use grid to display the popular vacation destinations of
our website.
Each of these popular destinations are wrapped in a separate section along with
a related background image in different parts of the grid. These images are also
associated with the event ‘hover’ using ‘addEventListener’ function, and when
the mouse pointer hovers over any image it eases into the screen.

22
Chapter 15: Top Featured Properties

In the above section, we have displayed the top featured properties of our
website using grid.
Also, we are hiding the overflow so that only the complete details of our
property is visible. The navigation through these properties is happening via two
buttons on either side of the webpage.
The individual destination segments are stored in a circular array like structure.
Based on the size of the screen the total number of properties displayed might
vary.
The left side button stores the pointer of the property just left adjacent to the
property displayed on the extreme left.
The right side button stores the pointer of the property just right adjacent to the
property displayed on the extreme right.
As we press the right button the next property is displayed on the screen and the
left most property is taken out of display from the screen and vice versa.

23
Chapter 16: Sign Up

We have created a segment where we provide the users a way to join the “Easy
Book Home” community.
This segment contains a ‘Sign Up Now’ button just below our text message and
adjacent to the graphic section. This button responds to the ‘click’ event.
This action redirects us to another sign up page which is displayed on top of this
webpage while the background gets more opaque.
This Log In/Register page allows the users to register or login if already
registered via their email address.

24
Chapter 17: Customer Testimonials

This segment contains the customer reviews which are displayed using grid.
When the mouse hovers over a certain review it gets highlighted with green
colour.
Also, we are hiding the overflow so that only the complete details of the review
is visible. The navigation through these properties is happening via two buttons
on either side of the webpage.
The individual review segments are stored in a circular array like structure.
Based on the size of the screen the total number of reviews displayed might
vary.
The left side button stores the pointer of the review just left adjacent to the
review displayed on the extreme left.
The right side button stores the pointer of the review just right adjacent to the
review displayed on the extreme right.
As we press the right button the next review is displayed on the screen and the
left most review is taken out of display from the screen and vice versa.

25
Chapter 18: Embedding Twitter Timeline

In this segment we have embedded the twitter timeline of Easy Book Home.
This done by simply copying the twitter handle of EBH and using a service
provided by twitter called “publish.twitter.com”.
Once we enter the twitter handle of the page we want to embed in our webpage
it generates a code for us which we can simply use to embed the twitter
timeline.

26
Chapter 19: Footer

In this section we have some basic information about the website.

The contact information, email address and contact number is also present.
The social media links are also provided on the bottom right corner of the
footer.

27
 CONCLUSION

In conclusion, the web development project has been a success, meeting the
objectives and requirements set out in the initial plan. Throughout the project,
we have employed best practices in web development, ensuring that the final
product is user-friendly, responsive, and optimized for search engines. We have
also incorporated the latest technologies and frameworks to enhance the
website's functionality and performance. The website's design is aesthetically
pleasing and consistent with the brand identity, contributing to an engaging user
experience. We have worked closely with the client, incorporating their
feedback and suggestions to deliver a website that meets their specific needs.
We are confident that the website will help the client achieve their goals and
objectives and look forward to monitoring its performance over time.

The internship has been a valuable learning experience that has provided me
with practical skills, knowledge, and insights in front end web development.
During my time at the organization, I was able to work on projects and tasks
that allowed me to apply the theoretical concepts I learned in the classroom to
real-world situations. I was also able to observe and learn from experienced
professionals, who provided me with guidance and mentorship throughout the
internship.

Through this internship, I gained a better understanding of the industry, its

trends, and challenges. I also developed important soft skills such as
communication, teamwork, time management, and adaptability, which are
crucial for success in any career. Moreover, the internship helped me to identify
areas of interest and strengths, which will inform my future career decisions.

I am grateful to have had the opportunity to intern at the organization and would
like to thank my supervisors and colleagues for their support, guidance, and
feedback throughout the internship. I believe that the skills and knowledge I
have gained during this internship will be instrumental in my future academic
and professional pursuits.

28