BASIC KNOWLEDGE

ABOUT
FRONTEND DEVELOPMENT

MADE BY-
KHUSHI MITTAL
 TABLE OF CONTENT

• WHAT IS FRONT-END???
• LAYERS OF WEB DESIGNING
• HTML
• CSS
• WEB PAGE
• WHAT IS JAVASCRIPT
 WHAT IS FRONTEND???

Front-end development is the development of

graphical user interface of a website using
HTML,CSS and JavaScript.
3 LAYERS OF WEB DESIGNING

HTML JavaScript CSS

Let’s take the example of a page
 What is HTML???

HTML
=
HYPER TEXT
MARKUP LANGUAGE
 HTML

HTML is a standard markup language for documents

designed to be displayed in a web browser.
Without any markup to give your page content
structure, the browser renders unformatted and
unstyled text.
HTML tags give structure and meanings to the
content.
Some examples of HTML tags are-
<p>helps to write paragraph</p>,
<table></table>- used to display tables.
<img></img>- use to add image.
Page with and without HTML

Page without HTML

Page with HTML

 What is CSS???

CSS
=
Cascading Style Sheet
 CSS

CSS is a set of rules defining how an HTML element

will be “presented” in the browser.
Example of CSS rules applied on an HTML tag:
If we want to print this line in Red
color. Its CSS will be:
p{
Let the HTML tag is: color: red;}
OR
<p class=“title” id=“title”>This is .title{
a paragraph</p> color: red;}
OR
#title{
color: red;}

Output on applying this style-

This is a paragraph
 Things you can and can’t change using CSS

Things we can change Things we can’t change

Color
Font
Font-size
Backgrounds
• Content
Spacing • Markup
Sizes
Borders
Position
How the demo page will look after applying CSS?

Our page is started looking perfect after applying CSS in

it!!!
 Web Pages

The combination of text, HTML, and CSS makes a web

page.
i.e.

Text HTML CSS

WEB PAGE
 What is JavaScript???

Classic JavaScript is a
client side language used
to add interactivity to the
web pages.
 JavaScript

At the beginning JavaScript

was designed to manipulate
web pages.
But today its usage are
much wider.
We can also use JavaScript
outside the web pages and
browsers.