Scribd
Upload
65 views33 pages

Front-END: Web Devlopment

The document discusses front-end web development. It covers the evolution of the web from static Web 1.0 to today's dynamic Web 3.0. It then discusses the three main layers of front-end development - HTML for structure, CSS for style, and JavaScript for behavior. Popular front-end frameworks like React and Angular are also mentioned. The roles and responsibilities of a front-end developer are outlined. Examples are provided of how HTML, CSS, and JavaScript can be used together to build an interactive web page.

Uploaded by

arjun singh
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
65 views33 pages

Front-END: Web Devlopment

The document discusses front-end web development. It covers the evolution of the web from static Web 1.0 to today's dynamic Web 3.0. It then discusses the three main layers of front-end development - HTML for structure, CSS for style, and JavaScript for behavior. Popular front-end frameworks like React and Angular are also mentioned. The roles and responsibilities of a front-end developer are outlined. Examples are provided of how HTML, CSS, and JavaScript can be used together to build an interactive web page.

Uploaded by

arjun singh
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/ 33

Front-END

Web devlopment

Slog solution pvt.ltd


TOPIC WE WILL COVER

• Types of web devlopment


• Front end devlopment
• HTML
• CSS
• Javascript
• Role and responsibility of front end devloper
Evolution Of web
Web 1.0 (1991-2004)
The first version of the web, also known as the static web, was developed in the early 1990s.
Web pages were static and consisted mainly of text and images.
Users could only consume content on the web and had limited ability to interact with it.

Web 2.0 (2004-2010)


The second version of the web, also known as the dynamic web, emerged in the mid-2000s.
Web pages became more interactive and included features like social networking, user-
generated content, and multimedia.
Users could create and share content on the web, and websites became more user-centered.

Web 3.0 (2010-present)


The third version of the web, also known as the semantic web, is still evolving.
The focus is on creating a more intelligent web that is able to understand and interpret data
in a more human-like way.
Technologies like artificial intelligence, natural language processing, and the Internet of
Things are being used to create a more personalized and intuitive web experience.
Web devlopement
Front end Back end

HTM JavaS Node. Pytho


L Css cript Java
js n
Framewo
rks and
libraries

Boots Jquer Angul Mongo


trap y ar MySql DB .Net

Reac Vue.j
t s
Front-end

Slog solution pvt.ltd


Three layers of web design:

Structure Style Behavior


HTML CSS JavaScript
Frontend frameworks popularity…
2.75%
11.4%

40.14%
18.97%

React.js Angular

vue.js Angular.js

Sevlte
22.96%

Stack overflow survey 2022


june (2022, +70,000 developers):
Most poplar programming language in 2022(Stackoverflow survey..)
JavaScript 64.96%
Html/CSS 56.07%
Python
48.24%
SQl 47.08%
Java
35.35%
Node.js 33.91%
Typescript
30.19%
C# 27.86%
C++
24.31%
PHP
21.01%
C
10.75
GO
9.55
Kotlin
8.32
HTML
=
Hyper Text
Markup Language
Page with html
and css
language
HTML Tags
<p></p> - to organize text into
paragraphs

<table></table> - to display
table

<form></form> - to define
form for user input

<img></img> - to add
HTML tags give
structure
and
Meaning
to your content.
Lets add HTML tags to our
page...
Looks better…
But still not
good
But what should we do
to make the page look
nice
The answer is
use CSS!
CSS( Cascading Style Sheet)
CSS

Set of rules defining


how an html element
will be “presented”
in the browser.
p{
CSS Rules
color: red;
}

#title {
font-style: italic; border: 1px
dotted blue;
}

.title {
font-weight: bold;
background: yellow;
}
Some things you can
change with CSS
• colors • spacing
• font • sizes
• font size • borders
• background • positions
Some things you can’t
change with CSS
• content
• markup
So now it’s time for
styling!!!
Lets add some
css rules to
our example
page.
Looks
perfect!
Text + HTML + CSS
= Web Page
Java Script
JavaScript ≠Java
JavaScript is NOT a Java

It is NOT a light version of Java

It was NOT based on Java

It does NOT matter if you know Java


JavaScript

JavaScript is a client- Web Browser


side language used
to a d d interactivity Web Page
to your web-pages
JavaScript
What we can do with
javascript?

validate values
entered in
the form
fields
What we can do with
JavaScript?

A search box can give you


suggested results while you
type, based on what you’ve
entered
Roles and Responsibility of front
end web devloper
Using HTML, JavaScript and CSS to bring concepts to
life.
Developing and maintaining the user interface.
Implementing design on mobile websites.
Creating tools that improve site interaction
regardless of the browser.
Managing software workflow.
Following SEO best practices.
Fixing bugs and testing for usability.
Applicati on of JavaScript?

•Mobile Apps., can use JavaScript to

•Desktop Applications. ...

•Game Development. ...

•Artificial Intelligence. ...

•IOT(Internet of things)…
Conclusion
•JavaScript was designed to manipulate
web pages.And it does that very well!

• But nowadays its usage is


much much wider: you can
use it outside of web pages
and the browser.
THANK YOU
FOR YOUR ATTENTION

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy