An

INDUSTRIAL TRAINING REPORT

on
FRONTEND WEB DEVELOPER
at
TEKIE KIWHODE LEARNING PVT. LTD.
Final Semester Training
Submitted for the partial fulfillment for the award of Degree of
Bachelor of Technology
in
Computer Science & Engineering
J.C. BOSE UNIVERSITY OF SCIENCE & TECHNOLOGY, (YMCA)
FARIDABAD
Session (2018-2022)
Submitted By
KRISHNA KUMAR
(18020004054)

Under the Guidance of

MR SANATAN MRS RIDHIKA SHARMA

(External Project Guide) (Internal Project Guide)
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
SATYUG DARSHAN INSTITUTE OF ENGINEERING & TECHNOLOGY ,FARIDABAD

1
2
 DECLARATION

I hereby certify that the work which is being presented in this

project report titled “Frontend Web Development” in fulfillment of
the requirement for the degree of Bachelor of Technology and
submitted to “J. C. Bose University of Science and Technology,
YMCA, Faridabad”, is an authentic record of my own work carried
out under the supervision of Mr. Saran Sant.

The work contained in this report has not been submitted to any
other University or Institute for the award of any other degree or
diploma by me.

KRISHNA KUMAR
(18020004054)

3
 ACKNOWLEDGEMENT

I am extremely thankful and pay my gratitude to the Head of Our

Department, Dr. Shishir Rastogi for his constant support and
guidance. I would also like to extend my gratitude to the CSE
department and the respected teachers for giving me an opportunity
to work on engaging problem statement.

I have taken efforts in this project. However, it would not have been
possible without the kind support and help of many individuals and
organizations. I would like to extend my sincere thanks to all of them.
I am highly indebted to (Tekie Kiwhode Learning Pvt. Ltd.) for their
guidance and constant supervision as well as for providing necessary
information regarding the project & also for their support in
completing the project.

I would like to express my gratitude towards my parents & member

of (Tekie Kiwhode Learning Pvt. Ltd.) for their kind cooperation and
encouragement which help me in completion of this project.
I would like to express my special gratitude and thanks to industry
persons for giving me such attention and time.
My thanks and appreciations also go to my colleague in developing
the project and people who have willingly helped me out with thei
abilities.
KRISHNA KUMAR
(18020004054)

4
 TABLE OF CONTENTS

Page No.

Training Completion Certificate 2

Declaration 3

Acknowledgement 4

Chapter COMPANY PROFILE 8

01

Chapter 02 INTRODUCTION

2.1 Software Used 12

2.2 Technologies Used 13

2.3 UI Using Bootstrap 5 13

Chapter 03 DESIGN

5
 3.1 System Environment 18

3.2 User Interface 18

3.3 User Classes & 19

Characteristics

3.4 User Interface Demo 20

Chapter 04 STATE MANAGEMENT

4.1 HTML 21

4.2 CSS 23

4.3 JAVASCRIPT 24

Chapter 05 WEBSITE UI IN PROJECT

5.1 Home 27

5.2 User Experience 28

5.3 User Gallery 29

5.4 User Characteristics for the 30

System

6
Chapter 06 TESTING 31

Chapter 07 FUTURE SCOPE & LIMITATION 33

Chapter 08 REFERENCES 35

Chapter 09 STUDENT PROFILE 36

7
 Chapter 01

COMPANY PROFILE

COMPANY PROFILE

8
 Fig 1.1 Company Logo

Tekie kiwhode Learning Pvt. Ltd. is one of the best online coding
Platform with headquarters in Bangalore Established in 2017, our
professional IT Training and Development center has been employing
experts in this field to impart professional education to trainees. We
offer well-structured complete professional training in various
Programming Languages, Graphics & Multimedia, Web Designing as
well as Development Training that is based upon the current
recruitment needs in the IT market.

We offer time, skill and competency courses for the trainees with
specified areas of interest and proficiency and design the training
curriculum as per your demand and necessary.

We are a team of well qualified technicians who have rich experience

of web developer / digitization products and software, their integration
to provide comprehensive solutions to the industries starting from raw
materials to finished goods through different sections. To summarize,
Tekie is a complete learning institute that not only provides training on
various IT courses but also prepares students to smartly handle the
real working environment.

We understand the business needs of our customers and foster

seamless information exchange and best practices.

9
 COMPANY WORK SCOPE

Tekie is a live coding platform for kids that uses the power of
storytelling, to make learning to code a movie-like experience. The
company has built the world’s first animated series on coding that
guides students through a cinematic journey where they solve
problems and challenges using coding concepts like variables &
strings, loops and data structure. Tekie teaches Text-based Coding,
which involves actual coding language syntax rather than basic drag
and drop functions provided by competitors.

Teki’s Text-Based Coding curriculum ensures that students write

actual code during the program, giving them a distinct advantage
and deeper knowledge of the subject. Tekie has been garnering
attention from all sides because of its long-format animated
educational series which consists of 45 episodes that teach the
basics of programming. The super intuitive coding platform has an
inbuilt code simulator, workbooks, projects, and a mentor to clarify
all the doubts on the go and to help students analyse algorithms.
Tekie currently has more than 12000 students enrolled on the
platform.

Tekie is planning to expand the offerings in other markets like the

US, Canada, and the UK after successfully establishing a presence in
India and the company has grown from just seven employees to 50+
employees.

Company Website:
Tekie

10
Chapter 02
Introduction

11
 INTRODUCTION

2.1 SOFTWARE USED :

2.1.1. VISUAL STUDIO:
Visual Studio Code combines the simplicity of a source code editor with powerful
developer tooling, like IntelliSense code completion and debugging.
First and foremost, it is an editor that gets out of your way. The delightfully frictionless
edit-build-debug cycle means less time fiddling with your environment, and more time
executing on your ideas.

2.1.2 GITHUB:
At a high level, GitHub is a website and cloud-based service that helps
developers store and manage their code, as well as track and control changes
to their code. To understand exactly what GitHub is, you need to know two
connected principles:

● Version control
● Git

12
2.2 TECHNOLOGIES USED:
1. Website
a. User
i. JavaScript
ii. Bootstrap
iii. jQuery

2.3 UI using Bootstrap 5

2.3.1 JavaScript
JavaScript is a scripting or a programming language that allows you
to implement complex features on web pages – every time a web
page does more than just sit there and display static information for
you to look – displaying timely content updates, interactive maps,
animated 2D/3D graphics, scrolling video jukeboxes, etc. – you can

13
bet that JavaScript is probably involved. It is the third layer of the
layer cake of standard web technology, two of which (HTML and
CSS) we have covered in much more details in other parts of the
Learning Areas.

Following image shows importance of javascript in web Designing:

2.3.2 Features of JavaScript

JavaScript is one of the most popular languages which includes

numerous features when it comes to web development. It's
amongst the top programming languages as per Github and we
must know the features of JavaScript properly to understand what it
is capable of.

1. Light Weight Scripting Language

JavaScript is a lightweight scripting language because it is made

for data handling at the browser only. Since it is not a
general-purpose language so it has a limited set of libraries. Also

14
as it is only meant for client-side execution and that too for web
applications, hence the lightweight nature of JavaScript is a great
feature.

2. Dynamic Typing

JavaScript supports dynamic typing which means types of the

variable are defined based on the stored value. For example, if you
declare a variable x then you can store either a string or a Number
type value or an array or an object. This is known as dynamic
typing.

3. Object-Oriented Programming Support

Starting from ES6, the concept of class and OOPs has been more
refined. Also, in JavaScript, two important principles with OOP in
JavaScript are Object Creation patterns (Encapsulation) and Code
Reuse patterns (Inheritance). Although JavaScript developers rarely
use this feature but its there for everyone to explore.

4. Functional Style

This implies that JavaScript uses a functional approach, even

objects are created from the constructor functions and each
constructor function represents a unique object-type. Also,

15
functions in JavaScript can be used as objects and can be passed to
other functions too.

5. Platform Independent

This implies that JavaScript is platform-independent or we can say

it is portable; which simply means that you can simply write the
script once and run it anywhere and anytime. In general, you can
write your JavaScript applications and run them on any platform or
any browser without affecting the output of the Script. 6.
Prototype-based Language JavaScript is a prototype-based
scripting Language. This means javascript uses prototypes instead
of classes or inheritance. In languages like Java, we create a class
and then we create objects for those classes. But in JavaScript, we
define object prototype and then more objects can be created using
this object prototype.

16
Chapter 03
DESIGN

17
3.1 SYSTEM ENVIRONMENT:
Gamer:
● Input Manager
● Script
● Renders

3.2 USER INTERFACE:

Every quiz app or frontend static website must has a menu so is can
be user friendly enough and healthy users can easily fulfill their
need . Menu is also an important thing while creating the SRS
document section . In this SRS document part ; we have used the

18
menu snapshots in the user manual part . These snapshots are
based on the menu of the game .

3.3 USER CLASSES & CHARACTERISTICS:

Users of the product must possess a minimal level . Users
must know how to access the functionality of this system and
get benefited .

3.4 User Interface Demo:

19
20
 CHAPTER O4
STATE MANAGEMENT

To Manage this Project we use HTML, CSS, JAVASCRIPT ..,

Which are very simple effective tools to manage our Global State
on a websites.

4.1 Hyper Text Markup Language(HTML):

HTML stands for Hyper Text 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.

21
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 language (e.g: HTML) are
human-readable. The language uses tags to define what
manipulation has to be done on the text. HTML is a markup
language used by the browser to manipulate text, images, add
other contents, in order to display it in the required format. HTML
was created by Tim BernersLee in 1991. The first-ever version of
HTML was HTML 1.0, but the first standard version was HTML 2.0,
published.

22
4.2 Cascading Style Sheets(Css)

23
CSS Stands for Cascading Style Sheet, it is a style sheet language
used to shape the HTML elements that will be displayed in the
browsers as a webpage. Without using CSS, the website which has
been created by using HTML, will look dull. Basically CSS gives the
outer cover on aby HTML elements. If you consider HTML as a
skeleton of the webpage then the css will be the skin of skeleton.
The internet media type (MIME type) of CSS in text/CSS. The CSS
was developed by the World Wide Consortium (W3C) in the year
of 1996. The CSS can be applied to HTML documents in different
ways. Why Use CSS? CSS is used to define styles for your web
pages, including the design, layout and variations in display for
different devices and screen sizes.

4.3 Javascript:
JavaScript is a scripting or a programming language that allows you
to implement complex features on web pages – every time a web
page does more than just sit there and display static information for
you to look – displaying timely content updates, interactive maps,
animated 2D/3D graphics, scrolling video jukeboxes, etc. – you can
bet that JavaScript is probably involved. It is the third layer of the
layer cake of standard web technology, two of which (HTML and

24
CSS) we have covered in much more details in other parts of the
Learning Areas.

25
 CHAPTER 05
WEBSITE UI IN PROJECT

5.1 HOME:

26
27
5.2 USER EXPERIENCE(UX):

To avoid unnecessary product features , simplifying design

documentation and customer - facing technical public at ,
Incorporating business and marketing goals UX design is must .

Cases , User experience design ( UXD or UED ) is any aspects of a

user's experience with a given system , including the interface ,
graphics , industrial design , physical interaction , and the manual in
most.

User Experience Design fully encompasses traditional Human -

Computer Interaction ( HCI ) design , and extends it by addressing
all aspects of a product or service as perceived by users .

UX stands for mainly relevant access of usability , accessibility and

HCI . UX defines user experience as a person's perceptions and
responses that result from the use or anticipated use of a product ,
system or service " .

5.3USER GALLERY:

28
29
5.4 USER CHARACTERISTICS FOR THE SYSTEM:
There is only one user at a time in this software and the user
interacts with the game ( system ) in different manner . So , Gamer
is the only one who communicates with the system through playing
the game . And this gamer can be any person . The primary
requirement is that , the gamer must read the playing procedure
provided by us ( developers ) .

30
 CHAPTER 06
TESTING

Once source code has been generated, website must be tested to

uncover as many errors as possible before booking to the client.
Which is very important to work the system successfully and
achieve high quality of website.

Testing includes designing a series of test cases that have a high

likelihood of finding errors by applying website-testing techniques.

31
Website testing is a critical component of the software engineering
process. It is an element of software quality assurance (SQA).

System testing makes logical assumptions that if all the parts of

the system are correct, the goal will be successfully achieved. The
system should be checked logically. Validations and cross checks
should be there. Avoid duplications of records that cause
redundancy of data.

32
CHAPTER 07
FUTURE WORK

33
Scope :-
The Scope of this project is very broad in terms of gaining
knowledge and sharing knowledge among world .
Few points are :-
● Can be used anywhere any time as it is a web based
application .
● This static frontend website will be used in educational
institutions as well as in corporate world .

CHAPTER 08
REFERENCES

34
● HTML
W3 Schools

● STACK OVERFLOW
Stack Overflow

● JAVASCRIPT
w3 schools

● CSS
w3Schools

35
 CHAPTER 09
STUDENT PROFILE

36
BASIC PROFILE OF STUDENT

Name: KRISHNA KUMAR

University Roll No: 18020004054

Class Roll No: CSE-18/054
Branch: Computer Science and Engineering
Email id: [email protected]
Phone No.: +91 7091718403
SKILLS:
● Specific Language: JavaScript
● Operating System: Windows
● Programming Languages: C, C++, Java, Python, javaScript,
React-js.
● Tools & Technologies: Html, CSS, Bootstrap, JavaScript,
Android Studio, Visual Studio, Visual Studio Code, jQuery etc..

GITHUB LINK:
My Github

LINKEDIN PROFILE:
My Linkedin

37
38
39
40
41
42
43