An Internship Report on

FRONT END DEVELOPMENT

Submitted in partial fulfilment of the requirements for the award of

BACHELOR OF TECHNOLOGY
IN
COMPUTER SCIENCE AND ENGINEERING

SUBMITTED BY
Name : GATLA SRINIVASA REDDY
Regd. No : 20NE1A0548

DEPARTMENT OF ELECTRONICS & COMMUNICATION ENGINEERING

TIRUMALA ENGINEERING COLLEGE
(AFFILIATED TO JNTUK, KAKINADA) NARASARAOPET–522601
ANDHRAPRADESH,INDIA.
2020-2024
 CERTIFICATE

This is to certify that Gatla Srinivasa Reddy Regd.No. 20NE1A0548

has completed his/her Internship in IBM SKILLS BUILD VIRTUAL INTERNSHIP
PROGRAM on FRONT END DEVELOPMENT under my supervision as
a part of partial fulfillment of the requirement for the Degree of III-B.TECH in
the Department of CSE of Tirumala Engineering College .This is accepted for
evaluation.

Head of the Department External Examiner

CERTIFICATE FROM INTERN ORGANIZATION
 STUDENT’S DECLARATION

I, ALLURI BHAGYALAKSHMI a student of FRONT END DEVELOPMENT

Program, Reg .No. 20NE1A0403 of the Department of ELECTRONICS
AND COMMUNICATION ENGINEERING here by declare that I have
completed the mandatory internship from JUNE 2023 to JULY 2023 in IBM
SKILLSBUILD VIRTUAL INTERNSHIP PROGRAM under the department of
ELECTRONICS AND COMMUNICATION ENGINEERING, TIRUMALA
ENGINEERING COLLEGE

(Signature of the student and Date)

 ACKNOWLEDGEMENT

I wish to express our sincere gratitude to Prof. Y.V. Narayana,

Principal, Tirumala Engineering College, Narasaraopet, for his constant
support and encouragement to complete the project.

I extremely grateful to Head of the Electronics and Communication

Engineering Department, Tirumala Engineering College, Narasaraopet, for
kind encouragement and support throughout our project.

I thank all teaching and non-teaching staff of the department of

E.C.E, Tirumala Engineering College, Narasaraopet, for their constant
support and co-operation.

Finally, I express our sincere thanks to our parents, family members

andfriends who gave us moral support in completing our project successfully.

Submitted by,
Name : ALLURI BHAGYALAKSHMI
Regd.No : 20NE1A0403
OVERVIEW OF THE ORGANIZATION

Vision and Mission:

Vision of the institute To be a world-class leader in transforming lives

through an innovative, rigorous and compassionate
approach by imparting high-quality academic
excellence in technical education to uplift the living
standards of the rural youth by promoting cutting
edge technologies, employability, higher education,
and research with socio-technical, eco-friendly, and
entrepreneurial values.

Mission of the institute To develop high quality technical personal with a

sound footing on basic engineering principles,
innovative capabilities and exemplary professional
conduct to lead and to use technology for the
progress of mankind, training and adopting them to
changing technological environment by proving the
high quality instruction, infra, faculty, effective
training and learning methods imbibing socioethical,
ecofriendly and entrepreneurial values as the inner
strength for the rural development.

Vision of the To become a center for academic excellence by

Department producing high quality engineers in Electronics &
Communication Engineering with global
competence empowered by technical expertise,
innovation, research and the knowledge of cutting
edge technologies, employability, higher education,
entrepreneurial skills along with socio-ethical and
eco-friendly values for the rural development.

Mission of the To develop the high quality Electronics &

Department Communication Engineers with the fundamental
engineering principles, intellectually adept,
professionally deft, innovative research capabilities,
exemplary skills, technological progress of mankind,
tracking technological environment by providing the
high quality instruction, infra, faculty, modern
teaching and learning methods, training with
socioethical and entrepreneurial values as the inner
strength for the rural development.
Programme Outcomes (PO’s):
Engineering Graduates will be able to:

1. Engineering Knowledge : Apply the knowledge of mathematics , science ,

engineering fundamentals , and an engineering specialization to the solution of complex
engineering problems.

2. Problem Analysis : Identify, formulate, review research literature , and analyze

complex engineering problems reaching substantiated conclusions using first principles of
mathematics, natural sciences, and engineering sciences .

3. Design/development of solutions: Design solutions for complex engineering

problems and design system components or processes that meet the specified needs with
appropriate consideration for the public health and safety, and the cultural, societal, and
environmental considerations.

4. Conduct investigations of complex problems: Use research-based knowledge and

research methods including design of experiments, analysis and interpretation of data, and
synthesis of the information to provide valid conclusions.

5. Modern tool usage: Create, select, and apply appropriate techniques, resources, and
modern engineering and IT tools including prediction and modelling to complex engineering
activities with an understanding of the limitations.

6. The engineer and society: Apply reasoning informed by the contextual knowledge to
assess societal, health, safety, legal and cultural issues and the consequent responsibilities
relevant to the professional engineering practice.

7. Environment and sustainability: Understand the impact of the professional

engineering solutions in societal and environmental contexts, and demonstrate the knowledge
of, and need for sustainable development.

8. Ethics: Apply ethical principles and commit to professional ethics and responsibilities
and norms of the engineering practice.
9. Individual and team work: Function effectively as an individual, and as a member or
leader in diverse teams, and in multidisciplinary settings.

10. Communication: Communicate effectively on complex engineering activities with the

engineering community and with society at large, such as, being able to comprehend and write
effective reports and design documentation, make effective presentations, and give and
receive clear instructions.

11. Project management and finance: Demonstrate knowledge and understanding of the
engineering and management principles and apply these to one’s own work, as a member and
leader in a team, to manage projects and in multidisciplinary environments.

12. Life-long learning: Recognize the need for, and have the preparation and ability to
engage in independent and life-long learning in the broadest context of technological change.

Programme Specific Outcome (PSO’s):

PSO1:Should have the capability to comprehend the technological advancements in the usage
of modern design tools to analyze and design subsystems/processes for a variety of
applications in Electronics & Communication Engineering.

PSO 2: An understanding of social-awareness & environmental-wisdom along with successful

career and to sustain passion and zeal for real-world applications using optimal resources as an
Entrepreneur.

Program Educational Objectives (PEOs):

PEO1: Preparation: To strengthen the learners with fundamental knowledge in the concepts
of Engineering Mathematics, Applied Science and Basic Electronics Engineering
subjects for problem analysis, comprehend to develop solutions for new hardware,
software, and other tools in Electronics & Communication Engineering field.

PEO2:Core Competence: To enable the learners with core curriculum knowledge in theory
and practical of Electronics & Communication Engineering to develop the innovative
skills, critical analysis, design, simulation, investigation of complex problems,
reasoning, development & testing knowledge for offering solutions to real time
problems related to globally evolving techno-corridor developments of Electronics &
Communication Engineering.

PEO3:Breadth Knowledge: To enable the learners with breadth knowledge to build the
Electronics & Communication Engineering professionals to have the team work and
skills for developing communicative abilities, lifelong learning and aptitude of project
management & finance with entrepreneurial values for rural development.
PEO4: Advanced Professional Knowledge: Implementation of the multi-disciplinary
approach, development of the R&D skills by MOUs with premier industries and
institutions, interacting with training sessions and industrial visits to the learners to
have awareness in latest trends of Communication, Networks, Signal processing etc.
with the modern tools and modules compatible to escalating needs of the society.

PEO5:Career Development and Ethics: To enable the learners with the aptitude of
competitive knowledge of real-time requirement of cutting edge technologies for
promoting employability, higher education by imbibing ethical, social and eco-5
friendly values.
TABLE OF CONTENTS
S.NO CHAPTERS CONTENTS
1.1 Abstract

1. Introduction 1.2 Objective

1.3 Introduction

Background 2.1 Web pages

2.

Technical Requirements 3. Software

3.

4.1 HTML

4. Designing 4.2 CSS

4.3 JAVA SCRIPT

5.1 Expected Outcome

5. Conclusion and Future 5.2 Conclusion & Future Scope

Scope

URLs, Ids, 6.1 URLs & Account Ids

Acknowledgement
6. s, Reflection Notes 6.2 Acknowledgements
and
6.3 Reflection Notes
References
6.4 References
 OVERVIEW OF INTERNSHIP ACTIVITIES WEEK-1

Week 1

Session
Date Day (FN/AN) Name of The Topic/Module Learned

05-06-2023 Monday FN Collaboration With APSCHE & Program

Launch
06-06-2023 Tuesday FN Information Sharing

07-06-2023 Wednesday FN Information Sharing

08-06-2023 Thursday FN Information Sharing

09-06-2023 Friday FN Faculty Orientation and Q&A Session

10-06-2023 Saturday FN Information Sharing

OVERVIEW OF INTERNSHIP ACTIVITIES WEEK-2

Week 2

Session
Date Day (FN/AN) Name of The Topic/Module Learned

12-06-2023 Monday FN Orientation and Registration of

the course
13-06-2023 Tuesday FN Registration of the course

14-06-2023 Wednesday FN Learning Self Paced Concepts

15-06-2023 Thursday FN Learning Self Paced Concepts
16-06-2023 Friday FN Learning Self Paced Concepts

17-06-2023 Saturday FN Learning Self Paced Concepts

 OVERVIEW OF INTERNSHIP ACTIVITIES WEEK-3

Week 3

Session
Date Day (FN/AN) Name of The Topic/Module Learned

19-06-2023 Monday FN Mentor Led Technical Sessions

20-06-2023 Tuesday FN First Technical Sessions

21-06-2023 Wednesday FN Mentor Led Technical Sessions

22-06-2023 Thursday FN Learning Self Paced Concepts

23-06-2023 Friday FN Learning Self Paced Concepts

24-06-2023 Saturday FN Learning Self Paced Concepts

OVERVIEW OF INTERNSHIP ACTIVITIES WEEK-4

Week 4

Session
Date Day (FN/AN) Name of The Topic/Module Learned

26-06-2023 Monday FN Mentor Led Technical Sessions

27-06-2023 Tuesday FN Learning Self Paced Concepts
28-06-2023 Wednesday FN Learning Self Paced Concepts
29-06-2023 Thursday FN Learning Self Paced Concepts
30-06-2023 Friday FN Second Technical Sessions

01-07-2023 Saturday FN Learning Self Paced Concepts

 OVERVIEW OF INTERNSHIP ACTIVITIES WEEK-5

Week 5

Session
Date Day (FN/AN) Name of The Topic/Module Learned

03-07-2023 Monday FN Self Based Learning Q & A

04-07-2023 Tuesday FN Self Paced Learning on

IBM SkillsBuild
05-07-2023 Wednesday FN Project Discussion

06-07-2023 Thursday FN Project Discussion

07-07-2023 Friday FN Student Participation in weekly sessions

08-07-2023 Saturday FN Students Course Completion on

IBM SkillsBuild

OVERVIEW OF INTERNSHIP ACTIVITIES WEEK-6

Week 6

Session
Date Day (FN/AN) Name of The Topic/Module Learned

10-07-2023 Monday FN Project Completion

11-07-2023 Tuesday FN Project Completion

12-07-2023 Wednesday FN Final Project Submission

13-07-2023 Thursday FN Final Project Submission

14-07-2023 Friday FN Certificates of Completion

15-07-2023 Saturday FN Certificates of Completion

Front end development self registration process

Step-1 : Registration Process.

Step-2 : Login with your Google account.

Step-3 : Give your personal information.

Step-4 : Agree the Conditions & policy.

Step-5 : Account was created.

Step-6 : Check your profile

Step-7 : Registration Completed

Step-8 : Access of Self Based Learning On Front End Development.

Step-9 : Front End Development path will appeared.

 CHAPTER-1

INTRODUCTION TO FRONT END DEVELOPMENT

Fig: Front End Development

Front-end development primarily focuses on user experience. Using the related

coding and design techniques, you as front-end developers build the elements of an
application that are directly accessed by end-users with a goal of rendering the
entire interface elegant, easy to use, fast, and secure, fostering user engagement and
interaction.

Front-End Development Versus Back-End Development:

Hardware, computer programs, and websites comprise many components: code, data
bases, user interfaces (UI). Those that interact with users are in the front end; those
that operate the technology are situated in the back end, also called the data-access
layer.
The back end provides the resources to support the front end. Here are the key
differences between software development in the front end and back end:
 Back-end development is the process of building the components for running the
application behind the scenes. Examples are components for data storage,
infrastructure, integration with external systems, and code written in one or more
programming languages. Users cannot access the back end.
 Front-end development is the process of building components that interact with
users. Examples are the user interface, buttons, user-entered data, websites, and
user experience (UX) features. The front end aims at meeting user requirements
and delivering a positive user experience.

Programming Languages for Front-End Development

Below are the most common programming languages for developing the front end.

HTML
The Hyper Text Markup Language (HTML) programming language, which defines
the structure and meaning of web content, is a building block for front-end
development. Through HTML, browsers display text or load elements, rendering
webpages, which contain hyperlinks and links to other webpages, for users.
CSS
Cascading style sheets (CSS) is the standard language that specifies how to display
HTML content: fonts, foreground and background colors, etc. With CSS, you can
control the design layout and its components for various devices like desktops, tablets,
and smartphones. Examples of the components are the header, body, footer, content,
asides, and sections.
JavaScript
JavaScript (JS) extends the functionality of websites beyond HTML and CSS. Through
JS:

 Webpages can refresh themselves dynamically and respond to user actions

without page reloads or other changes.
 You can model animated UI components, such as pop-ups, image sliders, and
extensive navigation menus.

Fig: Front End Development

 Benefits and Limitations of Front End
Development

Front End Development Skill is ideal for good user experience and website design.
Read the blog to know the benefits and disadvantages. Front End Development Skill
is ideal for good user experience and website design. Read the blog to know the
benefits and disadvantages of this technology in detail. Front-end development is a
process that involves the creation of a graphical user interface for a website or an
application. It is a pathway for developers to interact with users directly. Moreover,
front-end development is the practice of producing CSS, JavaScript, and HTML for
a website.

All the visual elements on the website as buttons, animations, menus, and other
features are developed by the programmer. In addition to this, front-end development
is generally known as client-side development. Examples of front-end development
frameworks are jQuery, Angular JS, and ReactJS. Below are the benefits and
limitations of front-end development that one should need to consider.

Commonly Used Languages:

The front end is a fast platform for development. Most front-end developers use
CSS, HTML, and JavaScript. The developers use HTML to lay out the general
structure and content of the document. In addition, they use JavaScript for situations
and CSS for styling with advanced interactivity. Some developers use AJAX for
custom software development to update the website and entire page.

The programmers also use libraries in the programming languages like jQuery,
Angular JS, and React. Python, PHP, and Ruby are also in use to connect data with
the back end of the website.
Advantages / Pros of Front-EndDevelopment:

We have already seen how important front end plays in the entire scenario of web
segment, whether it’s design and elements or the entire well-organized structure to
make everything work smooth and perfect.

• Speedy Development and User-driven Outcomes

Using certain modern frameworks will enable faster development of elements.

Also, the journey towards making it work is shorter. For example, if you’ve a
sure shot plan in your mind for an app for which the back-end is all set to go
and you need the front end part to go hand-in hand with it then the front end
space can be all in full bloom within few days.
 • Secured

One more feather in the cap while using a framework in front end
development is that the coding is fully secured. This is a boon and you may
never have to worry about your site’s functioning on any existing browser.

Best Tools For Front-End Development Tools

Front-end developers you often face challenges when it comes to debugging and
managing complex tasks. Fortunately, there is a multitude of tools, frameworks,
and applications available to overcome these obstacles.

We did our research and, here’s our list of the top front-end development tools
for web development:

1. Vue.js
2. Angular.js
3. React
4. Ionic 2
5. Backbone.js
6. Bootstrap
7. Meteor
8. Grunt
9. Saas
10. Sublime
11. Sencha
12. Creative Tim
13. Envato
14. Elfsight
15. Codekit
16. Npm
17. TypeScrip
18. Webstorm
19. HTML5 Boilerplate
20. GitHub
1. Vue.js

Vue.js is a JavaScript library created in 2013 that has improved significantly

over the past years. It’s gained popularity because of its efficiency to build User
Interfaces and single-page applications.

Vue.js is not entirely a framework and it’s focused on the view layer.
Therefore, it’s easy to pick up and integrate with other libraries or projects.
Further, one of their main highlights is that it provides reacting components with
lightweight APIs. This allows you to do your job faster but also to work on complex
applications.

1. Top Features:

. It has a very small size (12 to 21KG).

. It’s flexible, making it suitable for cross-platform applications.It has great tooling (Unit
testing, State Store, Routing, etc.).
. It combines the best features of Angular and React.
 2. Top Features:

 IT has a very small size (12 to 21KG).

 Its flexible, making it suitable for cross-platform applications.
 It has great tooling (Unit testing, State Store, Routing,
etc.).
 It combines the best features of Angular and React.
2. AngularJS

Angular is a free and open-source JavaScript framework created by Google. In short,

its main purpose is to simplify the development and testing of the applications by
providing a framework for client-side MVC architectures and other powerful
features. So, Angular solves the main challenges you can find as a developer when
developing single-page apps.

Top Features:

• It handles JavaScript code for every program.

• User interface with HTML.
• It has a two-way data binding.
3. React

React is an open-source JavaScript library used for building user interfaces. It’s
maintained by Facebook and a community of individual developers and companies.
Among popular front-end development tools, React is popularly known as one of the
fastest frameworks available you can find. It’s an excellent library for web app
development, and it has great features that make it one of the top choices for
developers.

For example, ReactJS uses a virtual DOM instead of the real DOM, meaning that a
web page no longer recalculates every time the DOM changes the browser. This and
other features allow React developers to build fast and clean websites.

Top Features:
• Easy to understand and learn.
• Great for mobile app development.
• Provides stable code and useful tools for developers.
• It’s component-based.
4. Ionic 2

Ionic is an open-source user interface created in 2013 capable of building both

mobile and desktop applications. Iconic uses web technologies such as CSS, Sass,
and HTML5 to develop tools and services for mobile and desktop web apps. In
short, Ionic is usually known for its efficiency in building mobile applications.
However, many front-end developers, due to its great features, use it often for
websites.

Top Features:

• It has pre-designed components.

• Can deploy across multiple platforms.
• Developers can use native device functions with the JS code.
. High availability of plugins

Fig : Applications of Artificial Intelligence

 CHAPTER-2

CSS EXERCISES
Web page integration challenge
Okay! Here is the challenge: I want you to look carefuly at this web page mockup
below. The game is to use your css skills to make a web page using only html
and css, that looks exactly like this mockup.
A few tips:

 Start with the html, don't worry about looks. First: the flesh and bones.
 Plan your code: draw boxes around your containers.
 font family is arial.
 browser extensions allow you to find out the hexadecimal value of any
color. If you can do that, bravo, you can consider yourself like someone who
masters the fundamentals of CSS.

Course prerequisites
You should have finished the 2 HTML lessons before starting this course, as we
will re-use the acquired knowledge and the html file on Cute Cats.

The goals of this course

1. understand the three ways of binding CSS and HTML code together
2. be able to apply some basic CSS to text
3. be able to use online tools to validate your CSS (this one for example)

What is CSS ?
CSS, or Cascading Styles Sheets, is a way to style and present HTML. Whereas the
HTML is the meaning or content, the style sheet is the presentation of that
document. As mentioned in the "intro to HTML" chapter, whereas HTML is the
flesh and bones of the web page, CSS is the makeup and clothing!
Styles don’t smell or taste anything like HTML, they have a format of ‘property:
value’ and most properties can be applied to most HTML tags.
Here is a chunk of CSS code. Read it, and try to understand what it tells the browser
to do :
body{
padding-left: 20px; padding-right: 20px; padding-top: 20px; padding-bottom: 20px;
background-color: blue; color: white;
p{
font-size: 24px;
}

a{
color: blue;
background-color:white;
}

Can you make something of it ? What does it say ?

Here they are, in plain English. See if you got any of these right :

 Give paragraphs a font size of 24px.

 Make links appear in blue text with a white background color.
 Give 20px of padding on the top, right, bottom and left side of
the bodyelement.
 Give the body a blue background and the text appear in white.
Go ahead, look at it again. Familiarize your eyes and brain with the CSS
syntax. It'salways the same! Learning CSS is actually about knowing what
properties to use and how to combine them to make something usable and visually
elegant.

Applying CSS
Let's see how to "connect" the CSS to the HTML.
There are three ways to apply CSS to HTML: Inline, internal, and external.

Inline
Inline styles are plonked straight into the HTML tags using the style attribute.
 They look something like this:

<p style="color: red">text</p>

This will make that specific paragraph red.

But, remember this notion: "separation of concerns". It basically means that
the best-practice approach is that the HTML should be a stand-alone,
presentation
free document, and so inline styles should be avoided wherever possible. One
good reason is... Debugging! But it will also make you code more efficiently. So,

Internal
Embedded, or internal, styles are used for the whole page. Inside the head element,
the style tags surround all of the styles for the page.
As you probably figured, this will make all of the paragraphs in the page red and
<!DOCTYPE html>
all of the links blue.
<html> preferable to soiling our HTML with inline presentation, it is similarly
Although
<head>
usually preferable to keep the HTML and the CSS files separate, and so we are left
with our savior…Example</title>
<title>CSS
<style
>p
{
color: red;
}

a{
color: blue;
}
</style>
External
External styles are used for the whole, multiple-page website. There is a separate CSS file, wh

body{
padding-left: 20px; padding-right: 20px; padding-top: 20px; padding-bottom: 20px; backgro
p{
font-size: 24px;
}

a{
color: blue;
background-color:white;
}

If<!DOCTYPE html>
this file is saved as “style.css” in the same directory as your HTML page then it
can be linked to in the HTML like this:
<html>
<head>
<title>CSS Example</title>
<link rel="stylesheet" href="style.css">
...
 Apply!
Ok, let's get cracking! Fire up your code editor, re-open the Cute Cats web page
and save a new blank document as “style.css” in the same directory as your HTML
file. Now change your HTML file so that it starts with something like this:
Save the HTML file. This now links to the CSS file, which is empty at the moment,
<!DOCTYPE html>
so won’t change a thing.
<html>
Let's just get some quick result and paste the following code into the style.css file:
<head>
<title>My Cut Cats pagee</title>
body{
<link rel="stylesheet" href="style.css">
background-color:
</head>
blue; color: white;
...
padding-bottom:
20px; padding-left:
30px; padding-right:
25px; padding-top:
40px;
p{
font-size: 24px;
}

a{
background-color:white;
color: blue;
 Conclusion

1. bind CSS code to HTML code using three different approaches:

inline, internal and external;
2. apply some basic css styling to text elements
3. spot errors using online css validation tool
 CHAPTER-3

YOUR FUTURE IN WEB DEVELOPMENT

Introduction

In this module, you will learn about the job landscape for web
development and how it is continuing to grow.

Learning objectives
After completing this module, you should be able to:

1. Identify industries in which web developers work

2. Recognize the demand for web developers in the job market
3. Recognize the future of the web development field

GLOBAL DEMAND IN THE MARET PLACE :

Websites are essential tools that businesses, governments, and nonprofits of all
sizes use to attract new audiences, engage existing audiences, provide support, and
more. The skills and roles in web development are in high demand, and the
opportunities continue to grow.

First, web development is a skill that is essential in nearly every industry.

Individuals, start-ups, government organizations, and large companies all need web
developers to build websites and applications. Here’s a list of some industries that
have a high demand for web developers:
 Consumer electronics
 Finance and banking
 Retail and e-commerce
 Computer technology
 Digital media and publishing
 Healthcare
 Government and military
 Gaming
 Film and entertainment
 WHAT IS THE FUTURE OF WEB DEVELOPMENT

 Since the early days of the internet, connecting people and ideas has been the
goal of the internet. The internet is used in more and more ways every day.
An example of the evolution of the internet is searching for a popular
television show on Netflix using your voice. Or video chatting with friends and
family around the world. Soon you’ll be able to invite friends over to your
virtual house for a virtual party. The internet, like all technology, is
continuously changing.
 The future of web development incorporates several other technologies you
may have heard of, such as artificial intelligence (AI), blockchain technologies,
and extended reality (XR). These technologies are combined with websites
and web apps to change how humans interact with the internet.
 When considering a new career path, it’s valuable to hear from those
who work in the field. Everyone has their own experience and story.
 Listen to Kelly Luo, who is a software engineer at IBM. Kelly shares what drew
her to web development, how mentors helped and inspired her, how she
develops apps that bring a better world to IBM, and her career advice for you.
 CHAPTER-3
INTRODUCTION TO JAVA SCRIPT

Introduction to React

We will now start getting familiar with probably the most important topic of
this course, namely the library. Let's start by making a simple React application as
well as getting to know the core concepts of React.The easiest way to get started by
far is by using a tool called create-react-app it is possible (but not necessary) to
install create-react-app on your machine if the npm tool that was installed along
with Node has a version number of at least 5.3.You may also use the new
generation frontend tool in this course if you wish.
The create-react-app is still the tool recommended by the React team and that is why
it remains the default tool to set up a React project in this course. Read how the react
team sees the future of React tooling
 JavaScript

During the course, we have a goal and a need to learn a sufficient amount of
JavaScript in addition to web development.

JavaScript has advanced rapidly in the last few years and in this course, we use
features from the newer versions. The official name of the JavaScript
standard
is ECMAScript . At this moment, the latest version is the one released in June
of 2022 with the name ECMAScript®2022 , otherwise known as ES13.

Browsers do not yet support all of JavaScript's newest features. Due to this fact,
a lot of code run in browsers has been transpiled from a newer version of Java
Scriptto an older, more compatible version.
Today, the most popular way to do transpiling is by using Babel . Transpilation is
automatically configured in React applications created with create-react-app. We
will take a closer look at the configuration of the transpilation.

Node.js is a JavaScript runtime environment based on Google's Chrom

V JavaScript engine and works practically anywhere-from servers to mobile
phones. Let's practice writing some JavaScript using Node. The latest versions of
Node already understand the latest versions of JavaScript, so the code does not need
to be transpiled.

The code is written into files ending with .js that are run by issuing the
command node name_of_file.js

It is also possible to write JavaScript code into the Node.js console, which is opened
by typing node in the command line, as well as into the browser's developer tool
console. The newest revisions of Chrome handle the newer features of JavaScript
pretty well without transpiling the code. Alternatively, you can use a tool like JS
Bin .

JavaScript is sort of reminiscent, both in name and syntax, to Java.But when it

comes to the core mechanism of the language they could not be more different.
Coming from a Java background, the behavior of JavaScript can seem a bit alien,
especially if one does not make the effort to look up its features.

In certain circles, it has also been popular to attempt "simulating" Java features
and design patterns in JavaScript.We do not recommend doing this as the
language
and respective ecosystems are ultimately very different.
 Variables:

does not define a variable but a constant for which the value can no longer
be changed. On the other hand, defines a normal variable.

In the example above, we also see that the variable's data type can change during
execution. At the start, y stores an integer; at the end, it stores a string.
It is also possible to define variables in JavaScript using the keyword var . var was,
for a long time, the only way to define variables. const and let were only recently
added in version ES6. In specific situations, var works in a different way
compared to variable definitions in most languages - see Variables - Should You
JavaScript
Use let, var or const? on or Keyword: var vs. let on JS Tips for more
information. During this course the use of var is ill-advised and you should
stickwith using you tube
Arrays

Notable in this example is the fact that the contents of the array can be modified
even though it is defined as a const. Because the array is an object, the variable
always points to the same object. However, the content of the array changes as new
items are added to it.

One way of iterating through the items of the array is using for Each as seen in
example.ForEach receives a function defined using the arrow syntax as a
parameter.

Value =>{
Console.log(value)
}

forEach calls the function for each of the items in the array, always passing the
individual item as an argument. The function as the argument of for Each may
alsoreceive other arguments .
In the previous example, a new item was added to the array using the method push .
When using React, techniques from functional programming are often used. One a
characteristic of the functional programming paradigm is the use of immutab data
structures. In React code, it is preferable to use the method concat , which creates a
new array with the added item. This ensures the original array remains unchanged.
 CHAPTER-4

Develop your brand using social media

Introduction

Take a moment to think about some recent social media posts from friends and family
and think about how a potential employer would perceive those posts. Do the posts
portray the person in a positive light? Do you think a potential employer would
consider hiring them after looking at their social media posts? Think about your own
social media posts. Do they portray you in a positive light? Do you have posts or
pictures that might hinder your chances at employment?

How do you get started with your work brand?

Set your friends-only posts to private and create a personal brand that’s appropriate
for work. We’ll call it a work brand. That brand should present your capabilities and
potential in a way that helps a hiring manager spot you among a crowd of applicants
and see how much value you could bring to the company.

This helps potential employers, college admissions officers—and soon enough, your
professional colleagues—see your brand, your image, and your value. Let them
know why you’re the right person to know and the right person to work with.
 You may already have a personal brand among your friends. But this is different
and a bit more complex.

Develop your work brand in four steps

The rest of this course guides you through the following four steps:

1. You’ll create a work brand—or at least a good first draft that excites you.
2. You’ll decide where on the internet to bring that brand to life.
3. You’ll generate ideas about what to share that expresses your brand.
4. You’ll engage others to help you spread the word.

Now comes the part that requires the most thought. You’ll write your own tagline!
That’s a one-sentence description of yourself that highlights what would make you
agreat employee.

Your workplace tagline becomes a short, memorable way to help you focus on your
craft and your value. As an answer to the question “What do you do?,” it shines a light
on what’s special about you. Use your tagline in places like your Twitter bio and your
LinkedIn® profile. When you start going to networking events, introduce yourself
with your workplace tagline like a verbal business card, attracting people who need
the qualities that you offer. It’s the sentence on your resume that many people think is
the hardest to write—and in just a few minutes you’ll have it done! A workplace
tagline isn’t easy to write. We’ve provided three spaces for you to write different
versions. That way you can experiment without losing the best qualities of a previous
draft.
some pics of Some pics of internship discussion