FRONT-END WEB DEVELOPMENT

Practical Training Report

Submitted in partial fulfillment for the award of degree of
Bachelor of Technology
in
Department of Computer Science & Engineering

Submitted to: Submitted By:

Pawan Sen Ajay Yadav
HOD 21EAYCS008
Department of Computer Science VII Sem/IV Year

Department of Computer Science & Engineering

University Department,
Rajasthan Technical University, Kota
(2024-2025)
CERTIFICATE
 lOMoAR cPSD| 50297005

ACKNOWLEDGEMENT

I’ve got this golden opportunity to express my kind gratitude and sincere thanks to my
Head
of Department of “CSE” for their kind support and necessary counselling in the preparation of
this report. I ’m also indebted to each person responsible for the making up of this project
directly or indirectly.

I must also acknowledge or deep debt of gratitude each one of my colleagues who led this
project come out in the way it is. It’s my hard work and untiring sincere efforts and mutual
cooperation to bring out the project work. Last but not the least, I would like to thank my
parents for their sound counselling and cheerful support. They have always inspired us and
kept our spirit up.

AjayYadav
 lOMoAR cPSD| 50297005

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.
 lOMoAR cPSD| 50297005

CONTENTS

...........................................................
CHAPTER 1: INTRODUCTION ABOUT THE COURSE 7-8

1.1 Objectives ..................................................................................................................................... 7

1.2 Goals ............................................................................................................................................. 7

1.3 Motivation .................................................................................................................................... 8

1.4 Layout of Report ........................................................................................................................... 8

................................................................................
CHAPTER 2: Basics of Front-End Web Design 9

....................................................................................................................
CHAPTER 3: HTML 10-15
3.1 Introduction .................................................................................................................................... 10
3.2 HTML styles ................................................................................................................................... 11
3.3 Features of HTML .......................................................................................................................... 11
.........................................................................................................................
CHAPTER 4: CSS 16-18
4.1 Introduction .................................................................................................................................... 16
4.2 Attaching a css file ......................................................................................................................... 16
.......................................................................................................
CHAPTER 5: JAVASCRIPT 19-22
5.1 Introduction .................................................................................................................................... 19
5.2 Variables and control statements .................................................................................................... 19
5.3 Conditional statements ................................................................................................................... 21
5.4 Functions in javascript .................................................................................................................... 21
..............................................................................................................
CHAPTER 6: PROJECT 23-24
...........................................................................................................
CHAPTER 7: CONCLUSION 25
REFERENCES....................................................................................................................................
26
 lOMoAR cPSD| 50297005

List of Figures
Figure Caption Page
5.1 If else statement 20

List of Tables
Table Caption Page
3.1 HTML input elements 13-14

3.2 Additional HTML elements 15

 lOMoAR cPSD| 50297005

CHAPTER 1: INTRODUCTION ABOUT THE COURSE

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.
 lOMoAR cPSD| 50297005

1.3 About the company

BBR is an emerging start-up Company providing innovative products to increase the

productivity , safety and quality of life based on latest technologies like- Embedded
Robotics , AI and IoT. The products are mainly developed for farmers to solve lethal
and unsolved problems due to traditional equipments and technologies but we have
also a range of hardware and software both type of products for industries and home
appliance to replace traditional inefficient and risky system to increase the
productivity and safety.

1.4 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 describes frontend concepts learnt during the internship.
• Chapter 3
This chapter describes the projects implemented during the internship.
• Chapter 4
This chapter summarises the learnings during the 2 month internship.
 lOMoAR cPSD| 50297005

CHAPTER 2: 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.
 lOMoAR cPSD| 50297005

CHAPTER 3: HTML

HTML:

3.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.
 lOMoAR cPSD| 50297005

• The <p> element defines a paragraph

3.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.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
 lOMoAR cPSD| 50297005

• <dir> Not supported in HTML5. Use <ul> instead.

• <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
• <frame> Not supported in HTML5.
• <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)
 lOMoAR cPSD| 50297005

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

button A push button with no default behavior displaying the value of the value
attribute, empty by default.

checkbox A check box allowing single values to be selected/deselected.

color A control for specifying a color; opening a color picker when active in
supporting browsers.

date A control for entering a date (year, month, and day, with no time). Opens a
date picker or numeric wheels for year, month, day when active in supporting
browsers.

datetime- A control for entering a date and time, with no time zone. Opens a date picker
local or numeric wheels for date- and time-components when active in supporting
browsers.

email A field for editing an email address. Looks like a text input, but has validation
parameters and relevant keyboard in supporting browsers and devices with
dynamic keyboards.
 lOMoAR cPSD| 50297005

Additional HTML Elements -

<address> The <address> HTML element indicates that the enclosed HTML
provides contact information for a person or people, or for an
organization.

<article> The <article> HTML element represents a self-contained composition in

a document, page, application, or site, which is intended to be
independently distributable or reusable (e.g., in syndication).Examples
include: a forum post, a magazine or newspaper article, or a blog entry,

<aside> The <aside> HTML element represents a portion of a document whose

content is only indirectly related to the document's main content. Asides
are frequently presented as sidebars or call-out boxes.

<footer> The <footer> HTML element represents a footer for its nearest sectioning
content or sectioning root element. A <footer> typically contains
information about the author of the section, copyright data or links to
related documents.

<header> The <header> HTML element represents introductory content, typically a

group of introductory or navigational aids. It may contain some heading
elements but also a logo, a search form, an author name, and other
elements.

<h1>, <h2>, The <h1> to <h6> HTML elements represent six levels of section
<h3>, <h4>, headings. <h1> is the highest section level and <h6> is the lowest.
<h5>, <h6>

<main> The <main> HTML element represents the dominant content of the body
of a document. The main content area consists of content that is directly
related to or expands upon the central topic of a document, or the central
functionality of an application.

<nav> The <nav> HTML element represents a section of a page whose purpose
is to provide navigation links, either within the current document or to
other documents. Common examples of navigation sections are menus,
tables of contents, and indexes.

<section> The <section> HTML element represents a generic standalone section of

a document, which doesn't have a more specific semantic element to
represent it. Sections should always have a heading, with very few
exceptions.

Fig 3.2 Additional HTML elements.

 lOMoAR cPSD| 50297005

CHAPTER 4: CSS

CSS:

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

4.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
 lOMoAR cPSD| 50297005

• 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
 lOMoAR cPSD| 50297005

• CSS Website Layout

• CSS Units

• CSS Backgrounds

• CSS Box Sizing

• CSS Media Queries

 lOMoAR cPSD| 50297005

CHAPTER 5: JAVASCRIPT

5.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.
• : We can write JavaScript code in other file having an extension .js and
External JS
then link this file inside the <head> tag of the HTML file in which we want to add this
code.
<script
Syntax to link javascript file to html : src="main.js"></script>
Syntax -
<script>
// JavaScript Code
</script>

5.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:
 lOMoAR cPSD| 50297005

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.

Fig 5.1 If else statement in javascript

 lOMoAR cPSD| 50297005

5.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;

5.4 Functions in JavaScript :

Functions are one of the fundamental building blocks in JavaScript. A function in JavaScript is
—a set of statements that performs a task or calculates a value, but for a
similar to a procedure
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
}
 lOMoAR cPSD| 50297005

: After defining a function, the next step is to call them to make use of the
Calling Functions
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, ..);
: The return statement ends function execution and specifies a value to be
Return Statement
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 :Theonclickevent 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.
: When a return statement is used in a function body, the execution
document.querySelector
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)
 lOMoAR cPSD| 50297005

CHAPTER 6: PROJECT

The portfolio website showcases personal and professional details, including skills, projects, and
achievements. It is developed using React.js for dynamic UI, Bootstrap for responsive design, and optimized
for user engagement. Features include a contact form, smooth navigation, and a visually appealing layout to
highlight expertise effectively.

- HTML
- CSS
- Javascript
Portfolio Website

.
 • Objective: To create a professional and interactive platform to showcase skills, projects,
and achievements.

• Technologies Used: React.js, Bootstrap, and CSS for responsive design and dynamic
functionality.

• Features:
1. Clean and modern UI.
2. Sections for skills, projects, and contact information.
3. Mobile-friendly and optimized for user engagement.

• Outcome: A visually appealing portfolio for professional representation.

4o
 lOMoAR cPSD| 50297005

CHAPTER 7: CONCLUSION

On the whole, this internship was a useful experience. I have gained new knowledge, skills . I
achieved several of my learning goals,. I got insight into professional practice. I learned the
different facets of working I experienced that financing, as in many organisations, is an
important factor for the progress of projects.There is still a lot to discover and to improve. The
internship was also good to find out what my strengths and weaknesses are. This helped me to
define what skills and knowledge I have to improve in the coming time. It would be better that
the knowledge level of the language is sufficient to contribute fully to projects.
 lOMoAR cPSD| 50297005

References

1. GeeksforGeeks, 2017. HTML elements- GeeksforGeeks. [online] GeeksforGeeks.

Available at: <https://www.geeksforgeeks.org/most-commonly-used-tags-in-html/>

2. Javatpoint, 2019. CSS properties– Javatpoint. [online] Javatpoint. available at:

<https://www.javatpoint.com/css-tutorial/
>

3. Mdn web docs , <https://developer.mozilla.org/en-US/docs/Web/JavaScript/>

4. Tutorials point, <https://www.tutorialspoint.com/index.htm/>

zz