A INTERNSHIP REPORT ON

“WEB DEVELOPMENT USING HTML,

CSS, JS AND REACT JS”
Project Report Submitted in Partial Fulfillment of the Requirements for the Degree
of

Bachelor of Engineering
in
Information Technology
Submitted by
Naresh Agrawal:(Roll No. 20UITE5019)

Under the Supervision of

Deepak Kumar Sharma
Director Of

Solid Learning LLP

Department of Computer Science and Engineering

MBM University, Jodhpur
May, 2023
 DECLARATION

I, Naresh Agrawal, hereby declare that this seminar/project titled “WEB DEVELOPMENT
USING HTML, CSS, JS AND REACT JS” is a record of original work done by me under
the supervision and guidance of Deepak Kumar Sharma Director Of Solid Learning LLP.

I, further certify that this work has not formed the basis for the award of the
Degree/Diploma/Associateship/Fellowship or similar recognition to any candidate of any
university and no part of this report is reproduced as it is from any other source without
appropriate reference and permission.

(Naresh Agrawal)
VIIIth Semester, Information Technology
Enrollment No. – 19R/02155
Roll No. – 20UITE5019

1
 ACKNOWLEDGEMENT

I am deeply grateful to my training mentor, Deepak Kumar Sharma for their invaluable
guidance and support throughout my training phase.

From the moment I started, Deepak Kumar Sharma taught me the basics of web
development, how the workflow works. This is really significant because we need to
establish a strong base before trying to learn different front-end libraries and frameworks.

In addition to that, the training course first explained the basics, then moved to different
languages and taught them one by one like HTML, CSS then JavaScript. Different home
assignments were also given simultaneously with the training.

Throughout the training, the tutors provided me with invaluable insights and advice that
helped me to grow as a professional. Their extensive knowledge of the software field and
their mentorship helped me to understand the intricacies of software development and
allowed me to gain valuable hands-on experience.

During my training tenure, I learned many things some of which are, writing industry level
code, optimizing the existing code, reducing time load on websites and fixing hideous bugs.
The thorough and frank guidance and assistance by my colleagues and mentors helped me to
ace each day of my internship with a positive review and eminent work.

------------------------------------

Naresh Agrawal
Roll No: 20UITE5019
Enrollment No: 19R/02155
Department of Computer Science and Engineering,
MBM University, Jodhpur.

2
 ABSTRACT

This training/internship report gives a concise and accurate overview about web development
as a front-end engineer using different technologies and frameworks.

The training covers the framework of REACT JS, one of the most popular front-end
frameworks used in the industry right now. The reason for it being so significant is due to it’s
no reload feature because of which the website does not reload every time a button is clicked,
instead a different component renders/loads on the website at that very instant.

In addition to that, when we work on large projects then we need to manage and handle each
file and folder. React simplifies this task for us and provides a clear way of arranging,
importing, exporting or reusing any component.

This simplicity gives React JS an upper hand in terms of choosing a front-end framework for
web designing. Also, the designing or CSS part is done using SASS styling in
correspondence with our JavaScript files. This ensures to have nicely oriented and catch
colors on our website to make it more professional.

The variety of websites that we see or visit on a daily basis have a very creamy flow of user
experience so that the underlying complexities (the working of the website) is hidden from
the end-user. Once, we become a Software Developer, we understand the complexities while
designing a website and try to make the website more catchy, animated and with a load of
features. The concept is to write efficient and optimized code to ensure long-lasting code with
fewer bugs and client satisfaction.

3
 Table of Contents

Content Page
Declaration ---------------------------------------------------------------------------------------------------------------1
Acknowledgement ---------------------------------------------------------------------------------2
Abstract -------------------------------------------------------------------------------------------------- 3
Table of Contents -------------------------------------------------------------------------------------- 4
Table of Figures ---------------------------------------------------------------------------------------- 5

Chapter 1- Introduction
1.1 Web Development --------------------------------------------------------------------------- 6 – 6
1.2 Workflow of Websites ----------------------------------------------------------------------- 7 - 7
1.3 Technologies and Languages used ---------------------------------------------------------8 – 8
1.4 Front-End and Back-End Workflow ------------------------------------------------------ 9 – 10

Chapter 2 – REACT JS
2.1 How does REACT JS works? ------------------------------------------------------------- 11 - 11
2.2 Lifecycle and Rendering methods of REACT JS -------------------------------------- 12 - 12
2.3 Need and Advantages of REACT JS library -------------------------------------------- 13 - 13
2.4 React JS in demand? ----------------------------------------------------------------------- 14 - 14

Chapter 3 – Training Work

3.1 Learning Phase ----------------------------------------------------------------------------- 15 - 20
3.2 Project Phase -------------------------------------------------------------------------------- 21 - 24
3.3 Code optimization and Logic building -------------------------------------------------- 25 - 25

Chapter 4 – Software Requirements

4.1 Visual Studio Code ------------------------------------------------------------------------- 26 – 26
4.2 React Developer Tools ----------------------------------------------------------- --------- 27 – 27
4.3 Bootstrap and Material UI----------------------------------------------------------------- 28 - 28

Chapter 5 – Challenges and Learning

5.1 Problems faced during the training tenure ---------------------------------------------- 29 – 29
5.2 How the difficulties were fixed and improved? ---------------------------------------- 30 - 30
5.3 Personal and Professional growth during the training tenure ------------------------ 31 – 31

Future Scope ---------------------------------------------------------------------------------------------- 32

Conclusion ------------------------------------------------------------------------------------------------ 33
References -------------------------------------------------------------------------------------------- 34

4
 Table of Figures

LIST OF FIGURES Page

Figure 1.1 Web Development 6

Figure 1.2 Workflow 7

Figure 1.3 Technologies 8

Figure 1.4 Front-End Workflow 9

Figure 1.5 Back-End Workflow 10

Figure 1.6 React Logo 11

Figure 1.7 React Market Demand 14

Figure 1.8 Document Object Model 17

Figure 1.9 Home page 22

Figure 2.0 Genesis NFT 22

Figure 2.1 Tarava NFT 23

Figure 2.2 The Project 24

Figure 2.3 NFT Staking Platform 24

Figure 2.4 VS Code 26

Figure 2.5 React Developer Tools 27

5
 Chapter 1 [Introduction]

1.1 Web Development

Web development is the process of creating and maintaining websites and web applications.
It involves a range of activities, including designing the user interface, writing code, and
integrating web applications with other systems.

Fig 1.1 – Web Development

Here's a brief overview of the key concepts and technologies involved in web development:

• Client-side development: This refers to the front-end or user-facing part of the website or web
application. It involves creating web pages using technologies such as HTML (Hypertext Markup
Language), CSS (Cascading Style Sheets), and JavaScript. HTML is used to structure the content of
the web page, CSS is used to style the content and layout, and JavaScript is used to add interactivity
and dynamic functionality.

• Server-side development: This refers to the back-end or server-side part of the website or web
application. It involves writing code to handle server-side logic and data processing. Popular server-side
programming languages include PHP, Ruby on Rails, Python, and Node.js.

• Databases: Databases are used to store and retrieve data for web applications. Popular database
systems include MySQL, MongoDB, and PostgreSQL. Databases are used to store user data,
application data, and content for the website or web application.

• APIs (Application Programming Interfaces): APIs are used to enable communication between
different systems. They allow web applications to interact with other applications and services, such
as payment gateways, social media platforms, and external databases.

• Responsive design: Responsive design is an approach to web design that aims to ensure that
websites and web applications display correctly on different devices, including desktops, tablets, and
smartphones. This is achieved by using techniques such as flexible layouts, responsive images, and
media queries.

6
1.2 Workflow of Websites

Fig 1.2 - Workflow

The workflow of a website typically involves the following stages:

• Planning: This stage involves defining the website's goals, target audience, and content strategy.
This may involve creating a sitemap, wireframes, and user personas to guide the design and
development process.

• Design: In this stage, the website's visual design is created. This may include designing the website's
layout, color scheme, typography, and imagery. Designers may create mockups and prototypes to test
the website's usability and user experience.

• Development: In the development stage, the website is built using various web development
technologies such as HTML, CSS, and JavaScript. This may involve creating the website's front-end
and back-end components, integrating with databases and APIs, and optimizing for speed and
performance.

• Content creation: This stage involves creating and optimizing the website's content. This may
include writing copy, creating images and videos, and optimizing content for search engines and
social media.

• Testing: Before the website is launched, it must be thoroughly tested to ensure that it works as
expected. This may involve testing the website's functionality, usability, accessibility, and
performance across different browsers and devices.

• Launch: Once the website is complete, it can be launched to the public. This may involve deploying
the website to a web server and configuring domain names, SSL certificates etc.

• Maintenance: After the website is launched, it requires ongoing maintenance to ensure that it
remains up-to-date, secure, and optimized. This may involve updating content, fixing bugs, adding
new features, and monitoring website analytics to track performance and user behavior. The specific
workflow of a website may vary depending on the project's scope, complexity, and team structure.

7
1.3 Technologies and Languages

Fig-1.3 - Technologies

Front-end web development involves the creation of the user interface and user experience
for websites and web applications.

Here are some of the most popular technologies and programming languages used: -

• HTML (Hypertext Markup Language): This is the foundation of all web pages and is used to
structure content on the web. HTML defines the structure of a webpage, including headings,
paragraphs, and images.

• CSS (Cascading Style Sheets): CSS is used to add style and layout to web pages, including font
sizes and colors, spacing, and other visual elements. CSS can be used to create responsive design that
adapts to different screen sizes.

• JavaScript: JavaScript is a programming language that can add interactivity and dynamic
functionality to web pages. JavaScript is commonly used to create animations, slide shows, and
interactive forms.

• jQuery: jQuery is a popular JavaScript library that simplifies common tasks, such as event handling
and DOM manipulation.

• Bootstrap: Bootstrap is a CSS framework that provides a set of pre-built styles and components to
create responsive, mobile-first web pages and web applications.

• React: React is a JavaScript library used to build user interfaces. It is commonly used to create
complex, data-driven web applications.

8
From all of the above-mentioned technologies and languages, we can design a website’s
front-end and then integrate the APIs with the server and thus, get the access to the databases.

1.4 Front-End and Back-End Workflow

The front-end and back-end workflow for web development typically involves the following
stages:
 Front-end Workflow:

Fig 1.4 – Front-End Workflow

The front-end planning stage involves defining the website's goals, target audience, and
content strategy. This may involve creating a sitemap, wireframes, and user personas to guide
the design and development process.

In the design stage, the front-end design is created. This may include designing the website's
layout, color scheme, typography, and imagery. Designers may create mockups and
prototypes to test the website's usability and user experience.

In the development stage, the website's front-end components are built using various web
development technologies such as HTML, CSS, and JavaScript. This may involve creating
responsive design that adapts to different screen sizes, optimizing for speed and performance,
and integrating with back-end components.

In the testing phase, the front-end is integrated with the back-end, it must be thoroughly
tested to ensure that it works as expected. This may involve testing the front-end's
functionality, usability, accessibility, and performance across different browsers and devices.

9
 Back-end Workflow:

Fig 1.5 – Backend Workflow

The back-end planning stage involves defining the website's database structure, server-side
logic, and APIs. This may involve creating a database schema, defining APIs, and selecting a
server-side technology stack.

In the development stage, the website's back-end components are built using various server-
side technologies such as PHP, Ruby on Rails, or Node.js. This may involve creating server-
side logic to handle user requests, integrating with databases and third-party APIs, and
optimizing for speed and performance.

In the testing phase, the back-end is integrated with the front-end, it must be thoroughly
tested to ensure that it works as expected. This may involve testing the back-end's
functionality, security, scalability, and performance.

Next comes the Integration and Deployment phase, once the front-end and back-end
components are complete, they are integrated to form a functional website. This may involve
integrating the front-end with the back-end APIs and databases, testing the website's
functionality and performance as a whole, and resolving any issues that arise.

• Once the website is complete, it can be deployed to a web server and made available to the public.
This may involve configuring domain names, SSL certificates, and other settings. Maintenance: After
the website is launched, it requires ongoing maintenance to ensure that it remains up-to-date, secure,
and optimized.

10
 Chapter 2 - REACT JS

2.1 How does REACT JS work?

ReactJS is an open-source JavaScript library used for building user interfaces (UIs). It was
created by Facebook and released in 2013.

Fig 1.6 – REACT LOGO

ReactJS is based on a component-based architecture, which makes it very flexible and easy to
use. ReactJS works by using a Virtual DOM (Document Object Model) to update the user
interface. The Virtual DOM is a lightweight copy of the real DOM, which is used to keep
track of the changes in the UI. When a component's state changes, ReactJS updates the
Virtual DOM with the new changes. Then, it compares the old Virtual DOM with the new
one, identifies the changes, and updates the real DOM only with the changes. This process is
called "reconciliation" and makes ReactJS very efficient and fast. ReactJS components can be
divided into two types: Class Components and Functional Components.

Class Components use a class-based syntax and are more powerful than Functional
Components. They have access to the component's state, lifecycle methods, and can be used
for more complex logic. Functional Components, on the other hand, use a function-based
syntax and are simpler and more lightweight. They are used for simple UI elements that don't
require complex logic. ReactJS also has a unidirectional data flow, which means that data
flows only in one direction: from the parent component to the child components. This makes
it easy to manage the state of the components and reduces the chances of bugs. ReactJS also
provides a way to manage application state with Redux.

Redux is a state management library that allows you to manage the state of the application in
a centralized location. It provides a predictable state container, which makes it easier to
debug and test the application.

In summary, ReactJS is a flexible, efficient, and powerful library used for building user
interfaces. It uses a Virtual DOM to update the UI, has a component-based architecture, and
provides a unidirectional data flow. It is widely used in web development and has a large and
active community that provides support and updates.

11
2.2 Lifecycle and Rendering methods of REACT JS

ReactJS provides a set of methods that are called at different stages of a component's
lifecycle. These methods are called "Lifecycle Methods". Lifecycle Methods can be used to
perform different operations like setting the initial state, updating the state, manipulating the
DOM, and so on.

The lifecycle methods are divided into four categories:

• Mounting Methods: These methods are called when a component is first created and added to the
DOM. constructor(props): This method is called when a component is created. It initializes the
component's state and binds event handlers.

 render (): This method is called when the component is rendered. It returns the JSX markup that is used
to render the component.

 componentDidMount (): This method is called after the component is mounted to the DOM. It
is used to perform operations like fetching data from an API or setting up event listeners.

• Updating Methods: These methods are called when a component is updated due to a change in its
state or props.

 componentDidUpdate (prevProps, prevState): This method is called after the component is

updated. It is used to perform operations like fetching data from an API or setting up event listeners.

• Unmounting Methods: These methods are called when a component is removed from the DOM.

 componentWillUnmount (): This method is called just before a component is removed from
the DOM. It is used to perform cleanup operations like removing event listeners or canceling timers.

• Rendering Methods: ReactJS provides three methods for rendering a component:

 render (): This method is used to render the component's markup. It returns the JSX markup that is used
to render the component.

 setState (): This method is used to update the component's state. When the state changes, the
component is re-rendered automatically.

12
2.3 Need and Advantages of REACT JS library

ReactJS is a popular open-source JavaScript library used for building user interfaces (UIs). It
was created by Facebook and released in 2013. ReactJS has gained immense popularity over
the years because of its simplicity, performance, and flexibility.

Here are some of the key advantages of using ReactJS:

• Component-Based Architecture: ReactJS uses a component-based architecture that makes it easy to

build complex UIs by breaking them down into smaller, reusable components. This makes the code
more modular, easier to maintain, and reduces the risk of introducing bugs.

• Virtual DOM: ReactJS uses a Virtual DOM to render UI updates, which makes it very fast and
efficient. The Virtual DOM is a lightweight copy of the real DOM, which ReactJS uses to keep track
of changes to the UI. When a component's state changes, ReactJS updates the Virtual DOM with the
new changes. Then, it compares the old Virtual DOM with the new one, identifies the changes, and
updates the real DOM only with the changes. This process is called "reconciliation" and makes
ReactJS very efficient and fast.

• Unidirectional Data Flow: ReactJS uses a unidirectional data flow, which means that data flows only
in one direction: from the parent component to the child components. This makes it easy to manage
the state of the components and reduces the chances of bugs.

• Rich Ecosystem: ReactJS has a large and active community that provides support and updates. There
are also many third-party libraries and tools available that can be used to extend ReactJS and make it
even more powerful.

• Server-Side Rendering: ReactJS supports server-side rendering, which makes it possible to render UI
components on the server before sending them to the client. This can improve the performance of the
application by reducing the time it takes for the UI to load.

• Easy to Learn: ReactJS has a simple and easy-to-learn syntax, which makes it accessible to
developers of all skill levels. It also provides clear and concise documentation, which makes it easy to
get started with the library.

In summary, ReactJS is a powerful and flexible library that provides many advantages for
building user interfaces. Its component-based architecture, Virtual DOM, unidirectional data
flow, rich ecosystem, server-side rendering, and ease of learning make it a popular choice for
building modern web applications.

13
2.4 React JS in demand?

Here are some of the key reasons why ReactJS is in demand:

• Efficiency: ReactJS uses a Virtual DOM to render UI updates, which makes it very efficient and fast.
The Virtual DOM is a lightweight copy of the real DOM, which ReactJS uses to keep track of changes
to the UI. When a component's state changes, ReactJS updates the Virtual DOM with the new
changes. Then, it compares the old Virtual DOM with the new one, identifies the changes, and updates
the real DOM only with the changes.

• Scalability: ReactJS has a component-based architecture that makes it easy to build complex UIs by
breaking them down into smaller, reusable components. This makes the code more modular, easier to
maintain, and reduces the risk of introducing bugs. This also makes ReactJS a good choice for large-
scale applications that require a lot of code and complexity.

• Flexibility: ReactJS is a flexible library that can be used with different programming languages and
frameworks. It can also be used to build different types of applications, including mobile apps,
desktop apps, and web apps.

• Large Ecosystem: ReactJS has a large and active community that provides support and updates.
There are also many third-party libraries and tools available that can be used to extend ReactJS and
make it even more powerful.

• Cross-Platform Compatibility: ReactJS can be used to build applications that run on different platforms,
including web browsers, iOS, Android, and desktop. In summary, ReactJS is a popular and in-demand
library because of its efficiency, scalability, flexibility, large ecosystem, and cross-platform compatibility.
These features make it a good choice for building modern web applications that require complex user
interfaces and large-scale codebases.

Fig 1.7 – React Market Demand

14
 Chapter 3 - Training Work

3.1 Learning Phase

During the learning phase, I was firstly explained how the web pages in reality work and also
how the page rendering occurs, what is the DOM (Document Object Model), how the front-
end features load on the web page.
If we try to understand it in detail, then in simple words the Hyper text markup language
(HTML) is the skeleton of a human body whereas Cascading style sheets (CSS) is the
features like muscle, tissues etc whereas JavaScript is the brain of the human body.

Thus, all of these 3 languages are mandatory for web development.

• Hypertext Markup Language (HTML): - HTML (Hypertext Markup Language) is a markup

language used to create the structure and content of web pages. It consists of a series of elements that
define the different parts of a web page, such as headings, paragraphs, images, links, and more. HTML
documents are made up of two main parts: the head section and the body section. The head section
contains information about the document, such as the title of the page, the character encoding used,
and any scripts or stylesheets used. The body section contains the actual content of the web page.
HTML elements are represented by tags, which are enclosed in angle brackets. The opening
tag indicates the beginning of an element, and the closing tag indicates the end. For example,
the <p> element is used to define a paragraph, and it is represented by the opening tag <p>
and the closing tag </p>.

Attributes are used to provide additional information about an element, such as the source of
an image or the destination of a link. Attributes are added to the opening tag of an element
and consist of a name and a value, separated by an ‘=’ sign. For example, the <img> element
is used to display an image, and it has an attribute called "src" that specifies the location of
the image file. HTML also provides a way to create lists, tables, forms, and other interactive
elements that allow users to input data or interact with the web page in various ways.

Web developers use HTML to create the structure and content of web pages, which can then
be styled with CSS (Cascading Style Sheets) and made interactive with JavaScript. HTML is
a foundational language for web development, and it is essential for anyone who wants to
create websites or web applications.

 HTML Tags: -

HTML uses tags to define the different parts of a web page. Tags are enclosed in angle
brackets, and they usually come in pairs, consisting of an opening tag and a closing tag. The
opening tag indicates the beginning of an element, and the closing tag indicates the end.
Some elements, such as images and line breaks, do not require a closing tag.

Here is a list of some commonly used HTML tags:

• <html>: This tag indicates the start of an HTML document.

15
• <head>: This tag contains information about the document, such as the title of the page, the character
encoding used, and any scripts or stylesheets used.

• <title>: This tag is used to define the title of the document, which appears in the title bar of the
browser.

• <body>: This tag contains the actual content of the web page.

• <h1> to <h6>: These tags are used to define headings of different levels, with <h1> being the most
important and <h6> being the least important.

• <p>: This tag is used to define a paragraph.

• <a>: This tag is used to create links to other pages or to specific locations on the same page.

• <img>: This tag is used to display an image on the page.

• <ul>: This tag is used to create an unordered list, with bullet points.

• <ol>: This tag is used to create an ordered list, with numbers.

• <li>: This tag is used to define each item in a list.

• <table>: This tag is used to create a table.

• <tr>: This tag is used to define a table row.

• <td>: This tag is used to define a table cell.

• <form>: This tag is used to create a form for user input.

• <input>: This tag is used to create input fields, such as text boxes and buttons.

• <textarea>: This tag is used to create a larger text input field.

• <select>: This tag is used to create a drop-down list.

• <option>: This tag is used to define each option in a drop-down list.

These are just a few of the many HTML tags available. Each tag serves a specific purpose and
can be customized with attributes to provide additional information or styling. By using these
tags, web developers can create rich, interactive web pages that provide a great user experience.

16
 Working of HTML pages: - HTML pages work by creating a structured document that web
browsers can interpret and display as a web page. When a user requests a web page by entering a URL
into a browser or clicking on a link, the browser sends a request to the server where the page is stored.
The server then sends back the HTML document that represents the requested page. The browser
receives the HTML document and begins to parse it, interpreting each tag and building a
representation of the page in memory.

As the browser encounters each tag, it applies any associated styles and renders the
content accordingly. For example, when it encounters a `<p>` tag, it creates a
paragraph element and applies any styles defined in the associated CSS. HTML pages
can also include other resources, such as images, stylesheets, and scripts. These
resources are referenced in the HTML document with special tags, and the browser
fetches them separately from the server and integrates them into the page as
necessary. HTML pages can also be interactive, allowing users to input data, click
buttons, and navigate between pages. This is typically accomplished with a
combination of HTML, CSS, and JavaScript. When a user interacts with a page, the
JavaScript code running in the browser can modify the HTML and CSS dynamically,
updating the display to reflect the user's actions.

In summary, HTML pages work by creating a structured document that web browsers
can interpret and display as a web page, with additional resources such as images and
scripts referenced as needed. The browser renders the content according to the rules
defined in the HTML, CSS, and JavaScript, allowing users to interact with the page
and create a rich, dynamic experience.

 Document Object Model (DOM): - The Document Object Model (DOM) is a programming
interface for HTML documents. It represents the web page as a tree-like structure, where each element
in the page is represented by a node in the tree. This tree structure is created by the browser when it
parses the HTML document, and it is accessible to JavaScript code running in the browser. With the
DOM, JavaScript can manipulate the web page dynamically, adding, removing, and modifying
elements on the page in response to user interactions or other events. The DOM provides a set of
methods and properties that allow JavaScript to access and modify the content, structure, and style of
the page.

For example, the DOM can be used to: - Change the content of an element on the
page - Add a new element to the page - Remove an existing element from the page -
Change the style of an element, such as its color, font, or size - Respond to user input,
such as clicking a button or submitting a form to access an element in the DOM.

Fig 1.8 – Document Object Model

17
• Cascading Style Sheet (CSS): - Cascading Style Sheets (CSS) is a language used to describe the
visual presentation of HTML and XML documents. It is used to control the layout, typography, colors,
and other visual aspects of a web page. CSS separates the presentation of a web page from its content,
allowing web developers to create consistent designs across multiple pages and sites. CSS works by
associating rules with HTML elements, specifying how the elements should be displayed.

CSS rules consist of a selector, which identifies the HTML element to be styled, and a set of
declarations, which specify the style properties to be applied to the element. For example, the
following CSS rule sets the color of all `<h1>` elements to red:

h1 {
color: red;
}

CSS also supports a wide range of selectors that can be used to target elements based on their
type, class, ID, or other attributes. For example, the following CSS rule sets the background
color of all elements with the class "highlight" to yellow:

. highlight {
background-color: yellow;
}

In addition to basic styling properties like color and background, CSS supports more advanced
layout and positioning properties, such as `float`, `position`, and `display`, which allow web
developers to create complex page layouts with multiple columns, grids, and other structures.
CSS can be applied to HTML documents in several ways, including: - External style sheets: A
separate CSS file is linked to the HTML document with a `<link>` tag in the `<head>` section.
- Internal style sheets: The CSS rules are placed directly in the `<head>` section of the HTML
document. - Inline styles: The CSS rules are applied directly to individual HTML elements with a
`style` attribute.

Overall, CSS is a powerful tool for controlling the visual presentation of HTML and XML
documents. By separating the presentation from the content, CSS allows web developers to
create consistent, maintainable designs that can be applied across multiple pages and sites.

18
• JavaScript: - JavaScript is a programming language that is primarily used for creating interactive
and dynamic web pages. It was first developed in the mid-1990s as a way to add interactive features to
web pages, and it has since become one of the most widely used programming languages in the world.
JavaScript is a high-level, interpreted language, which means that it is designed to be easy for humans
to read and write, and that it is executed by a web browser or other JavaScript engine rather than being
compiled into machine code. This makes JavaScript a very accessible language for beginners, and also
allows for rapid prototyping and development. JavaScript code is executed by a web browser in
response to user actions or other events, such as page loading or data input.

It can be used to create a wide variety of interactive features:

 Responding to user input, such as clicks or key presses
 Changing the content of a web page dynamically - Animating page elements -
Validating user input in forms - Retrieving data from a server using AJAX - Creating
games and other interactive applications JavaScript syntax is similar to other C-style
languages, with variables, loops, and conditional statements.

It also includes a number of built-in functions and objects, such as `alert () `, `console.log ()
`, and `Math`, which can be used to perform common tasks and manipulate data. In addition
to the core JavaScript language, there are also a number of popular libraries and frameworks,
such as jQuery, React, and Angular, that can be used to simplify and speed up the
development of JavaScript-based applications.

Overall, JavaScript is a versatile and powerful programming language that is essential for
creating interactive and dynamic web pages. Its ease of use and wide range of applications
have made it one of the most widely used languages in the world, and it is likely to remain a
critical technology for web development in the years to come.

 Inbuilt Methods in JavaScript: - JavaScript provides a number of inbuilt methods that can be used to
manipulate arrays. Some of the most commonly used methods include:

• push (): Adds one or more elements to the end of an array.

• pop (): Removes the last element from an array and returns it

• shift (): Removes the first element from an array and returns it.

• unshift (): Adds one or more elements to the beginning of an array.

• slice (): Returns a copy of a portion of an array.

With these methods, developers can easily manipulate and work with arrays in their
applications.

19
Libraries and Frameworks of JavaScript: -

• Front-end: -

 React: A popular library for building user interfaces that provides a declarative approach to
building UIs and allows for efficient updates by only updating changed parts of the interface.
 Angular: A comprehensive framework that provides a robust set of features for building large-
scale applications, including a powerful templating system, dependency injection, and routing.
 Vue.js: A progressive JavaScript framework that is easy to learn and use, and is ideal for building
single-page applications.
 Ember.js: A comprehensive framework for building ambitious web applications that includes
features such as data binding, URL routing, and an integrated development environment.
 Backbone.js: A lightweight framework that provides structure to web applications by
providing models with key-value binding and custom events, collections with a rich API of
enumerable functions, and views with declarative event handling.

• Backend: -

 Node.js: A JavaScript runtime built on Chrome's V8 JavaScript engine, which allows developers to
build fast and scalable server-side applications.
 Express.js: A fast, minimalist web framework for Node.js that provides a robust set of features
for web and mobile applications, including routing, middleware support, and template engines.
 Hapi.js: A rich framework for building web applications and services using Node.js, which
provides a comprehensive set of features for authentication, input validation, caching, and error
handling.
 Meteor.js: A full-stack JavaScript platform for building modern web and mobile applications,
which includes a powerful set of features for real-time data synchronization, user account
management, and reactive templates.
 Koa.js: A lightweight web framework for Node.js that provides a simple and expressive API for
building scalable and maintainable web applications.
 Nest.js: A progressive Node.js framework for building efficient and scalable server-side
applications, which uses modern TypeScript syntax and provides a modular architecture with a focus
on testability and maintainability.

These are just a few of the many JavaScript libraries that can be used for building server-side
applications. Each library has its own strengths and weaknesses, and the choice of which one
to use will depend on the specific requirements of the project.

20
3.2 Project Phase

For my project, I was instructed to develop a website’s user interface with 10+
pages/components in that website. In addition to that, the website should be catchy to the
eyes i.e., eminent styling should be done and JavaScript functions are to be used to make the
website dynamic in nature.

I developed this website using REACT JS library, CSS styling with reference from react
bootstrap and material UI, JavaScript for logic building.

Name of the Website: Tarava NFT Marketplace

Idea Origination: - NFT stands for Non-Fungible Token, which is a unique digital asset that
represents ownership or proof of authenticity of a digital asset, such as a piece of art, music,
video, or even a tweet. Unlike fungible tokens like cryptocurrencies, each NFT is unique and
cannot be exchanged or replaced with another token of the same value.
NFTs are based on blockchain technology, which provides a decentralized and transparent
way to verify ownership and authenticity of digital assets.

Each NFT is stored on a blockchain, such as Ethereum or Binance Smart Chain, and contains a
unique digital signature that verifies its ownership and history. NFTs have gained popularity in
recent years, particularly in the art world, where artists can sell their digital artwork as NFTs,
allowing them to prove ownership and authenticity, and potentially earn significant profits from
their work. NFTs have also been used in other industries, such as gaming, music, and sports,
where they can provide a way to monetize and authenticate digital assets.

The value of NFTs is determined by supply and demand, with some NFTs selling for millions
of dollars. However, critics have raised concerns about the environmental impact of NFTs
due to the energy-intensive process of creating and verifying them on blockchain networks.

Components of the website:

• Home page: A NFT marketplace where we can see the other components of the website that are
rendered depending upon the component clicked. The Home page consists of a layout that Has 6-7
clickable links that make other components render.

The home page should be designed to engage and capture the attention of visitors, while also
providing easy access to the most important and relevant information on the site. It should
also reflect the overall brand and tone of the website, and convey a clear message about the
site's purpose and goals.

21
 Fig 1.9 Home page

The characters seen here are open-source to make the website eye-catchy and attractive
because home page defines the curiosity for a website.

• The Genesis NFT: The concept that I made was 2 nfts that can be bought by any user who visits this
website. The user can also select the number of nfts that can be bought and then the buying process
can buy.

Fig 2.0 – Genesis NFT

22
• Tarava NFT: The concept that I made was 2 nfts that can be bought by any user who visits this
website. The user can also select the number of nfts that can be bought and then the buying process
can buy.

Fig 2.1 – Tarava NFT

As we can see that we can buy the NFT using the Connect Wallet button.

• NFT Staking platform: -

NFT is stored on a blockchain network, such as Ethereum or Binance Smart Chain, and contains a
unique digital signature that verifies its ownership and history. NFTs have gained popularity in
recent years, particularly in the art world, where artists can sell their digital artwork as NFTs,
allowing them to prove ownership and authenticity, and potentially earn significant profits from
their work. NFTs have also been used in other industries, such as gaming, music, and sports,
where they can provide a way to monetize and authenticate digital assets. The value of NFTs is
determined by supply and demand, with some NFTs selling for millions of dollars. However,
critics have raised concerns about the environmental impact of NFTs due to the energy-intensive
process of creating and verifying them on blockchain networks. Overall, NFTs are a new and
emerging technology that offers unique possibilities for creators and collectors of digital content,
but it is still a rapidly developing field with many
questions and uncertainties.

This page gives us information about that particular Non-Fungible Token.

23
 Fig 2.2 – The Project

Fig 2.3 – NFT Staking Platform

24
3.3 Code optimization and Logic building

Optimizing JavaScript code involves improving its performance in terms of speed, memory
usage, and overall efficiency.

The steps for code optimization are:

• Minimize HTTP requests: Reduce the number of HTTP requests by minimizing the size of your
JavaScript files. This can be done by minifying your code, which involves removing unnecessary
whitespace and comments.

• Use efficient data structures: Use efficient data structures such as arrays and objects instead of loops
and conditions to reduce the time complexity of your code.

• Avoid global variables: Use local variables instead of global variables as they are faster to access.

• Optimize loops: Optimize loops by reducing the number of iterations and avoiding unnecessary
code within the loop.

• Use efficient DOM manipulation: Use efficient DOM manipulation techniques, such as reducing the
number of times you access the DOM, and minimizing the use of expensive selectors.

By following these tips, we can significantly improve the performance and efficiency of your
JavaScript code.

Building logical code involves breaking down complex problems into smaller, more
manageable tasks, and then implementing a solution that effectively addresses each task.

The steps to better logic building are:

• Understand the problem: Before you start writing code, make sure you fully understand the problem
you are trying to solve. Ask questions, gather requirements, and break down the problem into smaller,
more manageable tasks.

• Plan your solution: Once you understand the problem, plan your solution by breaking it down into
smaller steps. Consider the inputs, outputs, and any edge cases or exceptions that may arise. Use clear
and descriptive variable names: Use clear and descriptive variable names that accurately describe what
each variable represents. This can make your code more readable and easier to understand.

By following these tips, we can build more logical and effective code that has better logic.

25
 Chapter 4 - Software Requirements

4.1 Visual Studio Code

Visual Studio Code is an application software that is used as a platform for programming
both frontend and backend in web development.

It is a popular source code editor developed by Microsoft. It was first released in 2015 and is
available for Windows, macOS, and Linux. VS Code is built on top of the Electron
framework and features a wide range of functionality, including syntax highlighting, code
completion, debugging, Git integration, and extension support.

Fig 2.4 – VS Code

One of the key features of VS Code is its versatility. It supports a wide range of programming
languages, including popular languages like JavaScript, Python, and Java, as well as lesser-
known languages like Rust and Kotlin. Additionally, VS Code is highly customizable, with a
large selection of extensions available to add functionality and enhance the editor's
capabilities. Another notable feature of VS Code is its integrated terminal, which allows
developers to run commands and interact with their code directly from the editor. The built-in
debugger is also highly useful, allowing developers to step through code and diagnose issues
in real-time. Overall, VS Code has become a popular choice for developers due to its
flexibility, functionality, and community-driven ecosystem.

VS code is globally most used integrated development environment because of the wide
range of features that is provides, the best feature being running the JavaScript frontend
server and backend server simultaneously.

26
4.2 React Developer Tools

Here are some of the most commonly used React development tools:

React Developer Tools: This is a browser extension that provides a set of tools for debugging
and inspecting React components. It allows you to inspect the component hierarchy, view
component state and props, and modify component values to test your app's behavior.

Redux DevTools: This is another browser extension that provides a set of tools for
debugging Redux applications. It allows you to inspect and replay actions, view the current
state of the store, and visualize the flow of data in your application.

Jest: This is a JavaScript testing framework that is commonly used for testing React
applications. It provides a simple and intuitive API for writing unit tests and supports a wide
range of features such as snapshot testing, mocking, and code coverage.

ESLint: This is a popular JavaScript linter that can help enforce coding standards and identify
potential issues in your code. There are many plugins available for ESLint that are specifically
designed for React development, such as eslint-plugin-react-hooks and eslint-plugin-react.
Prettier: This is an opinionated code formatter that can help ensure that your code is
consistent and easy to read. Prettier has support for a wide range of languages, including
JavaScript and JSX, which makes it an excellent tool for React development.

Fig 2.5 – React Developer Tools

Overall, these tools can help improve your productivity, simplify debugging, and ensure that
your code is of the highest quality.

27
4.3 Bootstrap and Material UI

Bootstrap and Material UI are two popular front-end frameworks for building responsive and
visually appealing web applications.

Bootstrap: Bootstrap is a free and open-source framework that provides a set of CSS and
JavaScript components for building responsive web applications.
Bootstrap's components are designed to be mobile-first, which means that they are optimized
for smaller screen sizes and can adapt to larger screens. Some of the components provided by
Bootstrap include grids, forms, buttons, typography, and navigation menus.

Bootstrap also includes a variety of pre-designed templates and themes that can help you get
started quickly with your web development projects.
Bootstrap is widely used and has a large community of developers, which means that there is
a lot of documentation and resources available for learning and troubleshooting.

Material UI: Material UI is a front-end framework for React that provides a set of React
components that are based on Google's Material Design guidelines.
Material UI's components are designed to be highly customizable and offer a consistent and
modern look and feel. Some of the components provided by Material UI include buttons,
cards, typography, forms, and navigation menus. Material UI also includes a theming system
that allows you to customize the look and feel of your application by changing the colors,
typography, and other design elements.

Material UI is specifically designed for React and takes advantage of React's component
architecture to provide a seamless integration with React applications. Both Bootstrap and
Material UI can be used to create responsive and visually appealing web applications.

The choice between the two frameworks often comes down to personal preference, the
specific requirements of the project, and the development environment being used.

28
 Chapter 5 [Challenges and Learning]

5.1 Problems faced during the training tenure

During my initial days of training, I was given an assignment of creating some small web
pages like a calculator, string’s case convertor and home pages.
I was instructed to use class-based components instead of function-based components. Previously, I
had worked on function-based components so class-based components were completely new to me.

The major problems that I faced were: -

• Learning new tech stack: As an intern, amidst my learning phase I faced some difficulties like
understanding the new technologies and format of coding. The reactstrap and recharts for the
dashboard component were a bit problematic because of the props that has different data types and
where to put the props properly.

• Writing optimized code: As an intern, I was told to write optimized code i.e., a code that has a good
time complexity and prevent writing nested loops in JavaScript functions that drastically increase the
time complexity and thus, the loading time increases as well.

• Similarly patterned code: To make sure that someone else also understands our code, we should
write similar pattern code like
 Defining variables in the beginning
 Defining states in the beginning
 Writing variables in camel case
 Writing functions in camel case

• Reducing Rendering Time : - The rendering time of a website is the time taken by a component to
load on tha particular page. This time can be reduced by writing faster functions like instead of using a
loop, we can use inbuilt functions like array.map () or array. filter () or array. findIndex ().

29
5.2 How the difficulties were fixed and improved

All the problems that are mentioned above were gradually resolved both by assistance from
my training tutor and by practicing continuously for weeks.

 I tried writing concise code for all the components I worked on during my training tenure. By
writing concise and well-structured code, if some other developer happens to be updating that code,
then he can understand it perfectly and thus spend less time to update or change it.

 I tried writing structured data types and data structures which means that using camel cases for
naming conventions for both methods and data types. In addition to that, defining variables and states
at the top and using meaningful name for any data types or data structures.
These things are pretty basic but play a very important role as a Software Developer
for any tech company.
Proper structured code is the basis of any big tech company’s project. It defines the
ability of the developers and presence of mind.

 Optimizing the code is very important. Firstly, I used to write the program to ensure proper
functionality. Once, all the functionalities are in order, then we can proceed step by step by choosing a
function and then thinking about how we can reduce the lines of code or we can use some inbuilt functions
to reduce the time complexity of the code.
This results in lesser time to load a web page.

The space complexity is also a major part in reducing the code complexity and
increasing optimisation of the code.
Space complexity refers to using data structures like arrays, set, map etc that stores a
set of data together. Now, if we notice clearly in some cases the data structure is not
required and if we remove it, we can improve the space complexity as well.

Although, there were various problems faced during my initial days of training but
gradually it improved, I was able to deliver client satisfactory code.

30
5.3 Personal and Professional growth during the training tenure

• Personal Growth: - After completing my training, I feel that I have gained a tremendous amount of
knowledge in terms of web development.
By getting assistance from industry level engineers who work on real world problems, I
improved my skills and had an aim to do better every passing day.

Throughout the training, the tutors provided me with invaluable insights and advice that
helped me to grow as a professional. Their extensive knowledge of the software field and
their mentorship helped me to understand the intricacies of software development and
allowed me to gain valuable hands-on experience.

The variety of technologies that I have worked on will always be helpful to me in the near
future and the concept of writing client satisfactory and user-friendly code will always be a
top priority.

• Professional Growth: - After completing my training, I have gained some decent amount of
knowledge in web development as well as REACT JS.
Since, React JS has been on a global demand right now, this experience will help me at any
point in my near future.

The connections that I built during my training tenure will also be very helpful to me throughout
my carrier. The mentors that supported me and guided me at times when I was a novice were the
biggest help I could have hoped for and by performing well and good during my internship
tenure, I also gained their vote of confidence and will be on their referral list whenever required.

The experience to work for an actual tech company that solves real world problems, to get to
talk to entrepreneur directors and analyse their thought process will always motivate me to
work harder and work productively.

31
 Future Scope
The future scope for React JS engineers looks promising, as the demand for skilled React JS
developers continues to grow.

Here are some reasons why:

• Increased adoption: React JS is already widely used by many companies, and its adoption is
expected to continue to grow. As more companies adopt React JS for their front-end development
needs, the demand for skilled React JS engineers is likely to increase.

• React Native: React Native is a mobile application development framework based on React JS. As
mobile applications become more prevalent, the demand for skilled React Native developers is also
likely to increase.

• New features and updates: React JS is continuously evolving, and new features and updates are
regularly released. This means that React JS engineers will need to stay up-to-date with the latest
developments to remain competitive in the job market.

• React JS ecosystem: The React JS ecosystem includes many useful tools and libraries, such as
Redux and React Router. This means that React JS engineers can easily build complex applications
using these tools, which can lead to more job opportunities.

• Remote work: React JS is well-suited for remote work, as it is a flexible and easy-to-use library.
This means that React JS engineers can work from anywhere in the world, which can open up more
job opportunities.

Overall, the future scope for React JS engineers looks promising. With its increased adoption,
the growth of React Native, new features and updates, a strong ecosystem, and the ability to
work remotely, React JS is likely to remain a popular choice for front-end development for
the foreseeable future.

32
 Conclusion

In conclusion, my training as a front-end engineer trainee has been a valuable and enriching
experience.
During my time at Internshala, I had the opportunity to work on challenging projects and
contribute to the development of software products used by clients worldwide.

Through my training, I was able to gain hands-on experience in software development

methodologies, programming languages, and tools used in the industry. This experience has
helped me develop technical skills and learn how to work collaboratively in a professional
setting.

Moreover, I had the opportunity to work under experienced professionals who provided me
with guidance, support, and feedback throughout my internship. This helped me improve my
skills, and also gave me insights into the working culture and practices of the software
industry. Overall, my training as a front-end engineer trainee has been an enriching
experience that has allowed me to develop my technical and professional skills.

The work culture that I experienced during these 6 weeks help me realize my potential and I
would like to thank my mentor Anuj Sharma at Internshala who assisted me throughout my
training phase.

I look forward to using the knowledge and skills I have gained to contribute to the software
industry in the future.

33
 References

[1] "HTML and CSS: Design and Build Websites" by Jon Duckett

[2] "JavaScript and jQuery: Interactive Front-End Web Development" by Jon Duckett

[3] "Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web

[4] “Graphics" by Jennifer Niederst Robbins

[5] "CSS Mastery: Advanced Web Standards Solutions" by Andy Budd, Cameron Moll

[6] "Responsive Web Design" by Ethan Marcotte

[7] "Web Design with HTML, CSS, JavaScript and jQuery Set" by Jon Duckett

[8] "JavaScript: The Definitive Guide: Master the World's Most-Used Programming

[9] "Web Standards Solutions: The Markup and Style Handbook" by Dan Cederholm

[10] "Don't Make Me Think: A Common-Sense Approach to Web Usability" by Steve Krug

[11] "The Principles of Beautiful Web Design" by Jason Beaird

These r eso urces provid e a com prehen sive intr oduction t o fro nt-end web development, cover ing HT ML, CSS, JavaScript, and var iou s d esig n an d deve lopme nt p rinciple. SSS

35