lOMoARcPSD|31127513

industrial training report file

Software Engineering (Rajasthan Technical University)

Studocu is not sponsored or endorsed by any college or university

Downloaded by Kaush ([email protected])
 lOMoARcPSD|31127513

FRONT-END WEB DEVELOPMENT (by Bit to Byte Robotics)

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:

Dr. C.P. Gupta Kashak Sogani
Professor Roll. No. 20/368
Department of Computer Science Univ. Roll No.:20EUCCS028
Semester/Year: V Sem/III Year

Department of Computer Science & Engineering

University Department,
Rajasthan Technical University, Kota
December-2022

Downloaded by Kaush ([email protected])

 lOMoARcPSD|31127513

CERTIFICATE

Downloaded by Kaush ([email protected])

 lOMoARcPSD|31127513

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.

Kashak Sogani

Downloaded by Kaush ([email protected])

 lOMoARcPSD|31127513

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.

Downloaded by Kaush ([email protected])

 lOMoARcPSD|31127513

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

Downloaded by Kaush ([email protected])

 lOMoARcPSD|31127513

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

Downloaded by Kaush ([email protected])

 lOMoARcPSD|31127513

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.

Downloaded by Kaush ([email protected])

 lOMoARcPSD|31127513

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.

Downloaded by Kaush ([email protected])

 lOMoARcPSD|31127513

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.

Downloaded by Kaush ([email protected])

 lOMoARcPSD|31127513

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

Downloaded by Kaush ([email protected])

 lOMoARcPSD|31127513

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

Downloaded by Kaush ([email protected])

 lOMoARcPSD|31127513

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

Downloaded by Kaush ([email protected])

 lOMoARcPSD|31127513

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

13

Downloaded by Kaush ([email protected])

 lOMoARcPSD|31127513

file A control that lets the user select a file. Use the accept attribute to define the
types of files that the control can select.

hidden A control that is not displayed but whose value is submitted to the server.
There is an example in the next column, but it's hidden!

image A graphical submit button. Displays an image defined by the src attribute. The
alt attribute displays if the image src is missing.

month A control for entering a month and year, with no time zone.

number A control for entering a number. Displays a spinner and adds default
validation when supported. Displays a numeric keypad in some devices with
dynamic keypads.

password A single-line text field whose value is obscured. Will alert user if site is not
secure.

radio A radio button, allowing a single value to be selected out of multiple choices
with the same name value.

range A control for entering a number whose exact value is not important. Displays
as a range widget defaulting to the middle value. Used in conjunction min and
max to define the range of acceptable values.

reset A button that resets the contents of the form to default values. Not
recommended.

search A single-line text field for entering search strings. Line-breaks are
automatically removed from the input value. May include a delete icon in
supporting browsers that can be used to clear the field.

submit A button that submits the form.

text The default value. A single-line text field. Line-breaks are automatically
removed from the input value.

time A control for entering a time value with no time zone.

url A field for entering a URL. Looks like a text input, but has validation
parameters and relevant keyboard in supporting browsers and devices with
dynamic keyboards.

Fig 3.1 HTML input elements

14

Downloaded by Kaush ([email protected])

 lOMoARcPSD|31127513

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.

15

Downloaded by Kaush ([email protected])

 lOMoARcPSD|31127513

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

16

Downloaded by Kaush ([email protected])

 lOMoARcPSD|31127513

• 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

17

Downloaded by Kaush ([email protected])

 lOMoARcPSD|31127513

• CSS Website Layout

• CSS Units

• CSS Backgrounds

• CSS Box Sizing

• CSS Media Queries

18

Downloaded by Kaush ([email protected])

 lOMoARcPSD|31127513

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

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:

19

Downloaded by Kaush ([email protected])

 lOMoARcPSD|31127513

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

20

Downloaded by Kaush ([email protected])

 lOMoARcPSD|31127513

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

21

Downloaded by Kaush ([email protected])

 lOMoARcPSD|31127513

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)

22

Downloaded by Kaush ([email protected])

 lOMoARcPSD|31127513

CHAPTER 6: PROJECT

After learning many of the things in web development area, it’s time to build something upon
the learnt things to show our skills and learn them more. So, we made a project using the things
we learnt so far. We have used following technologies in our project:
- HTML
- CSS
- Javascript
Fashion newsletter template.

23

Downloaded by Kaush ([email protected])

 lOMoARcPSD|31127513

After applying javascript:

24

Downloaded by Kaush ([email protected])

 lOMoARcPSD|31127513

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.

25

Downloaded by Kaush ([email protected])

 lOMoARcPSD|31127513

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

26

Downloaded by Kaush ([email protected])