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!
