A SUMMER TRAINING REPORT

On
FRONT END WEB DEVELOPMENT

In partial fullfilment of the requirements

for the award of the degree
of

Bachelor of Technology

(COMPUTER SCIENCE ENGINEERING)

2019-2023

HINDUSTAN COLLEGE OF SCIENCE AND TECHNOLOGY

FARAH, MATHURA (281122)

Submitted to: Submitted by:

Dr. Munish Khanna Deepak Singh

HOD (CSE) B.Tech CSE 7th Sem.
(1901260100011)
 Acknowledgement
This report is an outcome of the contributions made by some of the peoples.
Therefore, it is my sole responsibility to acknowledge them. I am greatly thankful
to the sincere efforts made by Mr. Quincy Larson, Senior Faculty Staff without
whom this project would be abstract. I also thank the staff of HCST College of
Engineering who took out their precious time and made various arrangements for
conduction of the classes.

I would also mention the outstanding support given by my parents who paved the
way for me to complete this summer training report.

DEEPAK SINGH
B.tech (7th Sem)
COMPUTER SCIENCE ENGINEERING
Hindustan College of Science and Technology, Mathura
Certificate
 CONTENTS
Sr. No Headings

1. About the Company

2. Software Requirement Specifications

3. HTML

4. What Is Web

5. Version Of HTML

6. CSS

7. ID Selector

8. Introduction to PHP

9. Introduction To JS

10. Code

11. Output

12. Conclusion
 About The Company

freeCodeCamp (also referred to as Free Code Camp) is a non-profit

organization[2] that consists of an interactive learning web platform, an online
community forum, chat rooms, online publications and local organizations that
intend to make learning web development accessible to anyone. Beginning with
tutorials that introduce students to HTML, CSS and JavaScript, students progress
to project assignments that they complete either alone or in pairs. Upon
completion of all project tasks, students are partnered with other nonprofits to
build web applications, giving the students practical development experience.
 Software Requirement
Specification
A requirements specification for a software system is a complete description of
the behavior of a system to be developed and it includes a set of use cases that
describe all the interactions the users will have with the software. In addition to
use cases, the SRS also contains non-functional requirements.

Non-functional requirements are requirements which impose constraints on the

design or implementation (such as performance engineering requirements, quality
standards, or design constraints). Requirements are a sub-field of software
engineering that deals with the elicitation, analysis, specification, and validation
of requirements for software.

The software requirement specification document enlists all necessary

requirements for project development. To derive the requirements, we need to
have clear and thorough understanding of the products to be developed. This is
prepared after detailed communications with project team and the customer.

Software Requirement:

Operating System:
Windows Coding Language: HTML, CSS, PHP, JavaScript, and
Bootstrap.
Text Editor : Sublime Text3.
Database : My SQL.
Package : XAMPP.

Hardware Requirements:
Processor : Intel core i3
Memory : 8GB RAM
Hard Disk : 1T.
 HTML
HTML HTML (HyperText Mark-Up Language) is what is known as a "mark-up
language" whose role is to prepare written documents using formatting tags. The
tags indicate how the document is presented and how it links to other documents.
The World Wide Web (WWW for short), or simply the Web, is the worldwide
network formed by all the documents (called "web pages") which are connected to
one another by hyper links. Web pages are usually organized around a main page,
which acts as a hub for browsing other pages with hyperlinks. This group of web
pages joined by hyperlinks and centered around a main page is called a website The
Web is a vast living archive composed of a myriad of web sites, giving people
access to web pages that may contain formatted text, images, sounds, video, etc.
 What is the Web
What is the Web? The Web is composed of web pages stored on web servers,
which are machines that are constantly connected to the Internet and which
provide the pages that users request. Every web page, and more generally any
online resource, such as images, video, music, and animation, is associated with a
unique address called a URL. The key element for viewing web pages is the
browser, a software program which sends requests to web servers, then processes
the resulting data and displays the information as intended, based on instructions
in the HTML page.

The most commonly used browsers on the Internet include:

Mozilla Firefox,
Microsoft Internet Explorer,
Netscape Navigator Safari,
Opera
 Version of HTML

HTML was designed by Tim Berners-Lee, at the time a researcher at CERN

(Chinese Ecosystem Research Network). beginning in 1989. He officially
announced the creation of the Web on Usenet in August 1991. However, it wasn't
until 1993 that HTML was considered advanced enough to call it a language
(HTML was then symbolically christened HTML 1.0).

RFC 1866, dated November 1995, represented the first official version of HTML,
called HTML 2.0. After the brief appearance of HTML 3.0, which was never
officially released. HTML 3.2 became the official standard on January 14, 1997.

The most significant changes to HTML 3.2 were the standardization of tables, as
well as many features relating to the presentation of web pages. On December 18,
1997, HTML 4.0 was released. Version 4.0 of HTML was notable for
standardizing style sheets and frames.

HTML version 4.01, which came out on December 24. 1999, made several minor
modifications to HTML 4.0.
 CSS
What Is CSS?
> CSS stands for Cascading Style Sheets.
> CSS describes how HTML elements are to be displayed on screen, paper, or in
other media.
> CSS saves a lot of work. It can control the layout of multiple web pages External
stylesheets are stored in CSS files. at once
> CSS describes how HTML elements should be displayed.
> CSS Saves a Lot of Work! The style definitions are normally saved in external .css
files.
> With an external stylesheet file, we can change the look of an entire website by
changing just one file! CSS can be either external or internal.

CSS Syntax:
A CSS rule-set consists of a selector and a declaration block: CSS selector: The
selector points to the HTML element you want to style. The declaration block
contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a

colon. A CSS declaration always ends with a semicolon, and declaration blocks
are surrounded by curly braces.
 Id Selector
The id selector uses the id attribute of an HTML element to select a specific element
.The id of an element should be unique within a page, so the id selector is used to
select one unique element! To select an element with a specific id, write a hash (#)
character, followed by the id of the element. The style rule below will be applied to
the HTML element with id="suhail ":.

The class Selector:

The class selector selects elements with a specific class attribute. To select
elements with a specific class, write a period f.) character, followed by the name of
the class.

MYSQL:
MySQL (My S-Q-L. or "My sequel") is a relational database management
system (RDBMS) which has more than 6 million installations. MySQL stands for
"My Structured Query Language". The program runs as a server providing multi-
user access to a number of databases.

INTRODUCTION TO PHP:

What is PHP?
PHP is a open source, interpreted and object-oriented scripting language i.e.
executed at server side. It is used to develop web applications (an application i.e.
executed at server side and generates dynamic page).
> PHP stands for Hyper Text Preprocessor .
> PHP is a server side scripting language. PHP is an interpreted language, i.e.
there is no need for compilation. PHP is an object-oriented language. PHP is
an open-source scripting language.
> PHP is simple and easy to learn language.
History of PHP:
PHP (PHP: Hypertext Preprocessor) was created by Rasmus Lerdorf in 1994. It
was initially developed for HTTP usage logging and server-side for generation
iUnix. PHP 2 (1995) transformed the language into a Server-side embedded
scripting language. Added database support, file uploads. variables, arrays,
recursive functions, conditionals, iteration. regular expressions, etc.

PHP 3 (1998) added support for ODBC data sources, multiple platform support,
email protocols (SNMP,IMAP), and new parser written by Zeev Suraski and Andi
Gutmans PHP 4 (2000) became an independent component of the web server for
added efficiency.

The parser was renamed the Zend Engine. Many security feature were added. PHP
5 (2004) adds Zend Engine 11 with object oriented programming, robust XML
support using thelibxml2 library.

SOAP Services, SQLite has been bundled with PHP extension for interoperability
with Web 7.3 Features of PHP: There are given many features of PHP -
Performance Sent written in PHP executes much faster then the serpts watien in
other linguantes such as ISP & AS
 Introduction to JavaScript
JavaScript is a lightweight, cross-platform, and interpreted compiled programming
language which is also known as the scripting language for webpages. It is well-
known for the development of web pages, many non-browser environments also
use it. JavaScript can be used for Client-side developments as well as Server-side
developments. Javascript is both imperative and declarative type of language.
JavaScript contains a standard library of objects, like Array, Date, and Math, and a
core set of language elements like operators, control structures, and statements.

Client-side: It supplies objects to control a browser and its Document Object

Model (DOM). Like if client-side extensions allow an application to place
elements on an HTML form and respond to user events such as mouse clicks, form
input, and page navigation. Useful libraries for the client-side are AngularJS,
ReactJS, VueJS and so many others.

Server-side: It supplies objects relevant to running JavaScript on a server. Like if

the server-side extensions allow an application to communicate with a database,
and provide continuity of information from one invocation to another of the
application, or perform file manipulations on a server. The useful framework
which is the most famous these days is node.js.

Imperative language – In this type of language we are mostly concern about how it
is to be done . It simply control the flow of computation . The procedural
programming approach , object, oriented approach comes under this like async
await we are thinking what it is to be done further after async call.

Declarative programming – In this type of language we are concern about how it is

to be done , basically here logical computation require . Here main goal is to
describe the desired result without direct dictation on how to get it like arrow
function do .
.

JavaScript can be added to your HTML file in two ways:

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:

<script>
// JavaScript Code
</script>
 Code:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sign in & Sign up Form</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main>
<div class="box">
<div class="inner-box">
<div class="forms-wrap">
<form action="index.html" autocomplete="off" class="sign-in-form">
<div class="logo">
<img src="C:\Users\webbm\OneDrive\Desktop\abc\logo.png"
alt="swisscows" />
<h4>Swisscows</h4>
</div>

<div class="heading">
<h2>Welcome</h2>
<h6>Not registred yet?</h6>
<a href="#" class="toggle">Sign up</a>
</div>

<div class="actual-form">
<div class="input-wrap">
<input
type="text"
minlength="4"
 class="input-field"
autocomplete="off"
required
/>
<label>Name</label>
</div>

<div class="input-wrap">
<input
type="password"
minlength="4"
class="input-field"
autocomplete="off"
required
/>
<label>Password</label>
</div>

<input type="submit" value="Sign In" class="sign-btn" />

<p class="text">
Forgotten your password or your login details?
<a href="#">Get help</a> signing in
</p>
</div>
</form>

<form action="index.html" autocomplete="off" class="sign-up-form">

<div class="logo">
<img src="C:\Users\webbm\OneDrive\Desktop\abc\logo.png"
alt="swisscows" />
<h4>Swisscows</h4>
</div>

<div class="heading">
<h2>Get Started</h2>
<h6>Already have an account?</h6>
 <a href="#" class="toggle">Sign in</a>
</div>

<div class="actual-form">
<div class="input-wrap">
<input
type="text"
minlength="4"
class="input-field"
autocomplete="off"
required
/>
<label>Name</label>
</div>

<div class="input-wrap">
<input
type="email"
class="input-field"
autocomplete="off"
required
/>
<label>Email</label>
</div>

<div class="input-wrap">
<input
type="password"
minlength="4"
class="input-field"
autocomplete="off"
required
/>
<label>Password</label>
</div>

<input type="submit" value="Sign Up" class="sign-btn" />

 <p class="text">
By signing up, I agree to the
<a href="#">Terms of Services</a> and
<a href="#">Privacy Policy</a>
</p>
</div>
</form>
</div>

<div class="carousel">
<div class="images-wrapper">
<img src="C:\Users\webbm\OneDrive\Desktop\abc\image1.png"
class="image img-1 show" alt="" />
<img src="C:\Users\webbm\OneDrive\Desktop\abc\image2.png"
class="image img-2" alt="" />
</div>
<div class="text-slider">
<div class="text-wrap">
<div class="text-group">
<h2>Hubble Enterpeise Search</h2>
<h2>Swisscows Fan Shop</h2>
<h2>Why Swisscows</h2>
</div>
</div>
<div class="bullets">
<span class="active" data-value="1"></span>
<span data-value="2"></span>
<span data-value="3"></span>
</div>
</div>
</div>
</div>
</div>
</main>
<script src="app.js"></script>
</body>
</html>
OUTPUT:
 Conclusion

In a FREECODE CAMP, this internship has been an excellent and rewarding

experience. I can conclude that there have been a lot I've learnt from my work at the
training & research centre.

Needless to say, the technical aspects of the work I've done are not flawless and could
be improved provided enough time. As someone with no prior experience in
JavaScript whatsoever I believe my time spent in training and discovering new
languages was well worth it and contributed to finding an acceptable solution to an
important aspect of web design and development.

Two main things that I've leaned the importance of are time-management skills and
self-motivation. Although I have often stumbled upon these problems at University,
they had to be approached differently in a working environment