How The Web Works
Let’s learn something!
Django Bootcamp
● This lecture will discuss the following:
○ How the web works
○ What do we mean by “Full-Stack”
○ A brief overview of the course tech
○ Why we chose Django for the
course
● Let’s get started!
Django Bootcamp
● Before we can begin to learn about all
the technologies in this course, we need
to understand how the web works and
what constitutes the “Full-Stack”
Django Bootcamp
● So what happens when your at home
and you open up your browser and visit a
website?
● Let’s breakdown the basic steps!
Django Bootcamp
● You start off by typing the URL into your
browser.
www.abc.com
Django Bootcamp
● Your computer then sends this request
as a packet, which includes the IP
address of the website you want.
123.456.789.10
www.abc.com
Django Bootcamp
● It sends this request through wires, or a
satellite which eventually links to wires
using your ISP.
123.456.789.10
www.abc.com
Django Bootcamp
● Your ISP will then re-route the request to
the appropriate server location, using the
IP address as the guide.
123.456.789.10
www.abc.com
Django Bootcamp
● Once your request reaches the server, it
can send back the website you asked
for.
www.abc.com
123.456.789.10
Django Bootcamp
● However a full website with content is
too big to send as a single packet of data.
www.abc.com
Django Bootcamp
● To solve this, the server sends back the
website split up into many packets
www.abc.com
Django Bootcamp
● The packets come with instructions on
how to get back to you and reassemble
once they reach you.
www.abc.com
Home IP Address
Django Bootcamp
● The packets don’t care how they get to
you, just the final location.
www.abc.com
Home IP Address
Django Bootcamp
● Once the packets reach you, they are
reassembled to show the page.
Home IP Address
Django Bootcamp
● All of this moves at close to the speed of
light, so it happens very fast.
Home IP Address
Django Bootcamp
● This is a higher level explanation, but for
our purposes it is all we need to know for
now.
● Let’s continue by discussing what the
term “Full-Stack” means.
Django Bootcamp
● There are two main components of a
website
○ The Front-End
○ The Back-End
Django Bootcamp
● The Front-End is what you see as a user
on the website.
● The Back-End is the technology used to
actually decide what to show you on the
Front-End.
Django Bootcamp
● The Front-End revolves around three
technologies:
○ HTML
○ CSS
○ Javascript
Django Bootcamp
● You will hear about Front-End
technologies such as jQuery and
Bootstrap, but those are all built using
the previous three.
Django Bootcamp
● HTML - HyperText Markup language
● Every website will have HTML, it is the
structure of a page.
● You can view it by right-clicking and
selecting “View Page Source”
Django Bootcamp
● CSS - Cascading Style Sheets
● CSS is the actual styling of the website.
● Colors, fonts, borders, etc is all defined by
CSS.
● CSS is not mandatory, but almost all sites
have it.
Django Bootcamp
● Javascript allows you to add interactivity
to the website, including programming
logic.
● Any site with interactivity uses Javascript
in some way, otherwise the site is “static”.
Django Bootcamp
● The first half of the course focuses on the
Front-End.
● The Front-End always uses those three
technologies.
● However the Back-End is where a
multitude of options come up!
Django Bootcamp
● The Back-End of a site has three
components:
○ The Language
○ The Framework
○ The Database
Django Bootcamp
● Technologies such as Php, Node.js,
Ruby/Rails, Java, Python, etc. are all
viable options for a website.
● So how do we decide which to choose?
Django Bootcamp
● Our course Back-End uses:
○ Python as the language
○ Django as the Framework
○ SQLite as the Database
Django Bootcamp
● Python is a great language to learn, it’s
simple, powerful, and has many libraries.
● Django is the most popular framework
for Python, it’s fast, secure, and scalable.
● SQLite comes with Django and Python
making it an easy choice.
Django Bootcamp
● As we continue along with the course we
will be discussing each of these topics in
much more detail, but for now you
should have a high-level view of what we
use in this course to turn you into a
Full-Stack Web Developer with Django!
Django Bootcamp
● As we continue along with the course we
will be discussing each of these topics in
much more detail, but for now you
should have a high-level view of what we
use in this course to turn you into a
Full-Stack Web Developer with Django!
Let’s get started!
