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

02
 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)

03
 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 the 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 their abilities.

KRISHNA KUMAR
(18020004054)

04
 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

Technologies Used 13

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

Chapter 06 TESTING 31

Chapter 07 FUTURE SCOPE & LIMITATION 33

Chapter 08 REFERENCES 35

Chapter 09 STUDENT PROFILE 36

07
 Chapter 01

COMPANY PROFILE

COMPANY PROFILE

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.

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.

09
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

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 11
2.2 TECHNOLOGIES USED:

1. Website

a. User

i. JavaScript

ii. Bootstrap

iii. jQuery

2.3 UI using Bootstrap 5 12

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

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:

13
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
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,
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.

15
 Chapter 03

DESIGN

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 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:

16
17
 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.

18
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.
4.2 Cascading Style Sheets(Css)

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
CSS) we have covered in much more details in other parts of the Learning Areas.
21
 CHAPTER 05

WEBSITE UI IN PROJECT

5.1 HOME:

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:
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 ) .

24
 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.
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.

26
 CHAPTER 07

FUTURE WORK

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 .

27
 CHAPTER 08

REFERENCES

● HTML

W3 Schools

● STACK OVERFLOW

Stack Overflow

● JAVASCRIPT

w3 schools

● CSS

w3Schools
 CHAPTER 09

STUDENT PROFILE

BASIC PROFILE OF STUDENT

Name: KRISHNA KUMAR

University Roll No: 18020004054

Class Roll No: CSE-18/054

Branch: Computer Science and Engineering

Email id: kkrishnasharmak@gmail.com

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