An

Industrial Training Report

Submitted
In partial fulfillment of the
Requirements for the award of degree of

Bachelor of Technology
(Computer Science & Engineering)

Supervised By Submitted By
Vikas Kulshreshtha Satish Meena
Coordinator – Industrial Training College ID - 21EEJCS028

Department of Computer Science & Engineering

GOVERNMENT ENGINEERING COLLEGE JHALAWAR
Jhalrapatan, Distt. Jhalawar – 326 023
2024-25

1
2
 Declaration

I, Satish Meena, declare that the Industrial Training has been done by me and the
work presented in this report, is my own. I further confirm that –
● The Industrial Training and the associated work was done wholly or mainly by
me as a part of 7th-Semester Industrial Training in the curriculum of B.TECH
degree programme in Computer Science & Engineering prescribed by the
Rajasthan Technical University, KOTA.
The work contained in this report is original and has been done by me under the
guidance of Instructors from “Wayug Infotech Solution Private Ltd.”.
● The work has not been submitted, in whole or in part, in any previous semester
of my B.TECH degree.
● We have followed the guidelines provided by the university and our supervisor
in writing the report.
● Whenever we have used materials (data, theoretical analysis, and text) from
other sources, we have given due credit to them in the text of the report and
given their details in the References.
● I have acknowledged all main sources of help.

Date: 06 November, 2024 Satish Meena

21EEJCS031

3
 Acknowledgement

I would like to express my sincere gratitude towards my supervisor vikas

kulshreshtha and also to Mr. Vasim Raja from Wayug Infotech Solution Private
Ltd. for their valuable support, training and guidance throughout the training
period. Without their help and support, this practical training work would not
have taken the present shape.
I express my heartfelt appreciation to Wayug Infotech Solution Private Ltd. For
providing me with a valuable opportunity to undergo industrial training.
I would also like to express my sincere gratitude towards the entire team at
Wayug Infotech Solution Private Ltd. for their guidance & suggestions.
Additionally, I acknowledge the support of my friends and family and their
encouragement. This collective effort has significantly contributed to the
successful completion of this endeavor.
Again, I extend my sincere gratitude to all those who contributed to the
realization of this training.

4
 Abstract

This report delves into the fundamental aspects of web development, focusing on
HTML, CSS, JavaScript, and the Angular framework, exploring advanced web page
implementations to elevate the efficiency and aesthetics of web applications. The
foundational trio of HTML, CSS, and JavaScript forms the cornerstone of modern web
development, collectively enabling the creation of dynamic, responsive, and visually
appealing websites. Angular, a robust front-end framework developed by Google,
extends these core technologies by enabling the development of complex, scalable,
and maintainable single-page applications (SPAs) with a modular architecture. The
report begins by elucidating the role of HTML (Hypertext Markup Language) as the
structural foundation of web pages. Moving forward, the discussion shifts to CSS
(Cascading Style Sheets), highlighting its significance in styling and layout design.
JavaScript is then explored in-depth, with a focus on its transformative role in client-
side scripting, particularly in dynamically shaping content and manipulating the
Document Object Model (DOM). By harnessing JavaScript and Angular’s powerful
features like dependency injection, two-way data binding, and component-based
architecture, developers can enhance user interactions, create responsive interfaces,
and seamlessly modify web content, ultimately contributing to a more engaging and
interactive web experience. The report further emphasizes Angular’s role in
streamlining development processes by facilitating efficient code organization,
reusable components, and seamless integration with backend services through APIs,
fostering a foundation for robust and scalable web applications. Through
comprehensive exploration and practical insights, this report serves as a valuable
resource for both novice and experienced web developers, offering a holistic
understanding of HTML, CSS, JavaScript, and Angular to foster proficiency and
innovation in modern web development.

5
Contents

1 About the Company/Institute 8

1.1 Company/ Institute Profile...............................................................8
1.2 Overview of the Company/ Institute................................................9

2 Web Development 10
2.1 HTML..............................................................................................12
2.2 CSS.................................................................................................14
2.3 JavaScript.......................................................................................16
2.4 Angular ………………………………………………………………………………………..18

3 Project Work 20
3.1 Todo List......................................................................................20
3.2 Personal Portfolio.......................................................................21
3.3 Ecommerce Website-1...................................................................22
3.4 Ecommerce Website-2..............................................................24
3.5 Jira clone………………………………………………………………………25

4 Conclusion and Future Work 26

5 References 27

6
List of Figures

2.1 The Relationship Between HTML, CSS and JavaScript.........11

2.2 HTML Syntax........................................................................12
2.3 CSS Syntax............................................................................14

3.1Todo List.......................................................................................20
3.2Personal Portfolio........................................................................21
3.3 Ecommerce Website-1....................................................................22
3.4 Ecommerce Website-2...............................................................24
3.5 Jira clone………………………………………………………………………25

7
Chapter 1
About the Company/Institute

1.1 Company/ Institute Profile

● Company/ Institute Name : Wayug Infotech Solution Pvt Ltd.

● Address : New delhi.

● Website of the Company/ Institute : https:wayuug.com

8
1.2 Overview of the Company/ Institute

Wayug Infotech Solution Private Ltd is an IT solutions

provider based in India, specializing in a range of digital
services designed to enhance business growth and security.
Their offerings include cybersecurity, protecting data and
networks from threats; data analytics, turning complex
data into actionable insights; web development, building
and maintaining websites; app development for mobile
platforms; and SEO optimization, improving website
visibility on search engines. With a focus on professional
support, customized solutions, and competitive pricing,
Wayug Infotech Solution Private Ltd aims to support
businesses in achieving digital success.

9
Chapter 2
Web Development

Web development, also known as website development, refers to the tasks

associated with creating, building, and maintaining websites and web applications
that run online in a browser. It may, however, also include web design, web
programming, and database management.
The basic tools involved in web development are programming languages called
HTML (Hypertext Markup Language), CSS (Cascading Style Sheets), and JavaScript.
There are two broad divisions of web development: front-end development (also
called client-side development) and back-end development (also called server-
side development).
Front-End Web development focuses on translating website design and visual ideas
into code. Front-end web development takes the design ideas created by others
on web development teams and programmers them into reality, acting as a
bridge between design and technology. Front-end development will usually
require a solid understanding of programming languages, including HTML, CSS,
and JavaScript, as well as frameworks like React, Bootstrap, Backbone, AngularJS,
and Ember JS.
Back-end development controls what goes on behind the scenes of a web
application. A back-end often uses a database to generate the front-end. Back-
end scripts are written in many different coding languages and frameworks, such
as PHP, Java, Python, etc.

10
 :

Figure 2.1 The Relationship Between HTML, CSS and JavaScript

In this report, we will discuss only front-end development.

The most common programming languages involved in web development are:
• HTML (Hypertext Markup Language)
• CSS (Cascading Style Sheets)
• JavaScript
JavaScript, CSS, and HTML work together to make up the user-facing elements of
most websites and online applications.
Let’s delve into the details.

11
2.1 HTML

HTML stands for HyperText Markup Language. It is used to design the web pages.
With the help of HTML, you can create a complete website structure. HTML is a
combination of hypertext and markup languages. Hypertext defines the link
between the web pages, and markup language defines the text document within
the tag that defines the structure of web pages.
HTML is used to create the structure of web pages and websites that are
displayed on the Internet. HTML basically contains tags and attributes that are
used to design web pages.

HTML Syntax
The basic structure of an HTML page is laid out below. It contains the essential
building-block elements (i.e. doctype declaration, HTML, head, title, and body
elements) upon which all web pages are created.

Figure 2.2 HTML Syntax

12
  HTML Tags: Tags are the starting and ending parts of an HTML element.
They begin with < symbol and end with > symbol. Whatever written inside <
and > are called tags.
 HTML elements: Elements enclose the contents in between the tags. They
consist of some kind of structure or expression. It generally consists of a
start tag, content and an end tag.
 HTML Attributes: It is used to define the character of an HTML element. It is
always placed in the opening tag of an element. It generally provides
additional styling (attribute) to the element.

HTML Basic Tags

 <DOCTYPE! Html> – A doctype or document type declaration is an
instruction that tells the web browser about the markup language in which
the current page is written. It is not an element or tag. The doctype
declaration is not case-sensitive.
 <html> – This tag is used to define the root element of an HTML document.
This tag tells the browser that it is an HTML document. It is the second
outer container element that contains all other elements within it.
 <head> – This tag is used to define the head portion of the HTML document
that contains information related to the document. Elements within the
head tag are not visible on the front-end of a webpage.
 <body> – The body tag is used to enclose all the visible content of a
webpage. In other words, the body content is what the browser will show
on the front end.
 <title> — the <title> element. This sets the title of the page, which is the
title that appears in the browser tab the page is loaded in. It is also used to
describe the page when we bookmark or favorite it.
 Some more tags used in HTML include <div>, <p>, <h1> to <h6>, <form>,
<ol>, <u>, <li>, <img>, <a>, <small>, <em>, <b>, <i>, <code>, <input>, and
<button>, etc.

13
2.2 CSS

CSS stands for Cascading Style Sheets. It is the language for describing the
presentation of Web pages, including colors, layout, and fonts, thus making our
web pages presentable to the users.
CSS is designed to make style sheets for the web. It describes how a webpage
should look: it prescribes colors, fonts, spacing, and much more. In short, we can
make our website look however we want. CSS lets developers and designers
define how it behaves, including how elements are positioned in the browser.

CSS Syntax
Selector { Property: value; }

Figure 2.3 CSS Syntax

Selector: A selector in CSS is used to target and select specific HTML elements to
apply styles to.
Declaration: A declaration in CSS is a combination of a property and its
corresponding value.

CSS Color
There are different coloring schemes in CSS. In CSS, a color can be specified by using

14
a predefined color name: tomato, orange, dodger blue, medium sea green, gray,
slate blue, violet and light gray, etc.

CSS Background
There are different ways in which CSS can have an effect on HTML elements. A few
of them are as follows:
 Color – used to set the color of the background.
 Repeat – used to determine if the image has to repeat or not, if it is
repeating then how it should do that.
 Image – used to set an image as the background.
 Position – used to determine the position of the image.
 Attachment – It basically helps in controlling the mechanism of scrolling.

CSS Border
Helps in setting up the border for HTML elements. There are 4 properties that can
help in setting up of border:
 Width – sets the width of the border.
 Style – sets the style of border; e.g.: solid, dashed etc.
 Color – sets the color of the border.
 Radius – determines the roundness of the border.

CSS BoxModel
Every element in CSS can be represented using the BoxModel. It allows us to add a
border and define space between the content. It consists of 4 edges:
 Content edge – It comprises of the actual content.
 Padding edge – It lies in between content and border edge.
 Border edge – Padding is followed by the border edge.
 Margin edge – It is an outside border and controls the margin of the element.

15
2.3 JavaScript

JavaScript (JS) is a cross-platform, object-oriented programming language used to

make web pages interactive. It allows developers to create dynamically updating
content, use animations, pop-up menus, clickable buttons, control multimedia,
etc.
Some fundamental concepts in JavaScript are:
● Variables
Variables store and manipulate data values. Use var, let, or const to declare.
They hold numbers, strings, or objects.
● Data Types
JavaScript has primitive data types like numbers, null, undefined, strings, boolean,
and complex types like objects, arrays.
● Operators
Operators perform actions on variables and values. Common operators include
arithmetic, comparisons, strings, and logic operators.
● Conditional Statements
Conditional statements, if, else, else if statements control code execution based
on conditions and perform different actions based on different conditions.
● Loops
Loops, like “for” and “while,” repetitively execute code, iterating through data for
efficient programming tasks.
● Functions
Functions in JavaScript are reusable blocks of code. They take input, perform
tasks, and return results.

16
● Arrays
Arrays in JavaScript store multiple values. They are ordered, indexed, and
versatile, supporting various data types.
● Objects
In JavaScript, an object is a data structure with key-value pairs. It represents
entities and allows for organizing and accessing data efficiently.
● Events
JavaScript events occur when users interact with a webpage. Common events
include clicks, key presses, and page loads, triggering corresponding functions for
dynamic, responsive behavior.
● DOM
The Document Object Model (DOM) in JavaScript represents a webpage’s
structure, allowing dynamic manipulation. It’s a tree-like structure of elements,
enabling interactive and responsive web development.

2.4 Angular

Angular is a powerful front-end framework developed by Google, first released in

2010 as AngularJS. It underwent a complete rewrite and was re-released as Angular
(often referred to as Angular 2) in 2016. This modern version introduced significant
enhancements, including a component-based architecture that promotes reusable UI
components and improved performance.

17
Feture of Angular

1) Component-Based Architecture: Angular’s modular architecture organizes

applications into reusable components, enhancing code maintainability,
scalability, and collaboration in large projects.

2) Two-Way Data Binding: Angular synchronizes data between the model and the
view in real-time, simplifying user interface updates and reducing manual code.

3) Dependency Injection: Angular’s dependency injection improves testability and

modularity, making it easier to manage and share services across components.

4) Reactive Forms and Validation: Angular provides powerful tools for building
dynamic forms with advanced validation, ensuring data integrity and enhancing
user experience.
5) Routing and Navigation: The Angular Router facilitates the development of
single-page applications (SPAs), allowing smooth page transitions without full
reloads.
6) Comprehensive CLI: Angular’s CLI simplifies project setup, component
generation, and optimization, boosting productivity and enforcing project
structure consistency.

7) RxJS Integration: Built-in support for RxJS enables reactive programming in

Angular, making it efficient to handle asynchronous data streams and complex
data flows.

8) Efficient State Management: Angular supports state management libraries like

NgRx, making it easier to manage the application state in complex applications.

9) AOT and Ivy Compiler: Agular’s Ahead-of-Time (AOT) compilation and Ivy
Renderer optimize performance, reducing bundle size and improving load times.

18
10) Angular Material: A built-in library with pre-designed UI components, Angular
Material accelerates UI design, promoting best practices in responsive, accessible
design.
11) Cross-Platform Development: Angular facilitates cross-platform compatibility,
enabling code reuse and consistent performance across mobile and desktop.

Additionally, Angular provides a comprehensive set of tools and libraries for building
applications, including Angular CLI for efficient project management and Angular
Material for UI design. The framework is also compatible with RxJS, enabling
reactive programming and efficient handling of asynchronous data streams.

Overall, Angular's robust feature set and strong community support make it a popular
choice for developers looking to create dynamic, scalable, and maintainable web
applications.

19
Chapter 3
Project Work

Personal Portfolio

Figure 3.1 Personal Portfolio

20
Creating a personal portfolio using Angular allows you to showcase your skills and
projects in a dynamic and interactive manner. Angular services can be employed to
fetch data from APIs, such as your project details, testimonials, or blog posts. By
leveraging Angular’s component-based architecture, each section of your portfolio
can be developed as a separate component, ensuring modularity and maintainability.
This approach not only enhances the user experience with smooth navigation but
also allows for easy updates and scalability as your portfolio evolves.

21
3.1 Ecommerce -website-1

Figure 3.3 Ecommerce-website-1

An e-commerce website built with Angular can effectively interact with an API to
manage products. By leveraging HTTP services, the application can retrieve a list
of products, allowing users to view details dynamically. Users can add new
products via input forms, update existing product information, and delete
products as necessary. This integration enhances user experience by providing
real-time updates and maintaining an organized interface. The use of Angular’s
component-based architecture ensures that each functionality remains modular
and maintainable, leading to a scalable e-commerce solution..

22
3.2 Ecommerce -website-2

23
 Figure Ecommerce-webssite-2
An e-commerce website developed using Angular can effectively manage
products with JSON data. It allows for displaying a list of products fetched from a
JSON API, enhancing user interaction. Features include adding new products
through forms that validate user input, updating existing product details, and
deleting products as needed. Angular’s component-based architecture ensures that
these functionalities are encapsulated within reusable components, making the
codebase organized and maintainable. Additionally, services can be implemented to
handle HTTP requests for CRUD operations, providing a seamless user experience
while managing product data dynamically. This structure supports a responsive and
efficient e-commerce application.

24
Chapter 4
Conclusion and Future Work

In conclusion, this report highlights the critical importance of user-centric web

development, where responsive interfaces, cross-browser compatibility, and
enhanced security create a seamless and secure online experience. The integration of
Angular plays a pivotal role, with its component-based architecture, two-way data
binding, and support for single-page applications (SPAs), which collectively empower
developers to build scalable, interactive, and efficient applications. Looking ahead,
advancing in areas such as AI integration, fortified security practices, and adherence
to evolving web standards will be essential to maintaining a dynamic and user-
focused development approach

25
References

[1] www.geeksforgeeks.org
[2] www.brainstation.io
[3] https://www.wikipedia.org/
[4] https://www.w3schools.com
[5] https://www.javatpoint.com/

26