WEB DEV 101

@miracleio
What’s web dev?
Web development deals with the creation of
dynamic web pages and sites.
It mainly consists of Front End Web Dev, Back
End Web Dev and FullStack.
What we’ll do
The main areas we are going to cover

➔ Basic Concepts
Internet, WWW, Web Pages, Web Sites,
Servers and clients

➔ Web Dev languages and tools

Overview of - .Client Side and Server side
and how they all work together

➔ Career paths
Front End, Back End, FullStack
 Basic Concepts
In English
Internet

● The internet is simply a network of computers

communicating(sharing data and information) all over
the world
WWW

● The World Wide Web(WWW) is a combination of online

content and users that use the Hyper Text Transfer
Protocol(HTTP) which are identified by URLs, interlinked
with hypertext links and is accessed over the internet.
Web Pages

● Is a document usually written in HTML which may

contain text, hyperlinks and multimedia. It is displayed
using a browser.
Web Sites

● A web site is a collection of interrelated web pages

which are located on the same domain.
How do web sites
work?
In simple terms
Server to client communication
Server Client
A server is simply a computer A client is typically a browser on a
dedicated to receiving requests, computer that sends a request to a
processing it and sending a response particular server over a network.
back to computer that sent that Receives a response and displays
request, the client. the response to the user. You
Tip
Use an example
e.g Facebook login,
searching on google.com
request
Serve
Client
r
response
What the browser does

The browser translates whatever the server sends as a

response and displays it.
It gets the HTML file, gets other files that are attached to it
like the CSS and JS
It then renders the HTML, applies the styles from the CSS
and adds functionality from the JS. Along side any data that
was sent with the files
Web Dev languages and tools
What languages and
technologies can be used in Web
Dev? Tip
In this example, we’re
leading off with something
unexpected.
While the audience is trying
to come up with a number,
we’ll surprise them with the
next slide.
Client-side and Server-side
Client side – HTML, CSS, JS
Server side – PHP, Python, Ruby, ASP, JS etc.

Tip
Remember. If something
sounds like common sense,
people will ignore it.
Highlight what is
unexpected about
your topic.
Client Side languages (Front-end)

HTML
CSS
JS
HTML

● HTML - Hypertext Markup Language, is a markup language used to

describe the structure of a web page.

● It uses a special syntax or notation to organize and give information

about the page to the browser.

● Elements usually have opening and closing tags that surround and give
meaning to content.

● For example, there are different tag options to place around text to show
whether it is a heading, a paragraph, or a list.
CSS
● Cascading Style Sheets (CSS) tell the browser how to display the
text and other content that you write in HTML

● CSS has been adopted by all major browsers and allows you to
control: Color, Fonts, Positioning, Spacing, Sizing, Decorations,
transitions

● The idea behind CSS is that you can use a selector to target an
HTML element in the DOM (Document Object Model) and then
apply a variety of attributes to that element to change the way
it is displayed on the page.
JS

● JavaScript is a high-level programming language that all

modern web browsers support.
● It is also one of the core technologies of the web, along
with HTML and CSS.
● JavaScript introduces functionality and interactivity to
the web page. It creates logic in the web page.
 ● FreeCodeCamp -
https:/www.freecodecamp.org
● Sololearn -
Resources https://www.sololearn.com/
● W3Schools -
Web sites and apps for personal
learning https://www.w3schools.com/
Server Side languages (Back-end)

PHP
JS
Python… etc
PHP

● PHP is a server scripting language, and a powerful tool

for making dynamic and interactive Web pages.

● PHP is widely-used, free, and efficient

● To use PHP, you have to install a server on your machine

PYTHON

● Python is a programming language.

● Python can be used on a server to create web

applications.
JAVASCRIPT with NODE.JS

● Node.js is an open source server environment.

● Node.js allows you to run JavaScript on the server.

And other languages

Including:
● Python
● Go
● ASP
● more…
How the Front End
and Back End works
together
Let’s say you’re trying to sign in on your favorite
social media platform…

It follows some steps, at a very basic level, it goes something like

this:
You enter www.twitter.com , the browser requests log in page from the server
The server sends the requested page to the client, which then renders the page
The browser then sends the user input to the server which processes it
The server then responds, the client receives this response and renders the
page
Frontend, Backend, FullStack
Frontend Web developer

This is someone who focuses on the appearance and

functionality of whatever is on the client side… The stuff
you see.

UI(User Interface) and UX(User experience) design, graphics

design, site accessibility… etc. are what the developer
focuses on improving.
Backend Web developer

A backend developer is concerned with the operations on

the server side… the stuff you probably don’t see. The
databases, the CMS, processing requests… etc.

All what makes the site really work is handled by the back
end developer.
FullStack

This can easily be seen as a mix of front and back end.

A developer that handles how the site looks(front end) and
how the processes and information are handled is a
FullStack developer.

Note that to be a FullStack dev, you have to be really good

at the two.
Conclusion
Why choose web
development?
Well,
● It’s a high paying Job, getting $78,000 as
a web developer isn’t that bad.
● It’s in demand, many businesses are still
looking for developers to develop sites
and web apps for them
● It’s a valuable skill
● It has a vast area of applications, from
portfolios to bots.
● It has limitless possibilities, you can
create a lot of things, ranging from
simple sites to awesome android, iOS
or desktop applications.
● It works very closely with other fields,
making it very important in building
great new tech.
Disclaimer
This slide tries to simplify the
concepts as much as possible, so, a
lot of information has been
compressed.
So, this should no be used as a
reference or anything of that matter.
But can be used to get an overview
of the concept which it treats.
CSC2K18
WEB DEV 101
@miracleio