Scribd
Upload
132 views16 pages

Frontend Development Basics Guide

Many students want to become web developers or web designers these days. So frontend development becomes an important aspect for them. So here is some knowledge about frontend development and from where you should start your journey to web development.

Uploaded by

Khushi Mittal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
132 views16 pages

Frontend Development Basics Guide

Many students want to become web developers or web designers these days. So frontend development becomes an important aspect for them. So here is some knowledge about frontend development and from where you should start your journey to web development.

Uploaded by

Khushi Mittal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 16

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.

You might also like