Industrial Training

Mini Project Report

On Web Development
at

W3Villa Technologies Pvt Ltd.

Submitted by:

AVIRAJ SINGH
(2100320120040)

Under the Mentorship of

Mrs. Kevin Sharma(Manager)

ABES Engineering College

NH-09, Ghaziabad,
Uttar Pradesh 201009
2024
CERTIFICATE
 DECLARATION

I, Aviraj Singh (2100320120040), hereby declare that the summer training report titled
"Web Development," submitted to the Department of Computer Science at ABES
Engineering College, Ghaziabad, is an authentic account of my work conducted at W3Villa
Technologies Pvt Ltd. This training took place under the industrial mentorship of Mr.
Kevin Sharma (Project Manager, W3Villa Technologies Pvt Ltd.) from August 1, 2024, to
October 31, 2024.

I confirm that the content of this report, whether in full or in part, has not been reproduced from
any existing work of any other individual and has not been submitted elsewhere at any time for
this summer training.

Aviraj Singh
2100320120040
 Acknowledgement

I would like to express my heartfelt gratitude to my manager, Mr. Kevin Sharma, for his unwavering
motivation and support throughout the project. I also extend my thanks to my mentor, Mr. Vaibhav
Ranjan, for her invaluable guidance and assistance during this endeavor.

I am grateful to W3Villa Technologies for the opportunity to work with them and to be an integral
part of the development process. My sincere appreciation goes to all the officials and employees at
W3Villa Technologies, whose support was crucial to the success of my internship program.

Lastly, I would like to acknowledge the encouragement and motivation I received from my teachers. A
special thanks to my final year Mini Project mentor, Mr. Aviraj Singh (Assistant Professor at ABES
Engineering College, Ghaziabad), for inspiring me to pursue this industry internship.

Aviraj Singh
2100320120040
Date:
ABES Ghaziabad
 Abstract

The primary objective of this internship was to focus on website development. Various
programming languages are employed to create web-based applications or software,
with some dedicated to the user interface (UI) and frontend, while others cater to
backend design. For instance, technologies such as React.js, HTML5, CSS, JavaScript, and
the TailwindCSS framework are utilized for frontend development. Conversely,
languages like MongoDB, SQL, Express.js, Node.js, and Java are used for backend
development. Additionally, contemporary frameworks such as GSAP, Framer Motion,
and Sanity.io are gaining popularity. These frameworks utilize a structured programming
approach known as the Model-View-Controller (MVC) paradigm.

iv
 CONTENTS

CERTIFICATE i
DECLARATION ii

Acknowledgement iii

Abstract iv

1. Introduction 4
1.1 Objectives ......................................................... 4

1.2 Goals ................................................................. 4

1.3 Motivation ......................................................... 5

2. Portfolio Website of W3Villa Technologies 5

2.1 Problem Statement ........................................... 6

2.2 Objective of the project .................................... 6

2.3 Project Features ............................................... 6

2.4 Project Modules ............................................... 7

3. DATA FLOW DIAGRAMS 8

3.1 ER-DIAGRAM ..................................................... 8

3.2 BLOCK DIAGRAM ................................................ 9

3.3 Screenshots ....................................................... 10

4. Technologies Used in Project 12

4.1 Rect JS............................................................... 14

4.2 TailwindCSS/CSS3 ............................................. 16

4.3 JavaScript......................................................... 19

1
 4.4 Git ................................................................................ 25

4.5 Github ......................................................................... 28

5. Conclusions and outcomes 30

6. References and Bibliography 31

List of Figures

Fig No. Title Page no.

1. ER Diagram 9

Block Diagram 10
2.

2
 CHAPTER-1
Introduction
1.1 Objectives
The internship aims to bridge the gap between theoretical knowledge and practical experience
gained from various organizations. It involves acquiring valuable skills such as effective
workplace practices, computer instrumentation, multitasking, analytical thinking, budget
management, and enhanced communication abilities. Key learning areas include the
fundamental concepts and structure of HTML, CSS, and the Bootstrap framework, as well as
React and database creation linked to backend development. This experience is designed to
improve communication skills, understand organizational dynamics, and enhance technical
competencies.

1.2 Goals
 Understand the basic concepts and structure of HTML, CSS, React, and database creation,
including backend connectivity.
 Acquire practical knowledge of programming.
 Enhance presentation skills through collaboration with others.
 Foster professional ethics and values.
 Improve technical skills.

1.3 Motivation
The motivation for pursuing this internship stems from the desire to gain practical expertise
in technology and engineering. It is crucial to not only understand theoretical concepts but
also to implement them in real-world scenarios to enhance our skills in the job market. My
intention was to learn more about the IT sector and its work environment. Developing a
desktop-based system for website creation is accessible and straightforward. Prior to this
internship, I recognized that I was at a beginner level in web development; thus, my initial
task was to learn, create, and innovate. The learning curve associated with web
development is both intriguing and rewarding. Building a project using HTML, CSS,
JavaScript, React, Node.js, and MongoDB becomes manageable once you have a clear
understanding of the process..

3
 CHAPTER-2
Portfolio Website for W3Villa Technologies

2.1 Problem Statement

W3Villa is an IT company looking to establish a professional online presence through a portfolio website.
The website will showcase the company’s services, projects, and expertise to potential clients. The
challenge is to create an engaging and visually appealing platform that effectively communicates the
company’s value proposition and attracts new business.

2.2 Objective of the Project

- Establish a Professional Online Presence: Create a website that reflects the company’s branding and
values.
- Showcase Services: Clearly present the range of IT services offered to potential clients.
- Highlight Projects: Feature completed projects to demonstrate expertise and build credibility.
- Enhance User Engagement: Provide a user-friendly interface that encourages visitors to explore the site
and learn more about the company.
- Implement Strong Security Measures: Ensure that the website is secure and user data is protected.

2.3 Project Features

- Home Page: An inviting landing page that highlights key services and showcases the company’s mission.
- Service Descriptions: Detailed pages for each service offered, explaining features and benefits.
- Project Showcase: A portfolio section displaying past projects with descriptions and client testimonials.
- Contact Form: An easy-to-use form for potential clients to inquire about services or request quotes.
- Blog Section: A space for sharing industry insights, company news, and updates to engage visitors.

2.4 Project Modules

Company Overview Module

- Brand Identity: Present the company’s vision, mission, and values, establishing a strong brand identity.
- Team Introduction: Introduce key team members with brief bios and roles, emphasizing expertise and
experience.

4
Services Module

- Service Listings: Display a comprehensive list of IT services, each with detailed descriptions and
examples of how they benefit clients.
- Case Studies: Include case studies of significant projects to illustrate problem-solving capabilities and
results achieved.

Portfolio Module

- Project Highlights: Showcase select projects with visuals, client details, and the challenges addressed.
- Client Testimonials: Incorporate feedback from clients to build trust and credibility.

Contact Module

- Contact Information: Provide multiple ways for potential clients to get in touch, including phone, email,
and social media links.
- Inquiry Form: A simple form for clients to request additional information or a consultation.

Blog Module

- Content Sharing: Regularly publish articles on IT trends, company updates, and insights to engage the
audience and improve SEO.

This structured approach will not only enhance W3Villa's visibility and attractiveness to potential clientsbut
also foster engagement and establish the company as a leader in the IT industry.

5
 CHAPTER-3

DATA FLOW DIAGRAMS

ER-DIAGRAM

6
Block diagram

7
Screenshots

8
8
1
 CHAPTER-4
Technologies Used in Project

4.1 ReactJS
The ReactJS tutorial covers both basic and advanced concepts of this powerful JavaScript library.
Currently, ReactJS is one of the most popular front-end libraries, supported by a robust
community and a solid foundation.
ReactJS is a declarative, efficient, and flexible JavaScript library used for building reusable UI
components. It is an open-source, component-based library responsible solely for the view layer
of applications. Initially developed and maintained by Facebook, ReactJS has been integrated
into products like WhatsApp and Instagram.
Our ReactJS tutorial encompasses all the essential topics for mastering the library, including:
- Introduction to ReactJS
- Features of ReactJS
- Installation of ReactJS
- Advantages and disadvantages of ReactJS
- JSX in ReactJS
- Components in ReactJS
- State management in ReactJS
- Props in ReactJS
- Forms in ReactJS
- Events in ReactJS
- Animation in ReactJS
Features of ReactJS
- JSX: ReactJS uses JSX, which is faster than standard JavaScript due to optimizations made during its
translation to regular JavaScript. This feature simplifies template creation.
- Virtual DOM: The Virtual DOM serves as a lightweight copy of the actual DOM. For every object in the
original DOM, there is a corresponding object in the React Virtual DOM. Although it mirrors the
original, it does not directly alter the document layout. Manipulating the DOM is slow, while
updates to the Virtual DOM are quick, as they do not require immediate rendering on the screen.
- One-way Data Binding: This feature provides enhanced control over your application’s data flow.
- Components: Components are fundamental building blocks of React applications. Every application
developed in React is composed of these modular pieces. This approach simplifies UI development,
allowing developers to break down the user interface into smaller components that can be worked on
independently and later combined into a parent component for the final UI.

- Performance: ReactJS leverages JSX, which is faster than traditional JavaScript and HTML. The use of
the Virtual DOM significantly reduces the time required to update webpage content.
1
4.1 ReactJs
ReactJS tutorial provides basic and advanced concepts of ReactJS. Currently, ReactJS is
one of the most popular JavaScript front-end libraries which has a strong foundation and
a large community.
ReactJS is a declarative, efficient, and flexible JavaScript library for building reusable UI
components. It is an open-source, component-based front end library which is responsible
only for the view layer of the application. It was initially developed and maintained by
Facebook andlater used in its products like WhatsApp Instagram.
Our ReactJS tutorial includes all the topics which help to learn ReactJS. These are ReactJS
Introduction, ReactJS Features, ReactJS Installation, Pros and Cons of ReactJS, ReactJS JSX,
ReactJS Components, ReactJS State, ReactJS Props, ReactJS Forms, ReactJS Events,
ReactJSAnimation and many more.

Features of React.js
• Use JSX: It is faster than normal JavaScript as it performs optimizations while
translatingto regular JavaScript. It makes it easier for us to create templates

• Virtual DOM: It exists which is like a lightweight copy of the actual DOM. So forevery
object that exists in the original DOM, there is an object for that in React Virtual
DOM. It is exactly the same, but it does not have the power to directly change the
layoutof the document. Manipulating DOM is slow, but manipulating Virtual DOM
is fast as nothing gets drawn on the screen.

• One-way Data Binding This feature gives you better control over your application.

• Components: A Component is one of the core building blocks of React. In other

words, wecan say that every application you will develop in React will be made up
of pieces called components. Components make the task of building UIs much
easier. You can see a UI broken down into multiple individual pieces called
components and work on them independently and merge them all in a parent
component which will be your final UI.

• performance React.js use JSX, which is faster compared to normal JavaScript and
HTML.Virtual DOM is a less time taking procedure to update webpages content.

1
 Why we use React.js
• The main objective of ReactJS is to develop User Interfaces (UI) that
improves the speed of the apps. It uses virtual DOM (JavaScript object),
which improves the performance ofthe app. The JavaScript virtual DOM is
faster than the regular DOM. We can use React on the client and server-
side as well as with other frameworks. It uses component and data patterns

1
 that improve readability and helps to maintain larger app.

4.2 CSS

CSS (Cascading Style Sheets) is a powerful tool for styling HTML and XML documents, allowing
developers to control the presentation of web pages across different media. By separating
content from presentation, CSS enhances accessibility and provides greater flexibility in design.

Historically, CSS has evolved through versions like CSS1, CSS2.1, and CSS3, but the current
approach is to treat CSS as an ongoing specification without specific version numbers. This
change reflects a more fluid development process, where updates and new features can be
added continuously.

CSS enables the use of external stylesheets, which allows multiple web pages to share a single
style, simplifying maintenance and reducing redundancy. Overall, its role in web development is
crucial for creating visually appealing and well-structured websites.

CSS (Cascading Style Sheets) enhances web development by allowing the same markup to be
styled differently for various media, such as screens, print, and assistive technologies like screen
readers and Braille devices. This flexibility helps improve accessibility and user experience.

The term "cascading" refers to the priority scheme used to resolve conflicts when multiple style
rules apply to the same element. This predictable system allows developers to manage styles
efficiently and ensure the intended design is applied consistently.

1
nd repetition in the structural content; and enable the .css file to be cached to improve
the page load speed between the pages that share the file and its formatting.
The separation of formatting and content in CSS allows web developers to present the
same markup in various styles tailored for different rendering methods—whether on-
screen, in print, through voice via screen readers, or on Braille devices. CSS also provides
rules for adapting styles for mobile devices, enhancing accessibility and usability across
platforms.

The term "cascading" refers to the predictable priority scheme that determines which
style rule applies when multiple rules match a specific element. This feature is crucial for
maintaining clarity and consistency in styling.

The World Wide Web Consortium (W3C) maintains the CSS specifications and provides a
free validation service to help developers ensure compliance with standards. CSS is
recognized under the MIME type text/css, as established in RFC 2318.

Learning CSS

CSS First Steps

This module introduces the basics of CSS, helping you understand how it works, its syntax,
and how to begin styling HTML elements. You'll learn to alter fonts, colors, sizes, spacing,
and add layout features like columns and animations.

CSS Building Blocks

Once you're familiar with the basics, this module dives deeper into more advanced
concepts. It covers topics such as the cascade and inheritance, various selector types,
units and sizing, styling backgrounds and borders, and debugging techniques. This
knowledge provides you with a solid foundation for writing effective CSS and prepares
you for more specialized areas like text styling and layout design.

1
 With these modules, you can build a robust understanding of CSS and develop your skills
toward mastery in web design and development.

CSS Styling Text

After mastering the basics of CSS, focusing on text styling is essential since it's one of the most common
applications. This module covers fundamental text styling techniques, including:
- Font Selection: Choosing different typefaces.
- Font Weight: Adjusting boldness.
- Font Style: Using italics and other styles.
- Spacing: Modifying line height and letter spacing.
- Text Effects: Adding drop shadows and other decorative features.
Additionally, you'll learn how to apply custom fonts and style lists and links, enhancing the overall aesthetic and
readability of your content.

Selectors in CSS
Selectors in CSS determine which parts of your markup a specific style will apply to. Here are some key types of
selectors:
- Type Selector: Targets all elements of a specific type, e.g., `h2` for second-level headers.
- ID Selector: Identifies a unique element in the document using a hash prefix, e.g., `#elementID`. IDs are case-
sensitive and should only be applied to a single element.
- Class Selector: Annotates multiple elements with a dot prefix, e.g., `.classname`. Classes can be reused across
different elements.
Selectors can also specify elements based on their position relative to others in the document tree.

Pseudo-Classes and Pseudo-Elements

CSS allows for more advanced styling through pseudo-classes and pseudo-elements:
- Pseudo-Classes: These apply styles based on dynamic states of elements. For example, `:hover` applies
styles when a user hovers over an element, and is written as `a:hover` for links. Other examples include
`:link` and `:visited` for styling links based on their state.
- Pseudo-Elements: These target specific parts of an element, allowing for more granular control. For
example, `::first-line` styles the first line of a paragraph, and `::first-letter` styles the first letter of a block of
text.
1
Notation
It's important to note the notation difference:
- Single-colon (`:`) is used for pseudo-classes.
- Double-colon (`::`) is used for pseudo-elements, which helps distinguish between the two in your
stylesheets.

By understanding and utilizing these concepts, you'll be well-equipped to create visually appealing and well-
structured text elements on your web pages.

Combining Selectors in CSS

Selectors in CSS can be combined in various ways to achieve high specificity and flexibility. Here are some
key points about combining selectors:

- Multiple Selectors: You can join selectors in a spaced list to target elements based on their location,
type, ID, class, or any combination. The order matters significantly. For example:
- `div .myClass { color: red; }` applies to all elements with the class `myClass` that are inside `div`
elements.
- `.myClass div { color: red; }` applies to all `div` elements that are inside any element with the class
`myClass`.
- `div.myClass { color: red; }` targets `div` elements that have the class `myClass`.

This flexibility allows developers to create precise styling rules tailored to their document structure.

The Role of CSS in Web Development

Before CSS, presentational attributes such as font colors, backgrounds, and element alignments were
embedded directly in HTML markup. This often led to repetitive and complex code, making
maintenance cumbersome and increasing the likelihood of errors.

Advantages of CSS

1
1. Simplified HTML: CSS enables the separation of content and presentation. Authors can define
typographic characteristics (like color, font, and size) in a stylesheet rather than repeating them in
HTML.
2. Consistency: By using CSS, you can apply the same styles to multiple elements throughout a document
easily. For instance, you can set all `h2` headings to have the same color and font style with a single CSS
rule.
3. Independent Styling: CSS allows you to define styles independently for different media, such as on-
screen versus print. This means you can create a web-friendly layout and a distinct printed format
without altering the HTML structure.
4. Non-Visual Styles: CSS also includes non-visual styles, which can enhance accessibility. For example,
styles can be defined for aural text readers to improve reading speed and emphasis.
5. Deprecated Presentational HTML: The W3C has deprecated the use of presentational HTML markup,

emphasizing the importance of CSS for styling. This shift encourages cleaner, more maintainable code.
By utilizing CSS effectively, developers can create well-structured, maintainable web documents that are
visually appealing and accessible across different media

1
4.3 JavaScript
JavaScript is an object-based scripting language which is lightweight and cross-platform
JavaScript is not a compiled language, but it is a translated language. The JavaScript
Translator(embedded in the browser) is responsible for translating the JavaScript code for the
web browser.
JavaScript (js) is a light-weight object-oriented programming language which is used by
several websites for scripting the webpages. It is an interpreted, full-fledged programming
language that enables dynamic interactivity on websites when applied to an HTML document.
It was introduced in the year 1995 for adding programs to the webpages in the Netscape
Navigator browser. Since then, it has been adopted by all other graphical web browsers. With
JavaScript, users can build modern web applications to interact directly without reloading the
page every time. The traditional website uses js to provide several forms of interactivity and
simplicity.
The ECMAScript standard does not include any input/output (I/O), such as networking,
storage, or graphics facilities. In practice, the web browser or other runtime system provides
JavaScript APIs for I/O.
JavaScript engines were originally used only in web browsers, but are now core componentsof
some servers and a variety of applications. The most popular runtime system for this usageis
Node.js.
Although Java and JavaScript are similar in name, syntax, and respective standard libraries,the
two languages are distinct and differ greatly in design.

Features of JavaScript?
There are following 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.

21
3. JavaScript is an object-oriented programming language that uses prototypes rather than
using classes for inheritance. JavaScript is a weakly typed language, where certain types are
implicitly cast (depending on the operation.

4. JavaScript is the most popular programming language for both client-side and server-side to
make interactive web pages. It is mainly used to develop websites and web-based applications.

5. Creating Interactive Websites JavaScript is used to make the web pages dynamic and
interactive. It means using JavaScript, we can change the web page content and styles
dynamically.

6. Building ApplicationsJavaScript is used to make web and mobile applications. To build the web
and mobile apps, we can use most popular JavaScript frameworks like – ReactJS, React
7. Native, Node.js etc.
8. Web Servers We can make robust server applications using JavaScript. To be precise we use
JavaScript frameworks like Node.js and Express.js to build these servers

9. Game DevelopmentJavaSCript can be used to design Browser games. In JavaScript, lots of game
engines available that provide frameworks for building games.

10. JavaScript is an advanced programming language that makes web pages more interactive and
dynamic whereas HTML is a standard markup language that provides the primary structure of
a website.

11. JavaScript simply adds dynamic content to websites to make them look good and HTML work
on the look of the website without the interactive effects and all.

12. JavaScript manipulates the content to create dynamic web pages whereas HTML pages are
static which means the content cannot be changed.

13. JavaScript is not cross-browser compatible whereas HTML is cross-browser compatible.

JavaScript can be embedded inside HTML but HTML can not be embedded inside JavaScript.

22
Why to learn JavaScript ?
No need of compilers-Since JavaScript is an interpreted language, therefore it does not need
any compiler for compilations.

Used both Client and Server-side-Earlier JavaScript was used to build client-side applications
only, but with the evolution of its frameworks namely Node.js and Express.js, it is now widely
used for building server-side applications too.

Helps to build a complete solution-As we saw, JavaScript is widely used in both client and server-
side applications, therefore it helps us to build an end-to-end solution to a given problem

Used everywhere-JavaScript is so loved because it can be used anywhere. It can be used to

develop websites, games or mobile apps, etc

Huge community support-JavaScript has a huge community of users and mentors who love this
language and take it’s legacy forward.

33
4.4 Git
Git is a robust, free, and open-source distributed version control system that efficiently tracks changes
across various files, primarily used for collaborative software development. Here’s an overview of its
key features and implications:

Key Features of Git

1. Distributed Version Control: Every Git repository on a developer's machine is a complete repository,
containing full history and version-tracking capabilities. This independence from a central server allows
for seamless offline work.

2. Performance Goals : Git is designed for speed and efficiency, supporting non-linear workflows with
thousands of parallel branches, making it suitable for large-scale projects.

3. Snapshot Approach : Instead of tracking changes to individual files, Git takes snapshots of the entire
directory tree at each commit. This model simplifies the management of project states over time.

4. Data Integrity : Each object in Git is associated with an SHA-1 checksum, ensuring that the data
remains uncorrupted. This integrity check extends to both the packfiles (which store multiple objects)
and their corresponding index files.

5. Efficient Storage : While Git stores new objects as separate files initially, it uses packfiles to store
numerous objects in a delta-compressed format, which saves space. Periodic repacking is necessary to
maintain storage efficiency, and this can be done automatically or manually with commands like `git gc`.

Implications of Git's Design

- No Explicit File Identity : Unlike traditional version control systems that maintain explicit relationships
between file revisions, Git does not track these at a granular level. This approach offers flexibility in
handling file changes but may complicate understanding how changes relate across different versions.

- Facilitated Collaboration : The snapshot model and distributed nature allow multiple developers to
work on the same project without interfering with each other, making merging branches and
integrating changes more straightforward.

- Reduced Complexity : By moving away from individual file tracking to a more holistic directory tree
approach, Git simplifies the developer's interaction with the version control system, leading to cleaner
and more maintainable project histories.

Conclusion
Git's architecture, created by Linus Torvalds in 2005 for Linux kernel development, has revolutionized version
control in software development. Its emphasis on speed, data integrity, and a snapshot-based approach
34
allows for efficient and collaborative programming, making it an essential tool for developers worldwide. The
system's design choices reflect a shift toward more flexible and robust workflows that accommodate the
complexities of modern software development.These implicit revision relationships have some significant
consequences:

Understanding Git's Change History and Renames

Git's approach to managing the change history of files presents both advantages and some computational
costs. Here are the key points regarding how Git handles file histories and renames:

Change History Examination

- Global vs. File-Specific History: Examining the change history of a single file requires traversing the entire
global history to determine which changes affected that specific file. This process is more resource-intensive
than reviewing the history for the entire project but allows for efficient generation of a history that includes
changes to an arbitrary set of files (e.g., a subdirectory and its associated header files).

- Efficiency in Multiple File History: This method enables Git to produce a comprehensive history for a
collection of files, maintaining efficiency in tracking related changes across multiple files.

Renames in Git

- Implicit Rename Detection: Unlike some version control systems (like CVS), which tie a file’s history to its
name, Git detects renames implicitly by analyzing the similarity between files during history traversal. This
avoids the inaccuracies that can arise from explicitly recording a unique identifier for a file.

- Handling of Renames: When a file is renamed, Git will identify it by comparing the contents of the old and
new files. If a file with the same name doesn’t exist in the previous revision, Git looks for a similar file that did
exist. This approach allows for a more accurate representation of file history, especially in cases where files
are split, merged, or renamed.

- Potential Limitations: While this implicit detection is advantageous, it can sometimes lead to
misinterpretations, such as when a file is renamed with changes in the same commit. In such cases, Git might
see it as a deletion and creation rather than a rename. Developers can mitigate this by separating the rename
commit from the changes.

Merging Strategies in Git

Git offers several strategies for merging branches, each tailored to different scenarios:

1. Resolve: This is the traditional three-way merge algorithm, which examines the common
ancestor and compares it with the current branches. It’s a straightforward approach that works
well for simpler merges.
35
2. Recursive: This is the default strategy when merging a single branch. It builds upon the
three-way merge by allowing multiple common ancestors, creating a merged tree from these
ancestors. This method reduces merge conflicts and effectively handles renames during the
merge process.

3. Octopus: This strategy is used when merging more than two branches. It handles complex
merges where multiple heads are combined into one branch.

Conclusion
Git's architecture and merging strategies make it a powerful version control system. Its implicit
detection of file histories and flexible merging capabilities enhance collaboration among
developers. While reviewing file-specific histories can be computationally intensive, the
advantages of understanding changes in context and maintaining a comprehensive project
history outweigh this cost.

Git's Design Philosophy

Linus Torvalds designed Git with a focus on filesystem principles rather than traditional source
control management (SCM). This unique perspective has led to features that evolved as
needed, ultimately providing a robust set of tools for version control.

Data Structures in Git

Git utilizes two main data structures:

1. Mutable Index: Also known as the stage or cache, this structure holds information about the
working directory and prepares the next revision for committing.
2. Immutable Object Database: This append-only database stores the core objects used by Git,
which include:
- Blob: Represents the content of a file without any metadata. Each version of a file is stored
as a unique blob, identified by a SHA-1 hash of its content.
- Tree: Functions like a directory, containing a list of filenames along with references to blobs

36
or other trees. This snapshot representation forms part of a Merkle tree, allowing efficient
storage and retrieval of directory structures.

- Commit: Links tree objects together, recording the state of the project at a specific point in
time. It includes metadata like timestamps, log messages, and references to parent commits.

- Tag: A reference to another object, often used for marking important commits (like releases)
with additional metadata.

- Packfile: Bundles various objects into a compressed file for efficient storage and network
transfer.

References in Git

Git employs labels called refs to track the locations of various commits:
- Heads (Branches): Named references that automatically update to point to new commits
made on those branches.

- HEAD: A reserved pointer that indicates the current branch in the working directory, guiding
the commit process.

- Tags: Similar to branches, but fixed to specific commits, allowing users to label important
milestones in the project history.

Summary
Git’s innovative design, with its focus on efficient data handling and intuitive merging
strategies, provides developers with powerful tools for managing their code. Its structure
supports robust collaboration, making it the preferred choice for modern software
development.their entirety using zlib compression. This can consume a large amount of disk
space quickly, so objects can be combined into packs, which use delta compression to save
space, storing blobsas their changes relative to other blobs.
Additionally, git stores labels called refs (short for references) to indicate the locations of
various commits. They are stored in the reference database and are respectively:
Heads (branches): Named references that are advanced automatically to the new commit
when a commit is made on top of them. HEAD: A reserved head that will be compared against
the working tree to create a commit. Tags: Like branch references but fixed to a particular
commit. Used to label important points in history.
37
 4.5 Github
GitHub, Inc. is an Internet hosting service for software development and version control usingGit. It
provides the distributed version control of Git plus access control, bug tracking, softwarefeature
requests, task management, continuous integration, and wikis for every project.Headquartered in
California, it has been a subsidiary of Microsoft since 2018.
It is commonly used to host open source software development projects. As of June 2022,GitHub
reported having over 83 million developers and more than 200 million repositories, including at least 28
million public repositories. It is the largest source code host as of November2021.
From 2012, Microsoft became a significant user of GitHub, using it to host open-source projects and
development tools such as .NET Core, Chakra Core, MSBuild, PowerShell, PowerToys, Visual Studio
Code, Windows Calculator, Windows Terminal and the bulk of its product documentation (now to be
found on Microsoft Docs).
On June 4, 2018, Microsoft announced its intent to acquire GitHub for US$7.5 billion. The deal closed on
October 26, 2018. GitHub continued to operate independently as a community,platform and business.
Under Microsoft, the service was led by Xamarin’s Nat Friedman, reporting to Scott Guthrie, executive
vice president of Microsoft Cloud and AI. GitHub’s CEO, Chris Wanstrath, was retained as a "technical
fellow," also reporting to Guthrie. Nat Friedmanresigned November 3, 2021; he was replaced by
Thomas Dohmke.
There have been concerns from developers Kyle Simpson, JavaScript trainer and author, andRafael Laguna,
CEO at Open-Xchange over Microsoft’s purchase, citing uneasiness over Microsoft’s handling of
previous acquisitions, such as Nokia’s mobile business and Skype.
This acquisition was in line with Microsoft’s business strategy under CEO Satya Nadella, which has seen
a larger focus on cloud computing services, alongside the development of andcontributions to open-
source software. Harvard Business Review argued that Microsoft was intending to acquire GitHub to
get access to its user base, so it can be used as a loss leader to encourage the use of its other
development products and services.
Concerns over the sale bolstered interest in competitors: Bitbucket (owned by Atlassian), GitLab and
SourceForge (owned by BIZX, LLC) reported that they had seen spikes in new usersintending to migrate
projects from GitHub to their respective services.

In September 2019, GitHub acquired Semmle, a code analysis tool. In February 2020, GitHub
launched in India under the name GitHub India Private Limited. In March 2020, GitHub announced
that they were acquiring npm, a JavaScript packaging vendor, for an undisclosed sum of money.
The deal was closed on 15 April 2020.

In early July 2020, the GitHub Archive Program was established, to archive its open-sourcecode in
perpetuity

38
 Conclusions and outcomes

Overall, my experience was a fantastic learning opportunity, and I am grateful for the
training provided by my professor, Ms. Sonia Lamba. His guidance allowed me to
acquire valuable skills in web development, which I found immensely beneficial.

I particularly enjoyed working on the assigned project, as it gave me a chance to apply

my skills to solve real-world problems. Tackling the challenges presented by the project
helped me understand the intricacies of web development and reinforced my problem-
solving abilities.

The demand for web developers in both government and private organizations is
significant, as they require professionals for online projects and website creation. With
expertise in these areas, job opportunities are readily available, making this field a
promising career path.

In summary, the training not only enhanced my technical skills but also boosted my
confidence in tackling real-world challenges, preparing me for a successful career in
web development.

39
References and Bibliography

• Javatpoint for information of React.js, TailwindCSS, CSS, Git,GitHub

– https://www.geeksforgeeks.org/javascript/

– https://www.javatpoint.com/reactjs-tutorial

– https://www.javatpoint.com/css