FRONT-END DEVELOPMENT TRAINING PROJECT REPORT

FIGMA
Figma is a design tool that lets you create designs for mobile and web interfaces, or any
other kind of design you can think of. Figma is a collaboration tool for teams and
individuals to create and share high-quality work.

You can use it not only to design but also to prototype interactions, animate transitions,
add multiple art-boards, animate vectors with timeline-based animations, add live
previews during editing (and publish your changes), add commenting and feedback
features to get real-time collaboration on the go.

Getting Started with Figma and Building Next-Level Prototypes

The experience of using Figma is best described by the words “fast, seamless, and
smooth.” The design process is much faster than other software. This software saves
time by cutting out the need to upload files and try to find layers. Figma is a vector-based
design tool that can be used for any purpose. It’s not just for designers; it’s also great for
prototyping web layouts, product animations, or an e-commerce site design.

Users can create animation sequences right in Figma with animation triggers or link to
Keynote or After Effects to create even more complex animations. Figma has many
features that help you build next-level prototypes.
 FRONT-END DEVELOPMENT TRAINING PROJECT REPORT

While it’s true that each team and project may have a different workflow, there are
functions and phases that are essential components of product design and management.
Figma covers each.

1. Accessibility and collaboration. No matter the tools a team uses, there needs to
be a way to work together, present projects, gather feedback, and keep
stakeholders in the loop. All of these features are available in Figma.
2. Flexibility to iterate and produce deliverables. Figma is flexible and can be
used as a collaborative whiteboard for sketching initial ideas and iterating
everything from wireframes to high-fidelity mock-ups.
3. Ability to build prototypes and test. Designing a mobile app? Build and publish
interactive prototypes and test them directly on smartphones–all from Figma.
4. Establishing a single source of truth. Figma is an excellent way to define
product design systems that reside completely online. It’s a single source of truth
by default. No more wondering, “Is this the latest version?”
5. Smooth handoff. Just share a link with developers, and they’ll have access to all
the information needed to implement the design–redlines, measurements, and
graphic assets ready to be exported.
6. Versatility to be customized and improved. Figma’s plugin API allows teams
to write their own plugins or tap into the broader user community and extend
the tool with new functionalities.

How To Use Figma to Create Efficient UI Designs

Figma is a web-based UI design tool with an intuitive interface and a library of

components.

Figma has a range of built-in symbols, shapes, and components that cover more than
90% of your design needs. The best part is that if you don’t find what you are looking for
in Figma’s library, you can simply upload your own design and place it inside the
prototype or search through the community which has a diverse set of resources and
plugins to help make the design process easier for any designers workflow.
 FRONT-END DEVELOPMENT TRAINING PROJECT REPORT

Figma’s interface is built around real-time collaboration, so it’s great for keeping all
your team members on the same page. What’s more, Figma uses vector graphics rather
than pixels, meaning you can resize things without losing quality.

How Figma Will Make Designing Easier In The Future

Figma integrates the tools for all stages of the creative process in one program to
increase efficiency. It can be used for designing websites, web apps, mobile apps, and
even hardware products

Designers are always looking for the next best tool, the next best design software to
make their job easier. Figma is one of those tools that will make designing simpler in the
future.

With Figma, designers can share their design with developers who can then work on it
collaboratively and give feedback without having to switch tools or wait for files to
export. With Figma, there are no file formats and everything is editable- even
animations and interactions. It also syncs with Dropbox so once you’ve shared your
designs, they’ll be accessible any time from any device.

Figma’s latest technology is a major step in making it easier for designers to work
visually, collaboratively, and globally. In addition to their product updates, Figma has
collaborated with Google Cloud Platform on a series of workshops that introduce
designers to the power of machine learning. The workshops will be focused on
understanding how Google Cloud Platform services can help them work better as a team
while also introducing them to new technologies for creating even more powerful
designs.

Design tools from the toolbar

The toolbar contains a variety of tools and functions. What appears in the toolbar
depends on what you have selected on the canvas.

Access the toolbar at the top of your screen in Figma.

 FRONT-END DEVELOPMENT TRAINING PROJECT REPORT

Explore the canvas

The canvas in Figma is the backdrop on which all of your frames, groups, and other
layers live. It has a finite size of -65,000 through +65,000 on each axis.

By default, vectors are rendered as resolution-independent paths in the canvas though

you can turn on Pixel Preview at 1x and 2x resolutions to enable pixel-precise editing
for raster assets.

The default background color of the canvas is determined by your current theme: light
or dark. While in light mode, newly created files default to a light-gray background
color #F5F5F5. While in dark mode, they’ll default to an off-black color #1E1E1E. New
pages determine their background color based on the current page’s background color,
and don’t rely on your current theme.

Change a background color by de-selecting any layers and using the color picker from
the Background section of the right sidebar.
 FRONT-END DEVELOPMENT TRAINING PROJECT REPORT

Left sidebar

The left sidebar gives you access to layers, pages, and assets. View a list of pages in the
file, select a page to view, then explore any layers on the canvas.

Right sidebar

The right sidebar is where you can access more information about your designs. When
you don't have anything selected, you can view local resources, like color or text styles.

View only access Edit access

-Comment: View and search -Design: View and edit the design
comments properties of layers
-Properties: View the properties of -Prototype: View and edit prototype
your selection interactions, flows, and settings
-Export: Export assets from the file
 FRONT-END DEVELOPMENT TRAINING PROJECT REPORT

Sample Project shown by our Teacher

This Sample is shown by our teacher on the Whiteboard, how can we make designs on
FIGMA. After this he showed us his works on Figma such as :
 FRONT-END DEVELOPMENT TRAINING PROJECT REPORT

This Application is shown by our Teacher as the Sample. He shared this file with us so
that we can learn how to make new designs on FIGMA. From this we can learn about the
software and the tools used in it.
 FRONT-END DEVELOPMENT TRAINING PROJECT REPORT

Project Done on FIGMA

After Completion of the lectures for designing and its software, our teacher told us to
perform a sample project so that he can
 FRONT-END DEVELOPMENT TRAINING PROJECT REPORT

REACT
React is a JavaScript-based UI development library. Facebook and an open-source
developer community run it. Although React is a library rather than a language, it is
widely used in web development. The library first appeared in May 2013 and is now one
of the most commonly used frontend libraries for web development.

React offers various extensions for entire application architectural support, such as Flux
and React Native, beyond mere UI.

When compared to other technologies on the market, React is a new technology. Jordan
Walke, a software engineer at Facebook, founded the library in 2011, giving it life. The
likes of XHP, a straightforward HTML component framework for PHP, have an influence
on React. React's newsfeed was its debut application in 2011. Later, Instagram picks it
up and incorporates it into their platform.

React’s popularity today has eclipsed that of all other front-end development
frameworks. Here is why:

- Easy creation of dynamic applications: React makes it easier to create

dynamic web applications because it requires less coding and offers more
functionality, as opposed to JavaScript, where coding often gets complex very
quickly.
 FRONT-END DEVELOPMENT TRAINING PROJECT REPORT

- Improved performance: React uses Virtual DOM, thereby creating web

applications faster. Virtual DOM compares the components’ previous states and
updates only the items in the Real DOM that were changed, instead of updating
all of the components again, as conventional web applications do.
- Reusable components: Components are the building blocks of any React
application, and a single app usually consists of multiple components. These
components have their logic and controls, and they can be reused throughout the
application, which in turn dramatically reduces the application’s development
time.
- Unidirectional data flow: React follows a unidirectional data flow. This means
that when designing a React app, developers often nest child components within
parent components. Since the data flows in a single direction, it becomes easier
to debug errors and know where a problem occurs in an application at the
moment in question.
- Small learning curve: React is easy to learn, as it mostly combines basic
HTML and JavaScript concepts with some beneficial additions. Still, as is the case
with other tools and frameworks, you have to spend some time to get a proper
understanding of React’s library.
- It can be used for the development of both web and mobile apps: We already
know that React is used for the development of web applications, but that’s not
all it can do. There is a framework called React Native, derived from React itself
that is hugely popular and is used for creating beautiful mobile applications. So,
in reality, React can be used for making both web and mobile applications.
- Dedicated tools for easy debugging: Facebook has released a Chrome
extension that can be used to debug React applications. This makes the process
of debugging React web applications faster and easier.

The above reasons more than justify the popularity of the React library and why it is
being adopted by a large number of organizations and businesses.

After answering what is ReactJs, let us know what keys are. While dealing with
components that are produced periodically in React, keys are essential. Your component
will continue to be uniquely identifiable after the modification if the key value is set.
 FRONT-END DEVELOPMENT TRAINING PROJECT REPORT

They aid React in determining which elements have changed, been eliminated, or been
added.

When making lists of components in React, you must use a special string personality
factor "key". React uses keys to indicate which list items have been modified, destroyed,
or altered. Or, to put it another way, we may say that keys are utilized to identify the
components in lists.

Advantages and Limitations (Pros and Cons)

Advantages

 Makes use of the JavaScript structure known as virtual DOM. Since JavaScript's
virtual DOM is quicker than the conventional DOM, this will boost the speed of
programs.
 Can be used with various systems and on both client and server sides is
commendable.
 Components and identify trends make larger apps easier to manage by
increasing clarity.

Limitations

 Only addresses the app's angle and distance; as a result, additional techniques
must be selected if you want a full collection of development tools.
 Employs inline scripting and JSX, which some programmers might find
uncomfortable.

Features of React

React offers some outstanding features that make it the most widely adopted library for
frontend app development. Here is the list of those salient features.

JSX
JSX is a JavaScript syntactic extension. It's a term used in React to describe how the user
interface should seem. You can write HTML structures in the same file as JavaScript
code by utilizing JSX.
 FRONT-END DEVELOPMENT TRAINING PROJECT REPORT

The above code shows how JSX is implemented in React. It is neither a string nor HTML.
Instead, it embeds HTML into JavaScript code.

Virtual Document Object Model (DOM)

DOM (Document Object Model) treats an XML or HTML document as a tree structure in
which each node is an object representing a part of the document.

The Virtual DOM is React's lightweight version of the Real DOM. Real DOM manipulation
is substantially slower than virtual DOM manipulation. When an object's state changes,
Virtual DOM updates only that object in the real DOM rather than all of them.

When the state of an object changes in a React application, VDOM gets updated. It then
compares its previous state and then updates only those objects in the real DOM instead
of updating all of the objects. This makes things move fast, especially when compared to
 FRONT-END DEVELOPMENT TRAINING PROJECT REPORT

other front-end technologies that have to update each object even if only a single object
changes in the web application.

Architecture
In a Model View Controller(MVC) architecture, React is the 'View' responsible for how
the app looks and feels.

MVC is an architectural pattern that splits the application layer into Model, View, and
Controller. The model relates to all data-related logic; the view is used for the UI logic of
the application, and the controller is an interface between the Model and View.

Extensions

React goes beyond just being a UI framework; it contains many extensions that cover
the entire application architecture. It helps the building of mobile apps and provides
server-side rendering. Flux and Redux, among other things, can extend React.
 FRONT-END DEVELOPMENT TRAINING PROJECT REPORT

Data Binding

Since React employs one-way data binding, all activities stay modular and quick.
Moreover, the unidirectional data flow means that it's common to nest child
components within parent components when developing a React project.

Debugging

Since a broad developer community exists, React applications are straightforward and
easy to test. Facebook provides a browser extension that simplifies and expedites React
debugging.

This extension, for example, adds a React tab in the developer tools option within the
Chrome web browser. The tab makes it easy to inspect React components directly.

Components in React

Components are the building blocks that comprise a React application representing a
part of the user interface.
 FRONT-END DEVELOPMENT TRAINING PROJECT REPORT

React separates the user interface into numerous components, making debugging more
accessible, and each component has its own set of properties and functions.

Here are some of the features of Components -

 Re-usability - A component used in one area of the application can be reused in

another area. This helps speed up the development process.
 Nested Components - A component can contain several other components.
 Render method - In its minimal form, a component must define a render method
that specifies how the component renders to the DOM.
 Passing properties - A component can also receive props. These are properties
passed by its parent to specify values.

Props vs. State in React

PROPS STATE

Props are used to send data and event The data of the components that must be
handlers to a component’s children. presented to it store the view in the state.

Props are immutable – they can’t be The data is stored in the state, which might
modified after they’ve been set. change over the time.
 FRONT-END DEVELOPMENT TRAINING PROJECT REPORT

Both functional and class components can

Only class components can use the state.
benefit from the use of props.

The parent component sets props for the Event handlers are typically responsible for
children components. updating the state.

Industry Trends

React is more popularly adopted by developers across the globe as compared to other
frameworks and libraries.

o The average salary for an entry-level React developer in the USA is about
87,000USD per annum.
o The average salary for an entry-level React developer in India is about
6,50,000INR per annum.

This is all about the software our teacher told us. After these lectures the teacher told us
to perform the Sample Program in which we have to make a Home Page which is linked
to the Login Page when we click the LOGIN HERE button. After clicking the button the
Login page must open with extra designs.
 FRONT-END DEVELOPMENT TRAINING PROJECT REPORT

Sample Program Done in REACT

As my teacher told me for program, first I write a code for Home Page in visual Studio
code using react.js as per design made in FIGMA as shown below :

After This i write a code for Login Page as shown below :

 FRONT-END DEVELOPMENT TRAINING PROJECT REPORT

Then I write a code (css files) for their Designs as shown below :

First I wrote css code for Home Page

And then I wrote css code for Login page :

 FRONT-END DEVELOPMENT TRAINING PROJECT REPORT

And then I linked these two pages with each other.

After linking these two pages, the sample program looks like this :
 FRONT-END DEVELOPMENT TRAINING PROJECT REPORT

And then Login Page :

 FRONT-END DEVELOPMENT TRAINING PROJECT REPORT

GIT

Git is a version-control system for tracking changes in computer files and coordinating
work on those files among multiple people. Git is a Distributed Version Control System.
So Git does not necessarily rely on a central server to store all the versions of a project’s
files. Instead, every user “clones” a copy of a repository (a collection of files) and has
the full history of the project on their own hard drive. This clone has all of the metadata
of the original while the original itself is stored on a self-hosted server or a third party
hosting service like GitHub.

If you consider a file in your Working Directory, it can be in three possible states.
1. It can be staged. This means the files with the updated changes are marked to be
committed to the local repository but not yet committed.
2. It can be modified. This means the files with the updated changes are not yet stored in
the local repository.
3. It can be committed. This means that the changes you made to your file are safely
stored in the local repository.
 FRONT-END DEVELOPMENT TRAINING PROJECT REPORT

There are some Commands in git which are as follows:

 git add : It is a command used to add a file that is in the working directory to the staging
area.
 git commit : It is a command used to add all files that are staged to the local repository.
 git push : It is a command used to add all committed files in the local repository to the
remote repository. So in the remote repository, all files and changes will be visible to
anyone with access to the remote repository.
 git fetch : It is a command used to get files from the remote repository to the local
repository but not into the working directory.
 git merge : It is a command used to get the files from the local repository into the
working directory.
 git pull : It is command used to get files from the remote repository directly into the
working directory. It is equivalent to a git fetch and a git merge.

Now that we know what Git is and it’s basic terminologies, let’s see how we can
place a file under git. We’re going to do it the right way and the difficult way. Without
any GUI applications.

Step 0: Make a GitHub Account. Duh.

Step 1: Make sure you have Git installed on your machine.

After installing the git, for checking the version of the software type “ git –version or git –v “ in the
command prompt in windows or terminal in the Linux.

This will prompt open an installer if you don’t already have git. So set it up using the
installer. If you have git already, it’ll just show you which version of git you have
installed.
 FRONT-END DEVELOPMENT TRAINING PROJECT REPORT

Step 2: Tell Git who you are.

Introduce yourself. Slide in. Seriously, mention your Git username and email address,
since every Git commit will use this information to identify you as the author.

$ git config --global user.name "YOUR_USERNAME"

$ git config --global user.email "YOUR EMAIL"

$ git config --global --list # To check the info you just provided

Step 3: Let’s Git

Create a new repository on GitHub.

Now, locate to the folder you want to place under git in your terminal or cmd.

Initialize Git:
And to place it under git, enter:

Add files to the Staging Area for commit:

Now to add the files to the git repository for commit:

Before we commit let’s see what files are staged:

 FRONT-END DEVELOPMENT TRAINING PROJECT REPORT

Commit Changes you made to your Git Repo:

Now to commit files you added to your git repo:

Uncommit Changes you just made to your Git Repo:

Now suppose you just made some error in your code or placed an unwanted file inside
the repository, you can unstage the files you just added using:

Add a remote origin and Push:

Now each time you make changes in your files and save it, it won’t be automatically
updated on GitHub. All the changes we made in the file are updated in the local
repository. Now to update the changes to the master:

The git remote command lets you create, view, and delete connections to other
repositories.

The git remote -v command lists the URLs of the remote connections you have to other
repositories.

Now the git push command pushes the changes in your local repository up to the
remote repository you specified as the origin.

You can use the git log command to see the history of commit you made to your files.
 FRONT-END DEVELOPMENT TRAINING PROJECT REPORT

Each time you make changes that you want to be reflected on GitHub, the following are
the most common flow of commands:

$ git add .
$ git status # Lists all new or modified files to be committed
$ git commit -m "Second commit"
$ git push -u origin master

And now if we go and check our repository page on GitHub it should look something like
this:

Cloning a Git Repo:

Locate to the directory you want to clone the repo. Copy the link of the repository you
want and enter the following:

Pushing Changes to the Git Repo:

 FRONT-END DEVELOPMENT TRAINING PROJECT REPORT

Now you can work on the files you want and commit to changes locally. If you want to
push changes to that repository you either have to be added as a collaborator for the
repository or you have create something known as pull request. Go and check out how
to do one here and give me a pull request with your code file.

.gitignore tells git which files (or patterns) it should ignore. It's usually used to avoid
committing transient files from your working directory that aren't useful to other
collaborators, such as compilation products, temporary files IDEs create, etc.
 FRONT-END DEVELOPMENT TRAINING PROJECT REPORT

SAMPLE PROJECT DONE IN GIT

After completion of all the lectures on GIT, my teacher asked us to do some sample work
on GIT and to commit the sample code created by us during training in gtihub.com. So,
the sample done in github shown below :

In this Project, First I “ git add “ the files present in my folder and then i did “ git commit –m “----“ “
to commit the work. After this I did “ git push “ to push my work into the cloud. Then when I checked
for “ git status “ its showing no error which means my code worked properly.
 FRONT-END DEVELOPMENT TRAINING PROJECT REPORT

SAMPLE PROJECT AS ONE IN FIGMA, REACT,

And GIT
First, i designed the Home Page and Login page in FIGMA as told by our teacher as
shown :

After this, I wrote the codes for these two pages in Visual Studio Code using HTML and CSS
as shown :
 FRONT-END DEVELOPMENT TRAINING PROJECT REPORT

Login Page :
 FRONT-END DEVELOPMENT TRAINING PROJECT REPORT

Now, after this code and design I did commits in github using git commands which is shown
below as :