Getting Started: Your First Web App
One of the best skills you can have at the moment is programming. But it’s often confusing and hard to get started. At school most professors will have you starting out with abstract concepts and build it out slowly. The problem with that is that most of the functionality you will learn won’t be used in the real world and you don’t actually learn most the important skill: building for your customer. I will try to teach you the skills you will need in the real world: making your software work, finding solutions independently, and keeping your clients happy. In these substacks we will teach you everything you need to know using realistic examples.
We will start out with building a website. At the end of this article you will have your own website live. Don’t be afraid if you have no experience programming, we will start from the absolute basics.
1. The Framework
For this project we will be using Django + docker. This will help you understand the most basic structure of 90% of software you will write. Backend/frontend, database management, etc.
To start off, make sure you have python installed. I recommend downloading anaconda right out of the gate (anaconda.com), it comes with everything you’re going to want. I also recommend installing and getting used to PyCharm. Anaconda comes with an IDE but most python developers use PyCharm so you might as well get used to it. Then, go to your terminal/console and install virtualenv. You can do this by entering the following command:
pip install virtualenv
To keep things simple: “pip install xyz” is how you download extra features for python. Virtualenv is a library that can be used to set up a small ‘virtual’ environment to work in. Make sure every project has its own virtual environment.
In the same console go to the directory you want to set up your environment in (just anywhere convenient is fine).
Tip:
Show all folders/files where you are (unix): > ls
Move to a folder in the directory you are: > cd foldername
Move out of your folder > cd ..
When you’re ready, create a directory for your virtual environment:
> python -m venv ./website
The ./ indicates that you’re creating the directory in the current folder. If you open the directory or type ls in the command prompt you should be able to see a new folder called ‘website’.
If you activate your virtual environment you should now see (website) appear in your command prompt. Activate your virtualenvironment:
> source website/bin/activate
From here, install django and make your project:
> pip install —upgrade pip
> pip install django
> django-admin startproject MySite
> cd MySite
> python manage.py runserver
You will get a message saying something along the lines of “development server at http://xyz press ctrl+c to quit”. Go to that domain in your browser and you can see your website:
This means that you can edit your website and it will be visible on this domain.
If we’re just building a website, you might be wondering why are using django instead of just writing html files or using wordpress. Eventually we are going to expand this website with things such as emails, user login, etc to build a full fledged web app. In practice this means much more than a Wordpress template or html files. Our goal is to show you how to build a complete product. This way you will learn to use html, css, python and all the other skills you need within the context of a real world application such as docker, aws, or git.
2. Building The Website
Now that the basics are set up we can start configuring our first URLs to set up the actual website. Let’s start by making a basic homepage. For this we will have to make our first app. Don’t worry if you have trouble understanding what’s going on. The main point is that you can 1. replicate these steps by copy-pasting and 2. write html files independently by following a design.
The way django works is by splitting up different functionalities into their own apps. This has the great advantage that 1. Your code is easy to test and read; 2. Your code can be reused easily.
Open a new command promt/terminal, navigate to your project folder again and enter the following command (don’t forget to activate your virtual environment again):
> python manage.py startapp BowtiedIslandThis will create a new directory in your project folder called BowtiedIsland with all the scripts you need to create your website properly. Open these scripts in your IDE (PyCharm or Spyder) and we can start editing them to build your website.
Note: I will denote which file we are editing with <!— /filepath/to/script.py —>, don’t add this to your python script
In the project folder, make a folder called ‘templates’. In your IDE you should be able to easily make html files in this templates folder, create an empty file called ‘home.html’ and one called ‘base.html’.
The following website will give you more information on what we’re doing: https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Home_page
Copy the following code into your base.html file:
<!— /MySite/templates/base.html —>
<html>
<head>
<meta charset="utf-8">
<title>{% block title %}MySite{% endblock %}</title>
</head>
<body>
<main>
{% block content %}
{% endblock %}
</main>
</body>
</html>Copy the following code into your home.html file:
<!— /MySite/templates/home.html —>
{% extends 'base.html' %}
{% block title %}Home{% endblock %}
{% block content %}
<p>Hello world</p>
{% endblock %}What’s going on here? base.html is a generic stencil that all other html files will build on. If we want to put a banner at the top of our website we don’t want to copy that onto every single file we write. Instead, our home.html can ‘inherit’ properties from our base html file with {% extends “base.html" %}.
The {% xyz %} style blocks are the django template language. This is what we can use to easily add functionality to our website, you can’t do that in html unless you’re using django.
Before we can see these pages on our website we need to tell django where to look.
Note: You don’t have to understand these steps as long as you can replicate them just by copy/pasting.
Edit the TEMPLATES in settings.py to contain ‘os.path.join(BASE_DIR, ‘templates’)’ under DIRS:
<! — /MySite/MySite/settings.py —>
Import os
…
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
…This adds a setting to our app so that the files in our ‘templates’ folder can be found.
Note: your website has probably stopped running from this, whenever it goes out just go back to the console that’s running your server and rerun the command: “python manage.py runserver”
Next, go to urls.py and add the path to your file:
<! — /MySite/MySite/urls.py —>
from django.contrib import admin
from django.urls import path
from BowtiedIsland import views
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.loadhomepage, name='home'),
]
What we’ve added to this file is the “path(‘’, views.home, name=‘home’)” line to our url patterns.
What does this do? It tells django that if someone wants to go to www.ourwebsite.com/ they should go to our script called views and run the piece of code called loadhomepage. It also tells us that this path has the name ‘home’.
Now if we try to reload our webpage it will tell us we can’t connect. In our console Django is telling us that the module 'BowtiedIsland.views' has no attribute ‘loadhomepage’. This means that when we load the homepage Django tries to run the piece of code we referred to called ‘loadhomepage’, but it doesn’t exist yet. This is good, it means that we have successfully told django where to look. (Remember this process of isolating actions and testing them, it will help you to find mistakes).
The final piece of the puzzle is writing that piece of code. If we go to the views.py we can write a very simple response:
<! — /MySite/BowtiedIsland/views.py —>
from django.shortcuts import render
# Create your views here.
def loadhomepage(request):
return render(request, ‘home.html')This is a very simple function that points you to ‘home.html’ when you activate it. If you’re new to coding this might be quite confusing so we’ll explain what this means.
You might have noticed that before being able to write a piece of code we need to write a line that states something like: from BowtiedIsland.views import loadhomepage’. This tells the computer to go to the folder called BowtiedIsland, open a file called views and grab the piece of code called ‘loadhomepage’. Over here we have defined what loadhomepage is, we’ve written a piece of code and given it a name. This is called a function and is written like this:
def function(argument):
do this
then this
return solutionEvery time the piece of code is activated the computer runs it, line by line, from the top. But, this piece of code is isolated. If it needs information from the rest of the software you need to give it to the function, as an argument. Finally, at the end of the function, you can choose to give something back to the software that ran the code, this is done with “return”. For now it’s fine to have just a conceptual understanding of this, if you want to understand more you can go to the python docs and play around with some functions in a jupyter notebook. The important thing now is that you understand *conceptually* what we’re doing so you can expand the website by copy-pasting.
Back to django, if you reload your website you should see a blank page with the text ‘hello world’ in it. This means we can start expanding our website with html!
3. Expanding The Website
While we’re building out the content of the website there are two things to keep in mind:
Any design changes should be made to our template ‘base.html’ so they appear across the entire website.
Whenever you link to a new page you should add it to ‘views’ and ‘urls’ as we did before.
Right now we will go through 1. How to add content to an html website. We will discuss 2. in the next substack.
Let’s take the bowtiedisland.com website as an inspiration for our website. What does the homepage look like?
The homepage consists of two main elements. The ‘template’ that you see across all pages, and the six rectangles that make up the content of the homepage. Let’s start by seeing if we can recreate the template in our ‘base.html’ file.
This will require three parts:
Image banner at the top
Menu buttons across the top underneath the banner
Black banner with address at the bottom
The first part is easy. Normally we would download the image and set up a way to reference images in our html files (quick explanation can be found here: https://www.mytecbits.com/internet/python/addding-image-django-web-app). This is how you would learn this step in school. BUT, in the real world you have clients and deadlines. When you’re building something like this in the real world you never want to build the final product right away, you first make an MVP (minimum viable product) and flesh out the details from there. While this is a very small thing it’s a good example, what if the client changes their mind and doesn’t want a banner anymore? Maybe they don’t want any images at all (unlikely but this is an example), then you’ve done extra work for nothing. That’s why we’ll set this up in the easiest way possible:
<img src=“link_to_image” >Just right click the image and select copy image link, replace that with link_to_image and you should be able to view the banner in your html page. We can always change the way we include images later on. For now, our priority is building our MVP. For now we will go with the simplest viable solution to all problems.
Let’s take this same approach with our menu bar. For now, all we want is a menu bar at the top with links. Eventually we want them to point to further pages, we also want them to look pretty. But for now, we just want something up there. Following this philosophy we can build it in this style:
<p><a href="">***NEW? Start HERE***</a> | <a href=“”>Crypto/Investing</a></p>What we’re doing here is just placing links next to each other. The links don’t actually send us anywhere yet, we will add that later on as we build out different pages to our website. Do this for all the links in the menu bar and you should see something like this:
We’re getting somewhere, but we need to centre the items. We can do that by blocking off parts of our code and telling the computer that this part needs to be centred. We do this with <div>.
<div style="text-align: center”>This line tells the computer that the following part of code needs to be centred in your browser. At the end of the part of code you write </div> to tell the computer that section is over. After this everything should be nicely centred.
Now for the final part of our template: the small black bar at the bottom. Sticking with the philosophy of minimalism. What would be the easiest way to do this? That would be to simply draw a black rectangle and write our text inside it.
The easiest way to do this would be to make another <div></div> block and color it in. We can do that like this:
<div style="width:100%;background:black;text-align: center;padding-top: 15px;padding-bottom: 15px”>Here we block off a piece of the website and tell the computer what it should look like. We say it should take up the full width of the computer, have a clack background, text should be in the centre and padded with 15px at the top and bottom.
We can then add some text with a white font and 15px size and we have our banner:
<p style="color:white;font-size:15px"px>Now we have our final template:
<—! /MySite/templates/base.html —>
<html>
<head>
<meta charset="utf-8">
<title>{% block title %}MySite{% endblock %}</title>
</head>
<body>
<div style="text-align:center">
<img src="###IMAGELINK###" width="690">
</div>
<div style="text-align: center; width:100%">
<p><a href="">***NEW? Start HERE***</a> | <a href="">Crypto/Investing</a> | <a href="">Investment Banking</a> |
<a href="">Fitness</a> | <a href="">Media Production</a> | <a href="">Art & Graphic Design</a> </p>
<p><a href="">Cooking</a></p>
</div>
<main>
{% block content %}
{% endblock %}
</main>
<div style="width:100%;background:black;text-align: center;padding-top: 15px;padding-bottom: 15px"><p style="color:white;font-size:15px"px>123 HFSP ST, NGMI 2035, Degen Island, USA | Email: admin@bowtiedisland.com Copyright © 2021 BowTied Island </p></div>
</body>
</html>Note: Replace ###IMAGELINK### with the url to the banner image.
This shows us the following homepage:
Looks pretty good for a first template. To practice getting the hang of html try to build out the home.html file to say more than ‘Hello world’. See how closely you can make it to the homepage of bowtiedisland.com. Remember to make it as simple as possible.
Like our navigation bar, we want to match the functionality in a minimum viable manner. Try to come up with the simplest solution to demonstrate this to our (fictional) client. If you’re feeling up for the challenge you can also try to build out the website with more pages and link to them in our menu bar.