#3 | First template and static files - Django tutorial

in guide •  8 months ago 


Welcome to the third part of the web application development guide in Django.



What Will I Learn?

In this article, we will create the first template and connect css to this template using static files.


  • Installed django (>= v. 2.1)



Tutorial Contents

First thing, let's connect the index.html template to the view. Change
return HttpResponse('Hello world!') into
return render(request, 'sockshub/index.html'). Your code in the views.py file should look like this:

from django.http import HttpResponse
from django.shortcuts import render

def index(request):
    return render(request, 'sockshub/index.html')

Now create a tree in the project folder named 'sockshub'. templates/sockshub/index.html

Now open the file index.html created a moment ago and enter the paste there:

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <title>Socks photos stock</title>
    <div id="navbar">
    <div id="container">
        My favourite socks: img

As you can see, the page reads the file correctly :) Now it's time to add some css - we will use the static file.

Create a new project with the command django-admin createapp personal while in the main application folder (where the manage.py file is located).

Now add 'personal' to INSTALLED_APPS in settings.py.

If you have the application turned on all the time, you will notice that after saving settings.py you will see a folder migrations in personal - that's good.
Create the tree, this time in the personal folder. static/personal/sockshub.css

Return to index.html and paste this in the 'head' tag:

{% load static %}
<link href="{% static 'personal/sockshub.css' %}" rel="stylesheet">

and edit the previously created sockshub.css file according to your own idea. Because of the lack of artistic talent i did it like this:

html, body{
    background: salmon;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    position: relative;
ul, li, ol{list-style-type: none; margin: 0;}
    top: 0;
    width: 100%;
    height: 35px;
    border-bottom: 2px solid #333;
    background: aquamarine;
#navbar > ul > li{
    float: left;
    width: 5vw;
    line-height: 2;

If you have an application running, you must restart it to load static files correctly.

That's it. Have fun with your app ;)


Proof of Work Done


In the next article I will describe models and admin panel, Cya.

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

This post has received a 8.26 % upvote from @boomerang.