lOMoARcPSD|35676581

1
 TABLE OF CONTENTS

1. Introduction

1.1. Web Development

1.2. Classification of Web Development

1.3. Front End Development

1.4. Back End Development

1.5. Front End Developer

1.6. Skills required for Front End Developer

1.7. Working of Website

2. Training Details

2.1. Hyper Text Markup Language (HTML)

2.1.1. Features of HTML

2.1.2. HTML Page Structure

2.2. Cascading Style Sheets (CSS)

2.2.1. Features of CSS

2.2.2. Types of CSS

2.2.3. Properties of CSS

2.3. JavaScript

2.3.1. Features of JavaScript

2
 3. Assignments

3.1. Pop-Up Box

3.2. Responsive Image Slider

4. Project

4.1. Description

3
 INTRODUCTION

WEB DEVELOPMENT

Web development refers to the creating, building, and maintaining of

websites. It includes aspects such as web design, web publishing, web
programming, and database management. It is the creation of an application that
works over the internet i.e., websites. The word Web Development is made up of
two words, that is: Web: It refers to websites, web pages or anything that works
over the internet. Development: It refers to building the application from scratch.

CLASSIFICATION OF WEB DEVELOPMENT:

Front End Development:

Front-end web development, also known as client-side development is the practice of

producing HTML, CSS and JavaScript for a website or Web Application so that a user can see
and interact with them directly. The challenge associated with front end development is that
the tools and techniques used to create the front end of a website change constantly and so the
developer needs to constantly be aware of how the field is developing.

Back End Development:

Back-end development means working on server-side software, which focuses on everything

you can’t see on a website. Back-end developers ensure the website performs correctly,
focusing on databases, back-end logic, application programming interface (APIs),
architecture, and servers. They use code that helps browsers communicate with databases,
store, understand, and delete data.

4
FRONT END DEVELOPMENT:

Web design is the way a website looks, front end development is how that design
actually gets implemented on the web. The main objective of designing a site is to
ensure that when the users open up the site, they see the information in a format
that is easy to read and relevant. But now a days users uses a large variety of
devices with varying screen sizes and resolutions thus forcing the designer to take
into consideration these aspects when designing the site. They need to ensure that
their site comes up 8 correctly in different browsers (cross-browser), different
operating systems (crossplatform) and different devices (cross-device), which
requires careful planning on the side of the developer.

FRONT END DEVELOPER:

A front-end developer, also known as a front-end web developer, is a professional

responsible for the design and implementation of the interface. The users require
this interface so that they can access the application in question. A web designer is
a professional who creates a website’s appearance and design. And the front-end
developer makes sure that the design works online by using coding languages such
as CSS, HTML, and JavaScript.

5
SKILLS REQUIRED FRONT END WEB DEVELOPMENT:

HTML: Hyper Text Markup Language (HTML) is the standard markup language
used for creating web pages. It is the most basic building block required for
developing websites

CSS: Cascading Style Sheets (CSS) is used to apply styles to web pages. It is used
to make web pages presentable. The reason for using this is to simplify the process
of making web pages presentable. It allows you to apply styles on web pages.
More importantly, it enables you to do this independently of the HTML that makes
up each web page.

JavaScript: JavaScript is a very powerful tool that can do many things for a
website. For one, it powers the site’s general interactivity. JavaScript makes it
possible to build rich UI components such as image sliders, pop-ups, site
navigation mega menus, form validations, tabs, accordions, and much more.

6
WORKING OF WEBSITE:

A website is a collection of webpages located under a single domain name. These

webpages contain and display information about the business or organization and
are usually made up of elements such as photos, videos and text. Users need a
device with a web browser — laptops, smartphones or tablets — and an Internet
connection to access a website.

Working of a Website

7
Web Application Development Process

8
Hyper Text Markup Language (HTML):

HTML (Hyper Text Markup Language) is the most basic building block of the Web. It defines
the meaning and structure of web content. Other technologies besides HTML are generally
used to describe a web page's appearance/presentation (CSS) or functionality/behavior
(JavaScript).

"Hypertext" refers to links that connect web pages to one another, either within a single
website or between websites. Links are a fundamental aspect of the Web. By uploading
content to the Internet and linking it to pages created by other people, you become an active
participant in the World Wide Web.

HTML uses "markup" to annotate text, images, and other content for display in a Web
browser. HTML markup includes special "elements" such as <head>, <title>, <body>,
<header>,

<footer>, <article>, <section>, <p>, <div>, <span>, <img>, <nav>, <video>, <ul>,
<ol>,

<li> and many others.

FEATURES OF HTML:

 It is a very easy and simple language. It can be easily understood and modified.

 It is very easy to make an effective presentation with HTML because it has a lot
formatting tags.
 It is a markup language, so it provides a flexible way to design web pages along with the
text.

 It facilitates programmers to add a link on the web pages (by html anchor tag), so it
enhances the interest of browsing of the user.

 It is platform-independent because it can be displayed on any platform like Windows,

Linux etc.

9
 It facilitates the programmer to add Graphics, Videos, and Sound to the web pages which
makes it more attractive and interactive.

 HTML is a case-insensitive language, which means we can use tags either in lowercase or
upper-case.

HTML Page Structure:

Fig :HTML page structure

HTML TAGS :

HTML tags are the hidden keyword within a web page that
define how the browser must format and display the contents.
Most of these tags have 2 parts , opening tag and closing tag.

10
<p> : Opening Tag </p> : Closing Tag

Opening Tag and Closing Tag together are called as a

Container .

 <html>

Tags are used to inform the browser how to format or

display the text, except for the declaration of document type
and comment. Comments can be included with html tags
also.

 <body>

It contains all the visible contents of the page. It may

include texts, links and tables, or videos.

11
  <div>

It is used to create different sections in a web page.

 <!DOCTYPE>: It defines the document type or it instruct the browser about the
version of HTML

 <html>: This tag informs the browser that it is an HTML document. Text between html
tag describes the web document. It is a container for all other elements of HTML except
<!DOCTYPE>

 <head>: It should be the first element inside the element, which contains the meta
data (information about the document). It must be closed before the body tag opens.

 <title>: As its name suggested, it is used to add title of that HTML page which appears at
the top of the browser window. It must be placed inside the head tag and should close
immediately.

 <body>: Text between body tag describes the body content of the page that is visible to the
end user. This tag contains the main content of the HTML document.

TEXT FORMATTING

There are six different heading tags.

12
 <h1> I am Heading </h1>

<h2>I am Heading</h2>

Number defines the size of the text.

<i> : Tag to make text look italic.

<strong> : Tag to make text look bold.

<em>: Tag to make text look italic.

These tags help the browser know about the special importance
of text , not just styling. It also helps in SEO purposes .

13
 <u> : Tag element is used to underline text.

<mark> : Tag element is used to highlight text.

HYPERLINKS:

Any content , image or text can be linked to a new page. The text
linked is called anchor text. Link is created using html <a>click
here</a>link.

href=”hypertext reference” <a href = “ “ >click here</a>

target=”_blank”
<a href=”link” target=”_blank”> This will open in another tab.
target=”_self”
<a href=”link” target=”_self” > This will open in the same tab.

14
Cascading Style Sheets

: Cascading Style Sheets are fondly referred to as CSS. It is used to make web pages
presentable. The reason for using this is to simplify the process of making web pages
presentable. It allows you to apply styles on web pages. More importantly, it enables
you to do this independently of the HTML that makes up each web page.

Features of CSS:

 Font, color, background style, element alignments, border, and size tags had to be
duplicated on each web page before CSS. This was a lengthy procedure.

 CSS makes website maintenance much easier. If we need to make a global change
to the file, we can simply alter the style, which will update all of the elements on the
web page.

 We can use CSS with older language versions because it is compatible with them.
CSS makes it possible to optimize material for several devices

 A website that’s dull and plain will not attract the user, so adding some style
would surely make your website presentable to the user.

 A website with a simple yet beautiful UI would help the users to go through the
website easily. It is used to make the user interface better.

 Since CSS is a basic requirement while learning Web Development, therefor

there are abundant career opportunities for it. As a freelancer, you can land up to
many projects.

15
Types of CSS:
There are three types of CSS which are given below:

o Inline CSS
o Internal CSS
o External CSS

Inline CSS:
Inline CSS contains the CSS property in the body section attached with element is known as inline
CSS. This kind of style is specified within an HTML tag using the style attribute

Internal or Embedded CSS: This can be used when a single HTML document must
be styled uniquely. The CSS rule set should be within the HTML file in the head
section i.e., the CSS is embedded within the HTML file.

External CSS: External CSS contains separate CSS file which contains only style
property with the help of tag attributes (For example class, id, heading, … etc.). CSS
property written in a separate file with .css extension and should be linked to the
HTML document using link tag. This means that for each element, style can be set
only once and that will be applied across web pages.

16
Properties of CSS:

Inline CSS has the highest priority, then comes Internal/Embedded

followed by External CSS which has the least priority. Multiple style
sheets can be defined on one page. If for an HTML tag, styles are defined
in multiple style sheets then the below order will be followed.

1) As Inline has the highest priority, any styles that are defined in the internal and
external style sheets are overridden by Inline styles.
2) Internal or Embedded stands second in the priority list and overrides the styles in
the external style sheet.

3) External style sheets have the least priority. If there are no styles defined either in
inline or internal style sheet then external style sheet rules are applied for the HTML
ta

17
FONTS:

Properties :

1) Font Style

2) Font Variant

3) Font weight

4) Font Size

5) Line height

6) Font family

Font size and Font family are mandatory.

For Ex : h4 { font: italic small-caps bolder 28px arial,

sans-serif ; } Comma is used in font family if there is
unavailability of any font.

NAVIGATION BAR:

Navigation Bar and logo are together often referred to as a header.

Navigation bar links different sections within a page.

18
Navigation links are added using the <nav> tag. Using the <ul> tag
inside the

<nav> tag we can create a navigation bar.

To create logo in navigation bar ;

<div id=”header”>

<a href=”#” class=”logo”>

<img src=”./img/logo.jpg” alt=”msd”

</a>

19
FORMS:

It collects information stored in databases or sent to the

server. Using the <form> element to create form.

<form>

<input type=”text” placeholder =”Enter first Name” name=”First

name”><br><br>

<input type=”submit”>

20
JavaScript:
JavaScript (JS) is the world’s most popular lightweight, interpreted
compiled programming language. It is also known as a scripting language
for web pages. It can be used for Client-side as well as Server-side
developments. JavaScript can be added to your HTML file in two ways:

Internal JavaScript: We can add JS code 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 JavaScript File: We can create a file with .js extension and paste
the JS code inside it. After creating the file, add this file in

<script src=” file_name.js”> tag inside <head> tag of the HTML file.

Features of JavaScript:

 All popular web browsers support JavaScript as they provide built-in execution
environments.

 JavaScript follows the syntax and structure of the C programming language. Thus,
it is a structured programming language.

 JavaScript is a weakly typed language, where certain types are implicitly cast
(depending on the operation).

 JavaScript is an object-oriented programming language that uses prototypes

rather than using classes for inheritance.

 It is a light-weighted and interpreted language.

 It is a case-sensitive language.

21
22