INDUSTRIAL TRAINING REPORT

TASK MANAGER PROJECT

Degree of Bachelor of Technology in Computer Science & Engineering

Submitted By Name: Ashish

University Roll No: 05196402721

SUBMITTED TO :
Department of Computer Science & Engineering
MAHARAJA AGRASEN INSTITUTE OF TECHNOLOGY

GGSIPU, Delhi
I
CERTIFICATE
 DECLARATION

I hereby declare that the Training Report entitled Front End Web Development is an authentic
record of my own work as requirements of 4-6 weeks Training during the period from 24th
July 2023 to 13th August 2023 for the award of B.Tech. (Computer Science &
Engineering),GGSIPU , under the guidance Colt Steele.

(Signature of the student)

Ashish

05196402721

Date :

Certified that the above statement made by the student is correct to the end of our knowledge
and belief.

Signatures Examined

by:

1. Colt Steele. 2.

(Guide/Trainer) (Faculty Coordinator)

Head of Department
 ACKNOWLEDGEMENT

The successful completion of this course report would not have been possible without the
support and assistance of many individuals and organizations. I feel immensely happy to have
chosen this course. I have learnt a lot of new concepts and things during the completion of this
course. I would like to take this opportunity to offer my earnest admiration to each and every
one of them.

First and foremost, I am highly indebted to Colt Steele who has taught the full Front End Web
Development with utmost dedication and preciseness. I had a wonderful and unforgettable
experience learning new things.

Then, I would like to thanks my teachers who decided and encouraged me to engage in some
useful stuff like this course in these summer break to enhance my skillset so that it could proof
fruitful to me in future.

(Signature of the student)

ASHISH
05196402721
 ABOUT THE PLATFORM

UDEMY

Fig1. Udemy Platform

1.1 Introduction:
Udemy is one of the leading world-wide online learning marketplaces (e-learning). More than
9 million students participate worldwide. With more than 80,000 courses most topics are
covered and taught by experts. The courses are available on demand so that the learning is
possible anywhere at any time, on the own pace. Udemy courses are available in 80
languages.

Instruction is delivered by teachers from universities and colleges but by removing the
university name and accreditation process it makes top quality training much more affordable.
Offering more than 80,000 online courses with many available free of charge, there is
definitely something for everyone from business to personal interests.

Udemy has redesigned its platform making e-learning an enjoyable experience through up to
date and fully functional online tools. The modern search facility allows students faster
answers to questions and quizzes make for an engaging hands-on experience.

By entering the website, you have the menu bar on the left side. You can sort the offered courses
by language with the menu bar. Then you can check all the offered courses and filter them by
subject. Prices are low with discounts every month and fees are charged per course rather than
monthly which means you only pay for what you need. Purchased courses can be saved off-line
meaning one payment gives you the keys to your future.

Payments can be affected with the mobile app that uses Apple’s or Google Play’s payment
system depending on the device, often in your local currency. For all offered topics there are
also free courses available! To start with Udemy, you can first try a free course.

By entering the website, you have the menu bar on the left side. You can sort the offered
courses by language with the menu bar. Then you can check all the offered courses and filter
them by subject. Prices are low with discounts every month and fees are charged per course
rather than monthly which means you only pay for what you need. Purchased courses can be
saved off-line meaning one payment gives you the keys to your future.

Payments can be affected with the mobile app that uses Apple’s or Google Play’s payment
system depending on the device, often in your local currency. For all offered topics there are
also free courses available! To start with Udemy, you can first try a free course.
1.2 Mission and Vision:
• We work at a purpose-driven company that places a high value on results, so we can
continue to grow and give as many people as possible access to learning resources. We
immerse ourselves in data and communicate directly with our instructors and students to
ensure we’re making real progress toward our goals—and theirs.
• With a mission to improve lives through learning, it’s no surprise that we place
tremendous emphasis on the role of learning in our own lives and work. We understand
that learning isn’t an interruption of our work or a sign of weakness—it’s foundational to
our growth, both as individuals and as a business.
• Individuals make great contributions, but it takes collaboration, compromise, and
kindness to build a great business. We succeed as a team, leave our egos at the door, and
take pride in our shared efforts.
• We embrace our quirks and bring our whole selves to work. We recognize that it’s our
differences that produce the best work, not conformity, so we are excited to welcome
coworkers with varied backgrounds, experiences, identities, and ideas. Our openness
allows us to better serve the diverse people who use Udemy across the globe.

1.3 Origin:
Growing up in a small Turkish village with a one-room schoolhouse, our founder Eren Bali
had limited educational opportunities, until his family got a computer. Fueled by his
dreams to compete internationally in chess and mathematics, Eren used the internet to
access learning resources and connect with people all over the world. With the help of these
communities, he earned a silver medal in the International Math Olympiad.

After online learning changed his life, Eren partnered with co-founders Oktay Caglar and
Gagan Biyani toward a common goal: to make quality education more accessible and improve
lives through learning.
1.4 Overview:
Udemy is a platform that allows instructors to build online courses on their preferred topics.
Using Udemy's course development tools, they can upload videos, PowerPoint
presentations, PDFs, audio, ZIP files and live classes to create courses. Instructors can also
engage and interact with users via online discussion boards.
Courses are offered across a breadth of categories, including business and entrepreneurship,
academics, the arts, health and fitness, language, music, and technology. Most classes are in
practical subjects such as Excel software or using an iPhone camera. Udemy also offers
Udemy for Business, enabling businesses access to a targeted suite of over 7,000 training
courses on topics from digital marketing tactics to office productivity, design, management,
programming, and more. With Udemy for Business, organizations can also create custom
learning portals for corporate training.
Courses on Udemy can be paid or free, depending on the instructor. In 2015, the top 10
instructors made more than $17 million in total revenue.
In April 2013, Udemy offered an app for Apple iOS, allowing students to take classes directly
from iPhones; The Android version was launched in January 2014. As of January 2014, the
iOS app had been downloaded over 1 million times, and 20 percent of Udemy users access
their courses via mobile. In July 2016, Udemy expanded their iOS platform to include Apple
TV. On January 11, 2020, the Udemy mobile app became the #1 top grossing Android app in
India .
 Table of Content

S. No CONTENT PAGE.
NO

1. Chapter1(Introduction) 1-5

1.1 Introduction 1-4

1.2 Objective 4

1.3 Motivation 5

2. Chapter2(Tools & Technologies Used) 6-8

2.1 Languages and frameworks used 6-7

2.2 Software's used 8

3 Chapter3(Technical Content) 9-33

3.1 Introduction to HTML 9-12

3.2 Introduction to CSS 12-17

3.3 Introduction to Javascript 18-21

3.4 Project Structure 24

3.5 File Structure 25

3.6 Website Structure 25-32

4. Chapter4(Project Design) 33-34

5. Chapter5 (Snapshots) 34-37

6. Chapter6(Results and Discussions) 38-39

7. Chapter7(Conclusion and Future Scope) 39-40

8. Chapter8(Weekly Job Summary) 41-44

9. Chapter9(Learning After Training) 45-46

10. Chapter10(References) 47

1
 Chapter1: INTRODUCTION

1.1 Introduction:
During my summer break after 2nd year of my graduation, I have completed this course,
which included a project on front end Web Development.

I have selected this course named "Front End Web Development" by the instructor Colt
Steele. This course was completed on August13th , 2022, summing up to the durations of 4-5
weeks.

During the course, I was working on the project entitled "TASK MANAGER PROJECT"
which is a front-end part of a website using HTML, CSS AND JavaScript. This website is a
complete front-end project with modern, interactive and responsive design.

Web Development:

Web development is the building and maintenance of websites; it’s the work that happens
behind the scenes to make a website look great, work fast and perform well with a seamless
user experience.

Web developers, or ‘devs’, do this by using a variety of coding languages. The languages
they use depends on the types of tasks they are preforming and the platforms on which they
are working.

Web development skills are in high demand worldwide and well paid too – making
development a great career option. It is one of the easiest accessible higher paid fields as you
do not need a traditional university degree to become qualified.

The field of web development is generally broken down into front-end (the user- facing side)
and back-end (the server side). Let’s delve into the details.

Overview Of Web Development:

A front-end dev takes care of layout, design and interactivity using HTML, CSS and
JavaScript. They take an idea from the drawing board and turn it into reality.

What you see and what you use, such as the visual aspect of the website, the drop down
menus and the text, are all brought together by the front-end dev, who writes a series of
programmes to bind and structure the elements, make them look good and add interactivity.
These programmes are run through a browser.

2
The backend developer engineers what is going on behind the scenes. This is where the
data is stored, and without this data, there would be no frontend. The backend of the web
consists of the server that hosts the website, an application for running it and a database to
contain the data.

The backend dev uses computer programmes to ensure that the server, the application
and the database run smoothly together. This type of dev need to analyse what a company’s
needs are and provide efficient programming solutions. To do all this amazing stuff they use
a variety of server-side languages, like PHP, Ruby, Python and Java.

Fig2. Web Development

3
 Phases of Web Development :

Fig3. Depicts different phases of Web Development

ABOUT THE COURSE

1.1 Description:
If you would like to get started as a front-end web developer, you are going to LOVE this
course! Work on projects ranging from a simple HTML page to a complete JavaScript based
Google Chrome extension. We will cover the following technologies in this course:
• Web development basics with HTML
• Cascading Style Sheets (CSS)
• JavaScript programming
This course covers the most popular web development frameworks, and will get you started
on your path towards becoming a full-stack web developer! Still not sold? Check out a few of
the awesome reviews this course has received!
"Excellent Course! Highly Recommend It! Such a great hands on experience with this
course."

4
 "Very nice course, covers all the stuff you need, good voice and good explanation makes it
perfect for people that are new to HTML. Also there's some best practices
recommendations which are useful even for advanced developers."
"Excellence in giving the optimal set of tools for web development beginners seeking a well-
rounded start for professional web development."
Thank you for taking the time to read this, and we hope to see you in the course!

What you’ll learn

• Build a simple HTML text site

• Style web pages using CSS
• Program websites with JavaScript

Are there any course requirements or prerequisites?

• No previous development experience required Access to various open- source

(free) software.

Who this course is for:

• Anyone who would like to learn front-end web development

1.2 Training Objective:

• Training are generally thought of to be reserved for college students looking to gain
experience in a particular field. However, a wide array of people can benefit from
Training Internships or courses in order to receive real world experience and develop
their skills which can be further used in jobs .
• An objective for this position should emphasize the skills you already possess in
the area and your interest in learning more
• Internships, Training and courses are utilized in a number of different career fields,
including architecture, engineering, healthcare, economics, advertising and many more.
• Some courses is used to allow individuals to perform scientific research while others are
specifically designed to allow people to gain first-hand experience working.
• Utilizing internships is a great way to build your resume and develop skills that can be
emphasized in your resume for future jobs. When you

5
 are applying for a Training Internship, make sure to highlight any special skills or
talents that can make you stand apart from the rest of the applicants so that you have an
improved chance of landing the position.

1.3 Motivation:
After thinking the idea of the project and creating the basic framework for it, main task was to
explore new and cool features to add in the website to make it look more attractive and wiser.
So, for that I surfed a lot of websites and watched a lot of videos to incorporate those cool
features in my project.

E-learning is a subset of education technology which offers an online learning and teaching
platform to disperse knowledge with the help of internet technology. E-learning offers
conceptual and experimental learning through machines, media platforms and network
solutions. E-learning takes place both inside and outside of the classrooms. As, Udemy is one
of the most reputable E-learning platforms, at first, I came to know about the course through
LinkedIn. But later after researching further I got its complete details. Being impressed by the
objectives and content of the course, I decided to choose this course.

6
 Chapter2: TOOLS AND TECHNOLOGY USED

2.1 Languages and frameworks used:

The Web and HTML:

HTML stands for Hypertext Markup Language, and it is the most widely used language to write
Web Pages.
• Hypertext refers to the way in which Web pages (HTML documents) are linked
together. Thus, the link available on a webpage is called Hypertext.
• As its name suggests, HTML is a Markup Language which means you use HTML to
simply "mark-up" a text document with tags that tell a Web browser how to structure
it to display.

CSS:
Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to
simplify the process of making web pages presentable.
CSS handles the look and feel part of a web page.
Using CSS, you can control the color of the text, the style of fonts, the spacing between
paragraphs, how columns are sized and laid out, what background images or colors are used,
layout designs, variations in display for different devices and screen sizes as well as a variety
of other effects.
CSS is easy to learn and understand but it provides powerful control over the presentation of
an HTML document. Most commonly, CSS is combined with the markup languages HTML
or XHTML.

JavaScript:
Java script is one of the most simple, versatile and effective languages used to extend
functionality in websites. Uses range from on screen visual effects to processing and
calculating data on web pages with ease as well as extended functionality to websites using
third party scripts among several other handy

7
features, however it possesses some negative effects that might make you want to think twice
before implementing JavaScript on your website.

HTTP:
Hypertext Transfer Protocol (HTTP) is an application-layer protocol for transmitting
hypermedia documents, such as HTML. It was designed for communication between web
browsers and web servers, but it can also be used for other purposes. HTTP follows a
classical client-server model, with a client opening a connection to make a request, then
waiting until it receives a response. HTTP is a stateless protocol, meaning that the server does
not keep any data (state) between two requests.

2.2 Software's Used:

1. Visual Studio Code:

Visual Studio Code is an source-code editor made by Microsoft for Windows, Linux and
macOS. Features include support for debugging, syntax highlighting, intelligent code
completion, snippets, code refactoring, and embedded Git. Users can change the theme,
keyboard shortcuts, preferences, and install extensions that add additional functionality.

Microsoft has released most of Visual Studio Code's source code on GitHub under
the permissive MIT License, while the releases by Microsoft are proprietary
freeware.

In the Stack Overflow 2021 Developer Survey, Visual Studio Code was ranked the most
popular developer environment tool, with 70% of 82,000 respondents reporting that they use
it.

Visual Studio Code was first announced on April 29, 2015, by Microsoft at the 2015 Build
conference. A preview build was released shortly thereafter.

On November 18, 2015, the source of Visual Studio Code was released under the MIT
License, and made available on GitHub. Extension support was also

8
announced. On April 14, 2016, Visual Studio Code graduated from the public preview stage and
was released to the Web.

Fig4. Vs Code

VS CODE Extensions Used:-

1. Babel JavaScript, by Michael McDermott. With over 550k+ installs to date, this
extension provides syntax highlighting for ES201x JavaScript, React, FlowType and
GraphQL code.

2. Makes your existing server live. This is a browser extension that helps you to live
reload feature for dynamic pages

9
 Chapter3: TECHNICAL CONTENT

HyperText Markup Language(HTML) –

HTML stands for HyperText Markup Language. It is used to design web pages using a
markup language. HTML is the combination of Hypertext and Markup language. Hypertext
defines the link between the web pages. A markup language is used to define the text
document within tag which defines the structure of web pages. This language is used to
annotate (make notes for the computer) text so that a machine can understand it and
manipulate text accordingly. Most markup languages (e.g. HTML) are human-readable. The
language uses tags to define what manipulation has to be done on the text.

Different Versions Of HTML –

HTML was created by Sir Tim Berners-Lee in late 1991 but was not released
officially, published in 1995 as HTML 2.0. HTML 4.01 was published in late 1999 and
was a major version of HTML.

• HTML 1.0 was released in 1993 with the intention of sharing

information that can be readable and accessible via web browsers. But not many of the
developers were involved in creating websites. So the language was also not growing.
• Then comes the HTML 2.0 , published in 1995 , which contains all the features of
HTML 1.0 along with that few additional features, which remained as the standard
markup language for designing and creating websites until January 1997 and
refined various core features of HTML.
• Then comes the
HTML 3.0 , where Dave Raggett who introduced a fresh
paper or draft on HTML. It included improved new features of HTML, giving more
powerful characteristics for webmasters in designing web pages. But these powerful
features of new HTML slowed down the browser in applying further improvements.
• Then comes
successful
HTML 4.01, which is widely used and was a version
released HTML 5.0 of HTML before , which is currently and used
worldwide. HTML 5 can be said for an
extended version of HTML 4.01, which was published in the year 2012 .

10
Table 1
VERSION YEAR
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 4.01 2000
HTML5 2012
XHTML 5 2013

HTML Page Structure :

11
 • The <!DOCTYPE html> declaration defines that this document is an HTML5
document
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the HTML page
• The <title> element specifies a title for the HTML page (which is shown in the
browser's title bar or in the page's tab)
• The <body> element defines the document's body, and is a container for all the
visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
• The <h1> element defines a large heading
• The <p> element defines a paragraph

HTML Element:
An HTML element is defined by a start tag, some content, and an end tag:

<tagname>Content goes here...</tagname>

The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1>

<p>My first paragraph.</p>

A Simple HTML Document:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

12
HTML Attributes:
• All HTML elements can have attributes
• Attributes provide additional information about elements
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs like: name="value"

Cascading Style Sheets(CSS):

Fig5. CSS

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation
of a document written in a markup language such as HTML. CSS is a cornerstone
technology of the World Wide Web, alongside HTML and JavaScript.

CSS is designed to enable the separation of presentation and content, including layout, colors,
and fonts. This separation can improve content accessibility, provide more flexibility and
control in the specification of presentation characteristics, enable multiple web pages to share
formatting by specifying the relevant CSS in a separate .css file which reduces complexity
and repetition in the structural content as well as enabling the .css file to be cached to
improve the page load speed between the pages that share the file and its formatting.
In addition to HTML, other markup languages support the use of CSS including XHTML,
plain XML, SVG, and XUL.

13
Why is CSS Used?
CSS is used to define styles for your web pages, including the design, layout and
variations in display for different devices and screen sizes.

CSS Saves a Lot of Work!

The style definitions are normally saved in external .css files.

With an external stylesheet file, you can change the look of an entire website by changing just
one file!

CSS Syntax:
A CSS rule consists of a selector and a declaration block.

Fig6. Depicts syntax of CSS

• The selector points to the HTML element you want to style.

• The declaration block contains one or more declarations separated by

semicolons.

• Each declaration includes a CSS property name and a value, separated by a colon.
• Multiple CSS declarations are separated with semicolons, and
declaration blocks are surrounded by curly braces.

There are 5 types of selector:

14
 1. The CSS element Selector
The element selector selects HTML elements based on the element name.

2. The CSS id Selector

• The id selector uses the id attribute of an HTML element to select a specific
element.

• The id of an element is unique within a page, so the id selector is used to select

one unique element!

• To select an element with a specific id, write a hash (#) character, followed
by the id of the element.

3. The CSS class Selector

• The class selector selects HTML elements with a specific class attribute.

• To select elements with a specific class, write a period (.) character, followed
by the class name.

4. The CSS Universal Selector

• The universal selector (*) selects all HTML elements on the page.

5. The CSS Grouping Selector

• The grouping selector selects all the HTML elements with the same style definitions.

Selector Example Example description

#id #firstname Selects the element with

id=”firstname”

.class .intro Selects the element with

class=”intro”

15
 element.class p.intro Selects only <p>
elements with
class=”intro”

* * Selects all elements

element p Selects only <p>

elements

element,element,… div,p Selects all <div>

elements and all <p>
elements

Three Ways to Insert CSS

There are three ways of inserting a style sheet:

• External CSS
• Internal CSS
• Inline CSS

External CSS
With an external style sheet, you can change the look of an entire website by changing just
one file!

Each HTML page must include a reference to the external style sheet file inside the <link>
element, inside the head section.

An external style sheet can be written in any text editor, and must be saved with a .css
extension.
The external .css file should not contain any HTML tags.

Internal CSS
An internal style sheet may be used if one single HTML page has a unique style.

16
The internal style is defined inside the <style> element, inside the head section.

Inline CSS

An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style attribute
can contain any CSS property.

Cascading Order
What style will be used when there is more than one style specified for an HTML
element?

All the styles in a page will "cascade" into a new "virtual" style sheet by the following rules,
where number one has the highest priority:

1. Inline style (inside an HTML element)

2. External and internal style sheets (in the head section)
3. Browser default
So, an inline style has the highest priority, and will override external and internal styles and
browser defaults.

CSS Box Model:

In CSS, the term "box model" is used when talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element. It
consists of: margins, borders, padding, and the actual content. The image below illustrates
the box model:

17
 Fig7. Depicts Box Model

Explanation of the different parts:

• Content - The content of the box, where text and images appear
• Padding - Clears an area around the content. The padding is
transparent
• Border - A border that goes around the padding and content
• Margin - Clears an area outside the border. The margin is transparent The box
model allows us to add a border around elements, and to define space between elements.

18
 JAVASCRIPT:

Fig8. Javascript

JavaScript often abbreviated as JS, is a programming language that conforms to the

ECMAScript specification. JavaScript is high-level, often just-in-time compiled, and multi-
paradigm. It has curly-bracket syntax, dynamic typing, prototype-based object-orientation,
and first-class functions.
Alongside HTML and CSS, JavaScript is one of the core technologies of the World Wide
Web. Over 97% of websites use it client-side for web page behavior, often incorporating
third-party libraries. Most web browsers have a dedicated JavaScript engine to execute the
code on the user's device.
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 they are now core
components of other software systems, most notably servers and a variety of applications.
Although there are similarities between JavaScript and Java, including language name,
syntax, and respective standard libraries, the two languages are distinct and differ greatly in
design.

What makes JavaScript unique?

There are at least three great things about JavaScript:

19
• Full integration with HTML/CSS.
• Simple things are done simply.
• Support by all major browsers and enabled by default.

JavaScript is the only browser technology that combines these three things. That’s what
makes JavaScript unique. That’s why it’s the most widespread tool for creating browser
interfaces.
That said, JavaScript also allows to create servers, mobile applications, etc.

Uses Of Javascript:
JavaScript helps the users to build modern web applications to interact directly without
reloading the page every time. JavaScript is commonly used to dynamically modify HTML
and CSS to update a user interface by the DOM API. It is mainly used in web applications.

Fig9. Depicts the uses of Javascript

1. Web Applications
As day-by-day there is a continuous improvement in the browsers, so JavaScript gained
popularity for making robust web applications. We can understand it by taking the example
of Google Maps. In Maps user just requires to click and drag the mouse; the details are
visible just by a click. There is a use of JavaScript behind these concepts.

20
2. Web Development
JavaScript is commonly used for creating web pages. It allows us to add dynamic behaviour
to the webpage and add special effects to the webpage. On websites, it is mainly used for
validation purposes. JavaScript helps us to execute complex actions and also enables the
interaction of websites with visitors. Using JavaScript, it is also possible to load the content in
a document without reloading the webpage.

3. Mobile Applications
Now a day's mobile devices are broadly used for accessing the internet. Using JavaScript, we
can also build an application for non-web contexts. The features and uses of JavaScript make
it a powerful tool for creating mobile applications. The React Native is the widely used
JavaScript framework for creating mobile applications. Using React Native, we can build
mobile applications for different operating systems. We do not require writing different codes
for the iOS and Android operating systems. We only need to write it once and run it on
different platforms.

4. Game
JavaScript is also used for creating games. It has various libraries and frameworks for
creating a game. The game can either be a 2D or 3D. Some JavaScript game engines such as
PhysicsJS, Pixi.js help us to create a web game. We can also use the WebGL (web graphics
library), which is the JavaScript API to render 2D and 3D images on browsers.

5. Presentations
JavaScript also helps us to create presentations as a website. The libraries, such as RevealJs,
and BespokeJs, can be used to create a web-based slide deck. They are easier to use, so we
can easily make something amazing in a short time.

The Reveal.js is used to create interactive and beautiful slide decks with the help of HTML.
These presentations work great with mobile devices and tablets. It also supports all of the
CSS color formats. The BespokeJS includes animated bullet lists, responsive scaling, and a
wide variety of features.

21
6. Server Applications
A large number of web applications have a server-side to them. JavaScript is used to generate
content and handle HTTP requests. JavaScript can also run on servers through Node.js. The
Node.js provides an environment containing the necessary tools required for JavaScript to
run on servers.

7. Web Servers
A web server can be created by using Node.js. Node.js is event-driven and not waits for the
response of the previous call. The servers created using Node.js are fast and don't use
buffering and transfer chunks of data. The HTTP module can be used to create the server by
using the createServer() method. This method executes when someone tries to access the
port 8080. As a response, the HTTP server should display HTML and should be included in
the HTTP header.

Advantages:

• JavaScript is executed on client side

This means that the code is executed on the user's processor instead of the web server thus
saving bandwidth and strain on the web server.

• JavaScript is relatively easy language

The JavaScript language is relatively easy to learn and comprises of syntax that is close to
English. It uses the DOM model that provides plenty of prewritten functionality to the various
objects on pages making it a breeze to develop a script to solve a custom purpose.

• JavaScript is relatively fast to end users

As the code is executed on the user's computer, results and processing is completed almost
instantly depending on the task as it does not need to be processed in the site's web server and
sent back to the user consuming local as well as server bandwidth.

• Extended functionality to web pages

Third party add-ons like Grease monkey enable JavaScript developers to write snippets of
JavaScript which can execute on desired web pages to extend its

22
functionality. If you use a website and require a certain feature to be included, you can write
it yourself and use an add-on like grease monkey to implement it on the web page.

Training Period :
During the training period, my main job is to learn about the course content which is front-end
development including the HTML, CSS, JavaScript technologies and to practically implement
these concepts. So, to implement it practically, I have to develop a project based on these
things, which is my portfolio.

Setting up the things

So, my work is that for the creation of project, I have to first think about the project
structure and basic needs and necessities of the project like what are the basic things
inside a portfolio website, for example: make it work in all devices, navigation bar,
search buttons, social media handles, etc.

Ordering the content

After thinking about all these basic requirements, I have to figure out the design of the
website that is, where should I place navigation bar, social media icons, my contact
and all.

Designing phase

After that, look of the website is created, which means what color combination will
suits the website, design of the buttons and icons, what extra things to be included to
make site look realistic . I also had to see how to make it work in mobile devices too.

Folder Structuring

Than folder structure is created, which means that proper locations to the files are
assigned like CSS files will be placed in different folder, JavaScript files will be
placed in the different folder, image files will be

23
 placed in different folder. This is done because it is easy and fast to sort things out
if proper order of the files and folders is maintained.

3.1 PROJECT STRUCTURE:

Briefing about my project, my project is a website which is basically a portfolio which has
only front-end part covered. My Project title is "LIST MAKER". As the name suggests it is
related to description of my resume. In this, there is the description about me, it tells my
skills, it consists of the project I have made and also contains my contact details.

3.2 File Structure:

Project consists of a number of files:

index.html:

This file is the main and central file of the project. This file contains the HTML code and
code to include other files as well. This file contains all the code which is practically visible
to us on the site. If we do not write the code to include other files than the project just
contains the normal text which is very ugly to look. style.css:

This file is our CSS file. This file contains all the styling components of the website. If we
remove this file from our main file, then our code will look like a body without outer
decoration. We can also say that it is the beauty secret of our project. This file is included in
the index.html file at the starting of the file, in the head tag, enclosed with the link tag in the
file.

app.js:
This file contains the JavaScript of the project. In the project, use of JavaScript is very less
but still it provides the dynamic nature to our website. The basic use of JavaScript in the
project was to include a scroll bar and provide a hamburger sign so that it is compatible in
mobile devices too. This file is included in the end of the index.html file, this is because when
the website is opened, HTML component of the project will be included before so that users
are able to view the contents before, after that at the end, JavaScript components can be
loaded.

24
3.3 Website structure:
As a viewer or user of the website, we can divide the website mainly in three sections:

1. Header Section

2. Content Area

3. Footer Section

Briefly discussing each section, will form the image in our mind like this:

1. Header Section:
• This section is the top section of our website. This section can also be termed to as
the navigation bar of the website. This is called as navigation bar because we can
easily switch to other pages from one page if we were to add more pages in the
website in the future.

• Navigation bar in our project consists of my name in the top left corner of the
screen as it is a portfolio. This name depicts the name of the person whose
portfolio it is, here it is my name as I am describing my portfolio.

• Just at the right of the navigation bar consists of Home, Soft Skills, Technical
Skills, Projects, About Me and finally Contact. Presently, we are always on the
homepage because our website does not contain any other page, but this link is
useful because on clicking these link we go to certain section.

• When we click on certain button it takes us to the certain section of our portfolio
so that it is easy for others to see it in a convenient way.

• It consists of the sticky or fixed navigation menu that does not disappear when the
user scrolls down a web page. Sticky navigation is typically used in portfolio
where the main call to action elements are within the

25
 primary horizontal navigation bar. Also referred to as persistent navigation bars,
these menus work well to give a user a sense of control on actionable websites and
on longer web pages.

2. Content Area:
• This area of the project contains all the important information, that is all the
information related to me, this area at the top contains a separate large section which
tells the name of the person whose portfolio it is. Whenever a person sees my
portfolio it greats him/her and tell my name.

• After that section, it contains another section which is titled as About Me. It consists
of my profile photo and gives a whole description about me.

• The next section consists of Soft Skills which describes what are my soft skills.

• The next section consists of Technical Skills which consists of my technical

knowledge as a student. It tells the person viewing my portfolio in what technical
fields I have knowledge.

• The next section of my portfolio consists of my projects that I have made till now. It
give a brief description of my projects so that person can see what all I have made.

• The last section of my Content area consists of my contact information . It gives the
viewer my contact number, email id and my address where I live.

3. Footer Section:
This is the bottom most part of the website and is strictly intact with the screen. This section
of the project consists of all the links for the social media handles of

26
the project like Github and Linkden. It consists of only two social media links because the
portfolio is professional.

Whenever the person clicks on certain icon it takes him to my github and linkedIn
account so that he can check my profile.

Along with this it also describes the copyright claim of the site. We can say that, it is the id of
the website.

Tags Used in my Portfolio Website:

1) HTML TAG - Defines the root of HTML Document.

2) HEAD TAG – The <head> element is a container for metadata (data about data) and is
placed between the <html> tag and the <body> tag.

3) LINK TAG –
• The <link> tag defines the relationship between the current document and an external
resource.

• The <link> tag is most often used to link to external style sheets.

• The <link> element is an empty element, it contains attributes only.

• In my Website the <link> tag to link external css which is style.css.

4) META TAG –
• The <meta> tag defines metadata about an HTML document. Metadata is data
(information) about data.

• <meta> tags always go inside the <head> element, and are typically used to specify
character set, page description, keywords, author of the document, and viewport
settings.

27
5) TITLE TAG –
• The <title> tag defines the title of the document. The title must be textonly, and
it is shown in the browser's title bar or in the page's tab.
• The <title> tag is required in HTML documents!

• The contents of a page title is very important for search engine optimization (SEO)!
The page title is used by search engine algorithms to decide the order when listing
pages in search results.

• The title of my website is Portfolio Website which is written between the opening
and closing tag of <title>.

6) SCRIPT TAG –
• The <script> tag is used to embed a client-side script (JavaScript).

• The <script> element either contains scripting statements, or it points to an external

script file through the src attribute.

• The <script> tag in the project is used to attach an external script file ie. App.js. It
is also used in attaching font-awesome which is used for getting social icons used
in the footer tag.

7) BODY TAG –
• The <body> tag defines the document's body.
• The <body> element contains all the contents of an HTML document, such as
headings, paragraphs, images, hyperlinks, tables, lists, etc.

8) SECTION TAG -
• The <section> tag defines a section in a document.

• In the Portfolio website I have used 7 section tags as there are different-
different section such as About Me, Skills, Projects, etc..

9) DIV TAG –
• The <div> tag defines a division or a section in an HTML document.

28
 • The <div> tag is used as a container for HTML elements - which is then styled with
CSS or manipulated with JavaScript.

• The <div> tag is easily styled by using the class or id attribute.

10) a TAG –
• The <a> tag defines a hyperlink, which is used to link from one page to another.

• The most important attribute of the <a> element is the href attribute, which
indicates the link's destination.

• In my website I have used 10 a tags, first six <a >tags are used in the navigation
menu which are used to go to different different sections on clicking them.

• Next two < a> tags include portfolio and resume one button. But for now I have not
placed anything inside it till now.

• The last two <a> tags social icons buttons which are used so that any person
viewing my Portfolio can go to my specific professional account and can see my
activities that includes my projects etc... .

11) <h1> to <h6> Tags –

• The <h1> to <h6> tags are used to define HTML headings.

• <h1> defines the most important heading. <h6> defines the least important
heading.

• Mostly in my website I have used <h1> tags because the topics are well defined
using them. In some cases <h2> tags are used like in the cases of subtopics.

12) SPAN TAG –

• The <span> tag is an inline container used to mark up a part of a text, or a part of a
document.

• The <span> tag is easily styled by CSS or manipulated with JavaScript using the
class or id attribute.

29
 • The <span> tag is much like the <div> element, but <div> is a blocklevel element
and <span> is an inline element.

• I have used the <span> tag in the places where I want to highlight them.
13) P TAG –

• The <p> tag defines a paragraph.

• The section of About Me includes a <p> tag because I have to explain myself in
paragraph.

• Then in my project I have again used <p> tag where I am explaining some of
the projects of total projects in brief.

14) UL TAG –

• The <ul> tag defines an unordered (bulleted) list.

• Use the <ul> tag together with the <li> tag to create unordered lists.

15) LI TAG –
• The <li> tag defines a list item.

• The <li> tag is used inside ordered lists(<ol>), unordered lists (<ul>), and in menu
lists (<menu>).

• I have <li> tag in various places like first in navigation menu where there are
different different section names . I t is basically used there to define different items.

16) IMG TAG –

• The <img> tag is used to embed an image in an HTML page.

• The <img> tag has two required attributes:

1) src - Specifies the path to the image

2) alt - Specifies an alternate text for the image, if the image for some
reason cannot be displayed

30
 • There are various places in my website where I have used <img> tag like in the
About Me section where it contains my profile photo. Then I have used in my
project section where it contains the photo of the projects I have made.
CSS Units used in the Portfolio Website

ABSOLUTE LENGTH –
Absolute length units are not recommended for use on screen, because screen
sizes vary so much. However, they can be used if the output medium is known, such as for
print layout.

Px - Pixels (px) are relative to the viewing device. For low-dpi devices, 1px is one device
pixel (dot) of the display. For printers and high resolution screens 1px implies multiple
device pixels.

RELATIVE LENGTH –
Relative length units specify a length relative to another length property. Relative length
units scale better between different rendering medium.
UNITS DESCRIPTION

REM Relative to font-size of the root

element

% Relative to the parent element

VW Relative to 1% of the width of the

viewport*

VH Relative to 1% of the height of the

viewport*

MEDIA QUERY IN WEBSITE –

The @media rule is used in media queries to apply different styles for different media
types/devices.

31
Media queries can be used to check many things, such as:

• width and height of the viewport

• width and height of the device

• orientation (is the tablet/phone in landscape or portrait mode?)

resolution

Key frames:-

• The @keyframes rule specifies the animation code.

• The animation is created by gradually changing from one set of CSS styles to
another.
• During the animation, you can change the set of CSS styles many times.
• There are many times where I have used @keyframes in Portfolio, for instance
the hamburger sign which appears in mobile size has @keyframe used in it
Because of the @keyframes it is glowing and making it look realistic.
• Secondly it has been used in the section just below navigation menu ie. hero
section. Because of it, it is showing a box transition over the greeting and
changing the color of my name.

32
 Project Design:

1. Title and Container:

 The project starts with a prominent title "Task Manager," indicating the purpose of the
application.
 All components of the task manager are contained within a visually appealing and responsive
container for a consistent look.

2. Task Input:

 Users can input tasks using a text input field. The input field is styled for easy readability and
user interaction.
 Placeholder text inside the input field provides guidance to the user.

3. Add Task Button:

 Next to the task input, there's an "Add" button. Users can click this button to add tasks to the
task list.
 The button is styled to be visually distinct, making it easy for users to identify the action.

4. Task List:

 Tasks are displayed in a list format. Each task item contains the task description and additional
action buttons.
 Each task item can have features like due date, priority, status, and more, depending on the
complexity of the project.
 Tasks are styled for clarity, with different colors indicating different priorities or statuses.
 Completed tasks might have a strike-through effect or a different background color to signify
their completion status.

5. Action Buttons (Edit, Delete, Complete):

 Each task item comes with action buttons for editing, deleting, and marking tasks as complete.
 The buttons are icon-based for quick recognition. For example, a pencil icon for editing and a
trash bin icon for deletion.
 Hover effects or color changes provide feedback to users when they interact with the buttons.

6. Task Details and Edit Feature:

 Users can click on a task to view detailed information or edit the task.
 Editing might open a modal or expand the task item, allowing users to modify task details such
as description, due date, and priority.
 Updated tasks should reflect the changes in real-time on the task list.
33
 7. Filter and Sorting Options:

 Users can filter tasks based on different criteria, such as status (completed, active) or priority
(high, medium, low).
 Sorting options might allow users to sort tasks by due date or priority, ascending or descending.
 Filter and sort options should be intuitive and easy to use, enhancing the user experience.

8. Styling and Animations:

 The entire interface is styled for a visually pleasing experience. Consistent color schemes,
typography, and spacing are used.
 Animations, such as sliding effects for task addition/deletion or fade-in for task details, can
enhance the overall user interface.

9. Responsiveness:

 The task manager should be responsive, ensuring a seamless experience on various devices,
including desktops, tablets, and smartphones.

10.User Authentication and Data Persistence (Optional):

 For a more advanced project, user authentication can be implemented to allow users to have
personalized task lists.
 Data persistence can be achieved using a backend database to store user tasks, ensuring that
tasks are saved even if the user closes the browser.
Remember that the complexity of features can vary based on the project requirements and the intended
audience. It's important to maintain a balance between a feature-rich interface and simplicity to provide
a user-friendly experience. Regular usability testing and feedback gathering can help refine the design
and enhance user satisfaction.

34
 Chapter4: SNAPSHOTS

HTML file:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Task Manager</title>
<link rel="stylesheet" href="styles.css">
</head>

<body>
<div class="container">
<h1>Task Manager</h1>
<div class="input-container">
<input type="text" id="taskInput" placeholder="Add a
new task...">
<button id="addBtn">Add</button>
</div>
<div class="filters">
<button class="filter-btn active" data-
filter="all">All</button>
<button class="filter-btn" data-
filter="completed">Completed</button>
<button class="filter-btn" data-
filter="active">Active</button>
</div>
<ul id="taskList"></ul>
</div>
<script src="https://code.jquery.com/jquery-
3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
35
</html>

CSS File:

body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
text-align: center;
background-color: #f8f9fa;
}

.container {
text-align: center;
background-color: #ffffff;
border-radius: 10px;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 400px;
}

h1 {
margin-bottom: 20px;
color: #007bff;
font-size: 36px;
}

.input-container {
margin-bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
36
}

input[type="text"] {
width: 70%;
padding: 10px;
font-size: 16px;
border: 1px solid #ced4da;
border-radius: 5px;
margin-right: 10px;
}

#addBtn {
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 5px;
background-color: #28a745;
color: #fff;
cursor: pointer;
transition: 0.3s ease;
}

#addBtn:hover {
background-color: #218838;
}

.filters {
margin-bottom: 20px;
}

.filter-btn {
margin: 0 5px;
padding: 8px 16px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
37
}

.filter-btn.active {
background-color: #007bff;
color: #fff;
}

ul {
list-style: none;
padding: 0;
}

li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
margin: 10px 0;
background-color: #ffffff;
border: 1px solid #ced4da;
border-radius: 5px;
animation: slideIn 0.5s ease;
}

@keyframes slideIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.delete-btn {
background-color: #dc3545;
38
 color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: 0.3s ease;
font-size: 16px;
}

.delete-btn:hover {
background-color: #c82333;
}

JAVASCRIPT LOGIC:

$(document).ready(function () {
// Task Manager Logic
$('#addBtn').on('click', function () {
const taskText = $('#taskInput').val().trim();
if (taskText !== '') {
const taskItem = $('<li></li>').text(taskText);
const completeBtn = $('<button></button>')
.addClass('complete-btn')
.text('Complete')
.on('click', function () {
$(this).parent().toggleClass('completed');
});
const deleteBtn = $('<button></button>')
.addClass('delete-btn')
.text('Delete')
.on('click', function () {
$(this).parent().remove();
});
taskItem.append(completeBtn, deleteBtn);
$('#taskList').append(taskItem);
$('#taskInput').val('');

39
 }
});

$('#taskList').on('click', '.complete-btn', function () {

$(this).parent().toggleClass('completed');
});

$('.filter-btn').on('click', function () {
const filterType = $(this).attr('data-filter');
if (filterType === 'all') {
$('#taskList li').show();
} else if (filterType === 'completed') {
$('#taskList li:not(.completed)').hide();
$('#taskList li.completed').show();
} else if (filterType === 'active') {
$('#taskList li.completed').hide();
$('#taskList li:not(.completed)').show();
}
$('.filter-btn').removeClass('active');
$(this).addClass('active');
});
});

40
OUTPUT:

41
 Chapter5: RESULTS AND DISCUSSIONS

Finally, course " Front-End Web Development" and the project "LIST MAKER" has
completed and report of the project is also completed. Here, to summing up, I have completed
my summer training after 2nd year of my graduation from a popular and well reputed online
E-learning platform, Udemy on the front-end development of the website. Along with this I
have to create a working project on the same domain.

About the course, it consists of some popular languages and frameworks for the front-end
web development, which are HTML, CSS, JavaScript and React js. Along with this it also
consists of some utilities for web development like chrome extensions and developer tools
and also some small level projects as well. I have learnt all the concepts of front-end web
development under the supervision of instructors, Colt Steele. It was a great experience
working under the supervision of him, they have completely covered my concepts relating the
topic and have developed enough confidence in me to work on this field whenever or
wherever possible.

About the project, project consists of a website having front-end phase only. This website is
constructed using the technologies which I have learnt in the course which are HTML, CSS,
JavaScript and uses Google Chrome for testing the website during development phase. The
basic structure of website consists of Header, Content Area and Footer. Header is the
navigation bar of the website and consists of some formal content, and some other section
names at the top like Home, Menu. It makes the work easier for the viewer as whenever
viewer have to go to any section, on a single click on any item in navigation bar he can go
directly to that section. After that, content Area is the main and central area of my website.

About the training report, this report consists of a Word file and a PPT. file, which clearly
depicts my working during the whole course of the project and course, it

42
consists the details about my course, instructor, duration of the course and also consists the
details about my working project that is which technologies, I have used, how they are
implemented, file structure of the project, website structure etc. and screenshots of my
project. It also consists of my personal record and my self-evaluation report.

Chapter6: CONCLUSION AND FUTURE SCOPE

CONCLUSION:
In a nutshell, this course has been an excellent and rewarding experience. I can conclude
that there have been a lot I’ve learnt from this course.

Needless to say, the technical aspects of the work I’ve done are not flawless and could be
improved provided enough time.

As someone with no prior knowledge and experience in HTML, CSS and JAVASCRIPT
whatsoever I believe my time spent research and discovering new languages was well worth
it and contributed to finding an acceptable solution to an important aspect of web design and
development.

The most important things that I’ve learned during this time span are the skills of managing
time, self motivation and hardworking skills.

Working these web development languages such as HTML, CSS AND JAVASCRIPT has
increased my interest in them. It has not only increased my interest in them but also have
fined my creative skills and these can prove useful to me in future.

It was a very good experience so far making a Portfolio website using HTML, CSS and
JAVASCRIPT as it helped to gain a lot of confidence and boosted my knowledge. While
making websites along the way I learnt many things with it, that what can we do with these
skills. We can start our own business by doing freelancing which can help us gain new
experiences and along with that we can earn money using it.

43
FUTURE SCOPE:

• For any business, a website matters more than anything, when it comes to reaching
out to customers online. A website is the representation of the business online. These
days, every business realizes the need for having a website and are putting in efforts to
design and develop the best site for taking their products or services online. This is
where we can see a great deal of scope for web development and design.
• With the tremendous progress in the launch of websites, people who can create
exemplary designs and platforms for their online presence is what businesses are
searching for. Web developers and designers are bringing in all the best of their
technical expertise and skills to develop and unique design websites that are and
capable of pulling the crowd.
• Most web developers and designers are familiar with the latest tools, techniques,
technologies, and frameworks that will help them get beautiful sites up in a short span
of time. The development time of websites has come down with the agile technologies
that make development easier. Here, we will cover the scope and future of web
development.
• JavaScript was initially created as a browser-only language, but it is now used in
many other environments as well.
• Today, JavaScript has a unique position as the most widely-adopted browser language
with full integration in HTML/CSS.

44
 Chapter7: Weekly Job Summary

Week 1:

Description of Activity, duty Performed Performed Time spent

responsibility with team alone
Studying about e-learning Platform No Yes 2 hrs.
and getting used to it
Getting started with Front-end No Yes 2 hrs.
Web Development
HTML, Anatomy of HTML, No Yes 2hrs.
History of HTML
Structure Of HTML, HTML No Yes 2hrs.
content, Elements
Lists, Images, Creating Links, No Yes 3hrs.
HTML Tags

One thing that went particularly well this week:

Introduction to the front-end web development was the best part that goes pretty well.
Understood all the concepts of HTML.

The most challenging thing this week:

Actually, it was a new thing for me to work with online course, so it gave me a hard time to
getting used of it initially. Tags were also not easy to remember.

Self-evaluation:

A+ A A- B+ B B- C+ C C- D+ D D- F

List one way you can improve your performance:

One way to improve performance is to practice the concept in which I am facing the most
difficulty.

45
Week 2:

Description of Activity, duty Performed Performed Time spent

responsibility with team alone
What is CSS? , Basics of CSS, No Yes 2 hrs.
Anatomy of CSS
Element Class, Selectors, CSS No Yes 2 hrs.
rules, Text Styling
Sand Box Model, Element No Yes 3 hrs.
positioning, Background
Property, Colours

Media Query, Bootstrap No Yes 3hrs.

One thing that went particularly well this week:

Understood all the concepts of CSS , all the properties of CSS, Media Query.

The most challenging thing this week:

Positioning of Background images using CSS was tough as it was the first time.

Self-evaluation

A+ A A- B+ B B- C+ C C- D+ D D- F

List one way you can improve your performance:

Performance can be improved by watching the videos again and again so that we become
familiar with the concept.

46
Week 3:

Description of Activity, duty Performed Performed Time spent

responsibility with team alone

What is JAVASRIPT, Basics Of No Yes 3hrs.

Javascript , Variables of
Javacsript

Javascript Functions, Scope, No Yes 3-4 hrs.

Hoisting, Nested Functions
Passing Values, Function No Yes 3hrs.
Constructs
Arrays, Function on Arrays, No Yes 2hrs
Closures

One thing that went particularly well this week:

Understood all the concepts of Javascript

The most challenging thing this week:

The most challenging was basically applying the concept of Javascript on program.

Self-evaluation

A+ A A- B+ B B- C+ C C- D+ D D- F

List one way you can improve your performance:

One way to improve performance is to practice the concept in which I am facing the most
difficulty

Week 4:

47
Description of Activity, duty Performed Performed Time spent
responsibility with team alone

Creating the basic structure of No Yes 3hrs.

portfolio
Coding for the navigation bar, No Yes 3hrs.
adding the Hameburger sign
Coding the content area, scroll bar No Yes 5-6hrs.

Creating the footer No Yes 2hrs.

Adding social media icons No Yes 2hrs.

One thing that went particularly well this week:

Everything is completed. Done making the portfolio of my own.

The most challenging thing this week:

Giving finishing touches to the project.

Self-evaluation

B+ B C+ C D+ D
A+ A A- B- C- D- F

List one way you can improve your performance:

Performance can be made better by making more projects on these concepts

48
 Chapter8: Learning after training

A course is a learning experience of its own kind. The importance it has got over the years in
building one’s career is not exaggerated; given what it has to give back.

Neither is it spoon-fed school learning, nor pressure filled workload. And in between, you not
only learn the basics of work life but also the soft skills required for a brighter professional
career.

1. New Skill

The first reason behind going for a course is learning new skills and work to sharpen your
existence skills. I think that I was completely able to do so. I worked on some new
technologies like HTML, CSS, JavaScript, Bootstrap, jQuery.

2. Problem Solving Skills

What real-life problems have you solved till now other than to decide what to wear the next
day and how to dodge the upcoming assignment deadline? An internship introduces you to
real-life work problems and hence develops your problem-solving skills.

3. Work Ethics

You won’t really learn about work ethics until you are in a tangible work environment. In
college education, we are used to making excuses for late submissions and what not! But it is
only when we are introduced to the actual environment that we learn work ethics.

49
4. Adaptability Skills

Not everyone is adaptable from the beginning. In fact, you can refuse to be so even during
your internship experiences but the loss is yours. Being adaptive to your surroundings easily
is one of the most useful soft skills not only desirable to employers but also important to your
self-growth. So, make the most of your internship experiences and learn some adaptability
skills while you are there.

5. Communication Skills

Talking of soft skills, can the importance of communication skills be ever put into words? It’s
one of the top listed skills that recruiters look for in a resume and something that can get you
from bottom to top. Communicating well is a gem of a skill which you can learn during your
internship experiences.

6. Responsibility

Often missed out in the list of soft skills, being responsible is an integral skill required in the
job arena. Your internship experience makes you more responsible and accountable for what
decisions you make and how you execute what’s been allocated to you.

7. Time Management
Last on our list, but still as important as the others, is time management. Earlier, you could
just miss a class because you had some personal commitments. During an internship which is
almost the beginning of your work life, you can’t mark your absence on a regular basis.

Hence, it helps you learn to manage your time better by maintaining a balance between your
work and personal life, without harming any of them

50
 Chapter9: References

Books referred for Web Development:

1.“HTML5: Up and Running” by Mark Pilgrim

2.“Introducing HTML5” by Remy
3.CSS Mastery 3rd Edition by Andy Budd, Emil Björklun
4.JavaScript: The Good Parts by Douglas Crockford

Web Links:
For HTML, CSS AND JAVASCRIPT, the links I referred the most are:
1. www.geeksforgeeks.org
2.www.w3schools.com
3.www.javatpoint.com
4. www.w3docs.com/

What kind of software to be used?

www.wikipedia.org/

51