An

Industrial Training Report

On
FRONT-END WEB DEVELOPMENT
At
Blue Space Pvt. Ltd.
Submitted in partial fulfillment of the
requirements for the award of the degree of
Bachelor of Technology
In
COMPUTER SCIENCE ENGINEERING

(Session 2023-2024)
Submitted to – Submitted by-
Mr. Shirish Mohan Dubey Vandita Goyal
Faculty Coordinator (Industrial Training) PCE21CS178

DEPARTMENT OF COMPUTER SCIENCE ENGINEERING

POORNIMA COLLEGE OF ENGINEERING, JAIPUR
RAJASTHAN TECHNICAL UNIVERSITY, KOTA
SEPTEMBER, 2023
 DECLARATION

I hereby declare that the work which is being presented in the Industrial Training report titled
FRONT-END WEB DEVELOPMENT in partial fulfillment for the award of the Degreeof
Bachelor of Technology in Computer Science Engineering and submitted to the Department
of Computer Science, Poornima College of Engineering, Jaipur, is an authenticrecord of my
own work carried out at Blue Space Pvt. Ltd. during the session 2023-24 (Even Semester).
I have not submitted the matter presented in this report anywhere for the award of any other
Degree.

Signature Of the Student with Name & Reg.No.

Vandita Goyal
PCE21CS178

Place: JAIPUR
Date: 27 November, 2023

Enclosed: Training Certificate from Company

 DEPARTMENT OF COMPUTER SCIENCE
Date: 27-09-2023

CERTIFICATE

This is to certify that Industrial Training report titled Front-end Web Development hasbeen
submitted by VANDITA GOAYL (PCE21CS178) in partial fulfillment for the award of the
Degree of Bachelor of Technology in Computer Science during the session 2023-24, Even
Semester. The industrial training work is found satisfactory and approved for submission.

Mr. Shirish Mohan Dubey Dr. Nikita Jain

(Faculty Coordinators- Industrial Training Seminar) (Associate Professor and Head, CSE)

Date:
Place: Jaipur
 ACKNOWLEDGEMENT

I would like to convey my profound sense of reverence and admiration to my supervisor

Mr. Harshit Meena, Web Developer for her intense concern, attention, pricelessdirection,
guidance, and encouragement throughout this internship.

I extend my heartiest gratitude to Mr. Shirish Mohan Dubey, Coordinator-Industrial Training,

who extended their cooperation to steer the topic towards its successful completion.

My special heartfelt gratitude goes to Dr. Nikita Jain, Associate Professor and Head,
Department of Computer Engineering, Poornima College of Engineering, and Mr. Manish
Dubey, Assistant Professor and Deputy Head, Department of Computer Engineering for
unvarying support, guidance, and motivation during the course of this research.

I am grateful to Dr. Mahesh Bundele, Director, Poornima College of Engineering for his
helping attitude with a keen interest in completing this training work in time.

I would like to express my deep sense of gratitude towards management of Poornima College
of Engineering including Dr. S. M. Seth, Chairman Emeritus, Poornima Group and former
Director NIH, Roorkee, Shri Shashikant Singhi, Chairman, Poornima Group, Mr. M. K. M.
Shah, Director Admin & Finance, Poornima Group and Ar. Rahul Singhi, Director Poornima
Group for establishment of institute and providing facilities my studies.

I am deeply thankful to my parents and all other family members for their blessings and
inspiration. At last, but not least I would like to give special thanks to God who enabled me to
complete my training work on time.

.................................
(Signature of Student)

Name of Student:- Vandita Goyal

Registration No: - PCE21CS178
Date:....................
 PREFACE

The main objective of any computer science student is to get as much of practical knowledge
as possible. Being an able to have a practical knowledge by developing a project is a lifetime
experience. As practical knowledge is as important as theoretical knowledge we are thankful
of having a project. Through the development of the project we had a great experience of
various strategies that can be applied in development of project. This project is the stepping
stone for our carrier. We are pleased to present this project. Proper care has been taken while
organizing the project so that it is to comprehend.
 TABLE OF CONTENTS

CHAPTER PARTICULARS PAGE NO.

NO.
Title Page I

Candidate’s Declaration II

Certificate of the Trainings undergone III

Certificate by the Department IV

Acknowledgment V

Preface VI

Table of content VII

Abstract 10

1 Introduction 11
1.1 Objective
1.2 Motivation
1.3 Structure of Report
2 Technical Training Platform 3
2.1 Introduction to the company
2.2 About the internship
2.3 Technical Profile of the Instructor
3 Basics of Front-End web Design 13
3.1 HTML
3.2 CSS
3.3 JAVASCRIPT
4 Project Development 25
4.1 Introduction
4.2 Project Description
4.3 Project analysis and design
4.4 Code Used
4.5 Project
5 Conclusion 30
5.1 Introduction
5.2 Future Scope
6 References 32
7 Plag Report 33
 Abstract
This report documents the experiences and insights gained during a web development
internship, providing a comprehensive overview of the skills acquired and projects
undertaken. The internship, spanning a specified period, exposed the intern to the real-world
applications of web development technologies, tools, and practices. It outlines the journey
from a novice web developer to a more proficient and knowledgeable individual.

The report delves into the practical aspects of web development, covering topics such as
front-end web development, responsive design, programming languages, and
frameworks. It also discusses hands-on experience with version control systems and
collaborative development within a team setting. Furthermore, it highlights the challenges
faced and the problem-solving skills developed throughout the internship.

The report underscores the importance of web development in today's digital landscape and
how this experience has equipped the intern with the expertise to create dynamic, user-centric
web applications. It reflects on the impact of the internship on the intern's personal and
professional growth and concludes with key takeaways and future goals in the field of web
development.

This report serves as a valuable resource for individuals seeking insights into the practical
aspects of web development through the lens of an internship, offering lessons learned and
recommendations for those embarking on a similar journey.
 CHAPTER 1: INTRODUCTION

1.1 Objectives Learning Objectives/Internship Objectives

 Internships 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 in order to receive real world experience and develop their skills.
 An objective for this position should emphasize the skills you already possess in the area and
your interest in learning more
 Internships are utilized in a number of different career fields, including architecture,
engineering, healthcare, economics, advertising and many more.
 Some internship 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 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.2 Motivation

For internship to induce the sensible expertise within the field of technology and Engineering.
It's extraordinarily vital that knowing about hypothetical information and actualize inside the
reasonable field to broaden our gifted ability in building work advertise. The motivation of this
internship actually came from the intention of learning more about the job sectors and the work
environment of IT farms. A desktop base system of creating websites is easy to learn. Before joining
the internship, I knew that I am in a primary stage and beginner level in learning web development, my
first task is to learn and create and be creative. The learning curve of a web development is such
interesting and charming. It is very simple to build a project fully by HTML, CSS and js when you
know what you are doing.

1.3 Structure of Report

This part Deals with the details of introduction of web development. It is a overview of the parts
included in the full report. .
• Chapter 1 This chapter is dedicated to describe the course I am doing the internship in. The
motto and the goal of the course is stated in this chapter.
• Chapter 2 This chapter gives all the information about the Internship.
• Chapter 3 This chapter describes frontend concepts learnt during the internship.
• Chapter 4 This chapter describes the projects implemented during the internship.
• Chapter 5 This chapter summarises the learnings during the 2 month internship.
 Chapter 2
About the Internship

2.1 Introduction to the Company

BLUE SPACE TECHNOLOGY PVT. LTD. is a Private Company, Which was incorporated on
15-May-2012 . It is classified as a Non-government company. Its main activity involves Software
publishing, consultancy and supply [Software publishing includes production, supply and
documentation of ready-made software, operating systems software, business & other applications
software, computer games software for all platforms. Consultancy includes providing the best
solution in the form of custom software after analyzing the user’s needs and problems. Custom
software also includes made-to-order software based on orders from specific users.

Company size: 11-50 employees

Company website: http://bluespacetech.com/

2.2 About the Internship

 Training Location: Blue Space Technologies Pvt. Ltd.

 Training Duration: 45 days

 Training Start Date: 1 August 2023

 Training End Date: 14 September 2023

 Training Hours: 9:00AM-5:00PM (6 HRS)

 Conclusion

In the present era of Web development, a good page design is essential. A bad design will lead to the
loss of visitors which can lead to a loss of business. In general, a good page layout satisfys the basic
elements of a good page design. This includes colour contrast, text organization, and font selection,
style of a page, page size, graphics used, consistency, etc. In order to create a well-designed page for
a specific audience. The developer needs to organized and analyse the users' statistics and the
background of the users. Although it can be hard to come up with a design that is well suited to all of
the users, there will be a design that is appropriate for most of the audience. The better the page
design, the more hits a page will get. That implies an increase in accessibility and a possible increase
in business.
2.3 Technical profile of the instructor:
 CHAPTER 3
BASICS OF FRONT-END WEB DESIGN

Everything you see on a website, like buttons, links, animations, and more, were created by a front end web
developer. It is the front end developer's job to take the vision and design concept from the client and implement
it through code.
Requirements for Frontend Development :
 HTML : HTML stands for Hyper Text Markup Language. It is used to design the frontend portion of
web pages using markup language. It acts as a skeleton for a website since it is used to make the structure
of a website.
 CSS : Cascading Style Sheets fondly referred to as CSS is a simply designed language intended to
simplify the process of making web pages presentable. It is used to style our website.
 Javascript : JavaScript is a scripting language used to provide a dynamic behavior to our website.
 CHAPTER 3.1
HTML

3.1.1) Introduction
• HTML stands for Hyper Text Markup Language
• HTML is the standard markup language for creating Web pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
Example : <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
• 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

3.1.2) HTML Styles

The HTML style attribute is used to add styles to an element, such as color, font, size, and more.
• Background Color - The CSS background-color property defines the background color for an HTML element.
• Text Color - The CSS color property defines the text color for an HTML element.
• Text Size - The CSS font-size property defines the text size for an HTML element
• Text Alignment - The CSS text-align property defines the horizontal text alignment for an HTML element.

3.1.3) Features of HTML

• It is easy to learn and easy to use.
• It is platform-independent.
• Images, videos, and audio can be added to a web page.
• Hypertext can be added to the text.
• It is a markup language.

HTML5 Tags and Structural Elements –

• <!--...--> Defines a comment
• <!DOCTYPE> Defines the document type
• <a> Defines a hyperlink
• <article> Defines an article
• <aside> Defines content aside from the page content
• <audio> Defines embedded sound content
• <b> Defines bold text
• <body> Defines the document's body
• <br> Defines a single line break
• <button> Defines a clickable button
• <div> Defines a section in a document
• <dl> Defines a description list
• <dt> Defines a term/name in a description list
• <em> Defines emphasized text
• <footer> Defines a footer for a document or section
• <form> Defines an HTML form for user input
• <h1> to <h6> Defines HTML headings
• <head> Contains metadata/information for the document
• <header> Defines a header for a document or section
• <hr> Defines a thematic change in the content
• <html> Defines the root of an HTML document
• <i> Defines a part of text in an alternate voice or mood
• <img> Defines an image
 • <input> Defines an input control
• <label> Defines a label for an <input> element
• <li> Defines a list item
• <nav> Defines navigation links
• <p> Defines a paragraph
• <param> Defines a parameter for an object
• <samp> Defines sample output from a computer program
• <script> Defines a client-side script
• <section> Defines a section in a document
• <select> Defines a drop-down list
• <small> Defines smaller text
• <span> Defines a section in a document
• <strong> Defines important text
• <style> Defines style information for a document
• <sub> Defines subscripted text
• <table> Defines a table
• <tbody> Groups the body content in a table
• <td> Defines a cell in a table
• <textarea> Defines a multiline input control (text area)
• <th> Defines a header cell in a table
• <thead> Groups the header content in a table
• <time> Defines a specific time (or datetime)
• <title> Defines a title for the document
• <tr> Defines a row in a table
• <ul> Defines an unordered list
HTML Layout Elements
HTML has several semantic elements that define the different parts of a web page
• <header> Defines a header for a document or a section
• <nav> Defines a set of navigation links
• <section> Defines a section in a document
• <article> Defines an independent, self-contained content
• <aside> Defines content aside from the content (like a sidebar)
• <footer> Defines a footer for a document or a section
• <details> Defines additional details that the user can open and close on demand
 • <summary> Defines a heading for the <details> element

HTML5 Input Element: Attributes for the Input Tag

Additional HTML Elements –
 CHAPTER 3.2
CSS
3.2.1 Introduction

CSS is the language for describing the presentation of Web pages, including colours, layout, and fonts. It
allows one to adapt the presentation to different types of devices, such as large screens, small screens, or
printers. CSS is independent of HTML and can be used with any XML-based mark up language. The
separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor
pages to different environments. This is referred to as the separation of structure (or: content) from
presentation.

There are three types of CSS which are given below:

• Inline CSS
• Internal or Embedded CSS
• External CSS

3.2.2 Attaching a CSS file

After creating and saving the CSS file, we just need to link the CSS and HTML files together so the browser
knows where to look for the CSS file.
In the head of the HTML document ,add link tag
Format:
<head>
⋮
<link href=”css/main.css” rel=”stylesheet”
</head>

The link element is used to associate different types of documents to your HTML, primarily CSS, but also
blog feeds, help documents, licenses, etc.
• href - this attribute is used to point to the location of the CSS file.
• rel - this attribute is used to define this item as a stylesheet

Some Basic CSS properties –

• CSS Colors
• CSS Backgrounds
• CSS Borders
• CSS Margins
• CSS Padding
• CSS Height/Width
• CSS Box Model
• CSS Outline
• CSS Text
• CSS Fonts
• CSS Icons
• CSS Links
• CSS Lists
• CSS Tables
• CSS Display
• CSS Max-width
• CSS Position
• CSS Z-index
• CSS Overflow
• CSS Float
• CSS Inline-block
• CSS Align
• CSS Combinators
• CSS Dropdowns
• CSS Forms
• CSS Website Layout
• CSS Units
• CSS Backgrounds
• CSS Box Sizing
• CSS Media Queries
 CHAPTER 3.3
JAVASCRIPT

3.3.1 Introduction
JavaScript is the world's most popular programming language. JavaScript is the programming language of the
Web. JavaScript is a light-weight object-oriented programming language which is used by several websites
for scripting the webpages. It is an interpreted, full-fledged programming language that enables
dynamic interactivity on websites when applied to an HTML document. JavaScript is easy to learn.It is
also known as scripting language for web pages

How to add javascript to your HTML file:

• Internal JS - We can add JavaScript directly to our HTML file by writing the code inside the <script>
tag. The <script> tag can either be placed inside the <head> or the <body> tag according to the requirement.
• External JS - We can write JavaScript code in other file having an extension .js and then link this file inside
the <head> tag of the HTML file in which we want to add this code.

Syntax to link javascript file to html : <script src="main.js"></script>

Syntax –
<script>
// JavaScript Code
</script>

3.3.2 Variables and Control Statements

A JavaScript variable is simply a name of storage location. There are two types of variables in JavaScript :
local variable and global variable.

There are some rules while declaring a JavaScript variable (also known as identifiers).
1. Name must start with a letter (a to z or A to Z), underscore( _ ), or dollar( $ ) sign.
2. After first letter we can use digits (0 to 9), for example value1.
3. JavaScript variables are case sensitive, for example x and X are different variables.
Correct js variables :
1. var x = 10;
2. var _value="sonoo";
Incorrect JavaScript variables:
1. var 123=30;
2. var *aa=320;

• declaring single variable

var name;

• declaring multiple variables

var name, title, num;

• initializing variables
var name = "Harshita";
name = "Rakesh";

If-else Statement in JavaScript - The JavaScript if-else statement is used to execute the code whether condition
is true or false. There are three forms of if statement in JavaScript
3.3.3 Conditional statements
1. If Statement
2. If else statement
3. if else if statement

Syntax:
if (condition)
statement;
else if (condition)
statement;
.
.
else
statement;

3.3.4 Functions in JavaScript

Functions are one of the fundamental building blocks in JavaScript. A function in JavaScript is similar to a
procedure—a set of statements that performs a task or calculates a value, but for a procedure to qualify as a
function, it should take some input and return an output where there is some obvious relationship between the
input and the output. To use a function, you must define it somewhere in the scope from which you wish to
call it.

Function Definition -
Before, using a user-defined function in JavaScript we have to create one. We can use the above syntax to
create a function in JavaScript. A function definition is sometimes also termed as function declaration or
function statement.

Rules for creating a function in JavaScript -

Function names can contain letters, digits, underscores, and dollar signs (same rules as variables).
The parentheses may include parameter names separated by commas: (parameter1, parameter2, ...) .

JavaScript Function Syntax -

function name(parameter1, parameter2, parameter3)
{
// code to be executed
}

Calling Functions -
After defining a function, the next step is to call them to make use of the function. The JavaScript Function
call() method calls a function with a given this value and arguments provided individually. The call()
method calls a function by passing this and specified values as arguments.
Syntax :
functionName( Value1, Value2, ..);

Return Statement –
The return statement ends function execution and specifies a value to be returned to the function caller.When a
return statement is used in a function body, the execution of the function is stopped. If specified, a given value
is returned to the function caller. For example, the following function returns the square of its argument, x,
where x is a number.

Onclick event –
The onclick event generally occurs when the user clicks on an element. It allows the programmer to execute
a JavaScript's function when an element gets clicked. This event can be used for validating a form, warning
messages and many more.

Document.querySelector -
When a return statement is used in a function body, the execution of the function is stopped. If specified, a
given value is returned to the function caller. For example, the following function returns the square of its
argument, x, where x is a number.The querySelector() method returns the first element that matches a
CSS selector. To return all matches (not only the first), use the querySelectorAll() instead. Both
querySelector() and querySelectorAll() throw a SYNTAX_ERR exception if the selector(s) is invalid.
Syntax:
document.querySelector(CSS selector)
 CHAPTER 4

PROJECT DEVELOPMENT

4.1 Introduction

A project is an in-depth investigation if a topic worth learning more about. The investigation is usually
undertaken by a small group of students within a class, sometimes by a whole class, and occasionally by an
individual child. The key feature of a project is that it is a research effort deliberately focused on finding
answers to questions about a topic posed either by the children, teacher, or the teacher working with the
children. The goal of a project is to learn more about the topic rather than to seek the right answers to
questions posed by the teacher

4.2 Project Description

What is a Product Landing Page?

A product landing page is a post-click page on a website designed specifically to promote or sell products or
persuade visitors to convert to a product-related offer. In terms of design, it’s similar to a traditional landing
page. It includes conversion-focused elements, such as a compelling headline, convincing copy, social proof,
and more to get visitors to click the CTA button.

The only thing that differentiates a product landing page from a traditional landing page is that companies use
them to sell products only. Visitors land your product landing pages after clicking on a paid ad, by clicking
one of your social media posts, through a link on your email newsletter, or after clicking on organic search
results.

4.3 Project Analysis and Design

Build trust and anticipation

The headline on a product landing page isn’t like the headline on other pages. Since you only arrive on a
product landing page by clicking through an advertisement, this headline has to first match the message of its
referring advertisement.

Translate your product features

When it comes to advertising products, it’s tempting to tout all its new and powerful features. In most cases,
this would be a mistake.

Shows visitors all they need to see

On your product landing page, the right media can make all the difference.

4.4 Code Used

4.5 PROJECT
 CHAPTER 5
CONCLUSION

5.1 Introduction

As we all know, our country is a developing country and it dreams to be a developed country soon. Hence the
government of India has taken many necessary project to fulfilling the concept of digital India. Day by day our
job sector is getting more and more competitive. As a result every other company is searching for experienced
candidates.
Finally, I can claim it's internship that helps me gain experience. Thanks to Matrix computers, I gained so
much more in-depth knowledge of technical skills and personal skills This project helped me gather
theoretical and practical knowledge about HTML4/5, CSS.
Now I am confident and competent in frontends. For those students who are willing to work in web
development, there are huge opportunities available. To give them the scope for online work and development
of website, most private and public organizations employ web designers. With the rapid emergence of the
digital industry, web development professionals ' demand is growing, and in the coming days this has already
availed so many job opportunity for newcomers.
My internship company gave me a good scope to learn and discover my potentials. I am very grateful to
them.. I was fortunate for getting the chance to meet the real life software development environment

5.2 Future Scopes

I gained so much experience from this Internship. If I did not had this experience it would be very hard for me
to find a suitable job. As we know finding work can be a challenge in this competitive world. In my career
opportunity, this internship will support me. And my future scopes will be after a good internship:
• I can work in IT Farm.
• Working as a software engineer is possible.
• Can pursue career in web design
 References

1. Hastie, Friedman, and Tibshirani, The Elements of Statistical Learning, 2001

2. Bishop, Pattern Recognition and Machine Learning, 2006
3. Ripley, Pattern Recognition and Neural Networks, 1996
4. Duda, Hart, and Stork, Pattern Classification, 2nd Ed., 2002
5. Tan, Steinbach, and Kumar, Introduction to Data Mining, Addison-Wesley, 2005.
6. Scholkopf and Smola, Learning with Kernels, 2002
7. https://en.wikipedia.org/wiki/ruby
8. https://www.geeksforgeeks.org/ruby/
9. https://en.wikipedia.org/wiki/ruby_(programming_language)
 PLAG REPORT

Vandita