Learn to Code via Tutorials on Repl.it!

← Back to all posts
Learning Web Development w/ Python Part 1
ArchieMaclean (932)

Learning Web Development with Python and Django

Part 1

If you already know a bit about web development, then check out Gareth Dwyer's Tutorial. This tutorial is intended for beginners, and takes things a bit more slowly.


In this tutorial, I'm going to be teaching you how you can use the Django web framework to make your own web apps with Python.


For this tutorial, you should have a decent understanding of Python. Knowing some HTML and CSS helps.

The Client and the Server

Before we can start coding our own web app, we need to know a little of how the internet actually works - clients and servers.
Servers are basically the computers that 'run the websites'. Each website has its own server (in reality, large websites have lots of servers). Each server has its own domain name, e.g. www.google.com or www.repl.it.
Clients are computers that connect to servers - i.e. people who visit the website.

How do Clients connect to Servers?

This depends largely on what protocol is being used. The most common protocols are http (hyper-text transfer protocol) and https (secure hyper-text transfer protocol). On a very basic level, what happens is:

  • The client sends out a message saying "I want to see this page on this website, my address is xxxxx".
  • The message arrives at the server.
  • The server checks which page to send and then sends it back in the form of html (and often other filetypes, but we will be focusing on html here).
  • The browser of the client interprets the html to give a visual output.

How does this apply to Django?

When we use Django, we're basically writing our own server. Django takes care of all the sending and stuff, all we have to do is add our pages, and put them in a place Django can find them.

By now, you'll be itching to write some code, so lets get started!
When you create a Django project on repl, there is already some code in there, so I have made a basic template which has the bare minimum. Open the template, and click the fork button at the top to make your own copy.


You can now rename it to hello-world (or something else if you prefer).

Creating your very first app

Before we make any changes, you can click the square icon in the top right of the view panel:


This will open the page in a new tab so you can see the fullscreen version of it. You should get a page like this:


This is just the standard Django page, which appears when you haven't written any code yet.

Creating our first web page

When you type in a URL (such as https://ww.repl.it/languages/python) on a browser, there are three parts:

  • Protocol - almost always http or https.
  • Domain name - looks like www.repl.it/.
  • Page name - looks like languages/python, and is after the domain name.

With our project, we don't need to worry about the domain, because repl creates one for us to use (in the form <repl-name>--<username>.repl.co). However, we will need to think about our page names.

URLs and Views

There are 2 parts to displaying a page on Django - the URL, and the view. The view is what the client will see when they visit the page.

Writing our view

For this first project, we will be using function-based views. This means that each view is a Python function.

Navigate to the views.py file, and add the following code:

from django.http import HttpResponse

def homePageView(request):
  html = "Hello, World!"
  return HttpResponse(html)

So, what does this code do?

Line 1 imports HttpResponse , which we will need in order to return the html in the correct format.
On Lines 3-5 we create our view.

  • Line 3 - this is our function, called homePageView, because it will be the homepage of our website. It takes request as an argument - for more advanced projects, you will use request in your function, but we don't need to worry about it right now. request is a request object, that carries information about the request for the page.
  • Line 4 - this is the html for the website. This is extremely simple hmtl - it doesn't have any tags, all it has is the text "Hello, World!".
  • Line 5 - this is where we return the html, in a form Django can understand (HttpResponse)

If we run this code, we get...nothing! The reason for this is that Django doesn't know what to do with the view.

Adding the URL (Page name)

We need to tell Django where the view should be displayed.

Navigate to the urls.py file, and add the following:

from .views import homePageView

Then change urlpatterns to:

urlpatterns = [
  url(r'^admin/', admin.site.urls),

Before we analyse the code, go to your website (in the other tab), and refresh. You'll see we got we wanted!


So how did this happen? Let's look at the code.

from .views import homePageView

This imports our homePageView function from the view.py file. The period . at the start tells Django to open it from the current directory (main). This is needed because the code will be run from somewhere else, so Django could get confused and try to import it from a different folder.

In urlpatterns we added


(Note that '' is 2 single-quotes, not 1 double quote)

This tells Django to treat it as a url. There are 3 arguments given:

  • The first ('') is the page name, which I described earlier. If it was something like about/aboutme then the page would be located at https://domain.name/about/aboutme (replacing domain.name with the domain name, obviously). However, it is just '' so the view will be located at just https://domain.name/.
  • The second is our view that we created in views.py and imported earlier.
  • The third is the name we give our page. It is not essential, but will come in useful later when we want to keep track of all the pages.


You've made your first web page with Django! It may seem a bit convoluted right now, but this format is very helpful when we make bigger web applications and have many files.

That concludes Part 1

In Part 2, we will be looking at the more powerful class-based views, as well as multiple pages in out project.

Please upvote if you found this tutorial helpful, it supports me and lets me know that you want more! If you have any questions, post in the comments and I (or someone else) will answer them.

DimTech (1)

exit status 127
The Hello, World! doesn't appear
check here: https://repl.it/@DimTech/Basic-Template-2
what's going on?

ArchieMaclean (932)

@DimTech When I forked the repl, it started working for me. Could you try forking the repl to see if that works for you? Thanks.
It seems to be a problem with repl.it rather than any code you wrote.

DimTech (1)

Happy new year!
Possibly it's repl.it's problem, because it shows thw same error in every django project I create...

ArchieMaclean (932)

@DimTech That does sound like a repl.it problem. Have you tried filing a bug report?

FlakaHaxhani (1)

when I refresh the website it says: "Hmmmm.... We Couldn't Reach Your Repl
Make sure your repl has a port open and is ready to receive HTTP traffic."

ArchieMaclean (932)

@FlakaHaxhani Try refreshing the repl or closing the repl and reopening, then restarting it?

FlakaHaxhani (1)

@ArchieMaclean I've made another repl and did the different codes but it says the same

ArchieMaclean (932)

@FlakaHaxhani Could I get the repl link? Thanks.

ArchieMaclean (932)

@FlakaHaxhani I'm getting this error when I run it:

This is because your import statement must go before any code. So this produces an error (in urls.py):

Try moving the last import statement up to above urlpatterns.

FlakaHaxhani (1)

@ArchieMaclean so do i have to type in parentheses because "homePageView" is in black font. Haha Im sorry if i annoyed you with my questions.

ArchieMaclean (932)

@FlakaHaxhani Just move the from .views import homePageView up to the top of the file :)

FlakaHaxhani (1)

@ArchieMaclean like that? Because the page still says that I haven't configured any URLs

TrialledBot (0)

whoa thats amaaaaaazaaaaang

TerenceToledo (0)

Hi, I forked the template and follow the tutorial but the hello world is not showing up. It says the Repl is restarting. Here is the link

ArchieMaclean (932)

@TerenceToledo Try forking it again? Web Repls can be temperamental sometimes.

CodingGoose (698)

Thank you! I have been wanting to learn python web development for some time, nut the tutorials I found were very complicated and I didn't understand. This tutorial is absolutely great!


But I think Flask flamework is better...

ArchieMaclean (932)

@Zuhdi28 Flask is definitely more flexible. With Django, it is very easy to create an app very quickly, so long as it is a 'normal' app (standard MVC).

In Django, you can create a production app in less than a day.

However, if you want to make something that is a bit more unique, then Flask is better. Flask also has more libraries.

Django has better documentation, I think.


@ArchieMaclean Ok...
No problem...

phillipwong (0)

Great work. The way to learn anything is start with something simple, and build to understand!

janimanthan80 (0)

that's cool, This is the best way to learn web development with python