Jungletronics
Published in

Jungletronics

A Django Blog In VS Code — Bootstrap, Tailwind CSS, Template Inheritance

How To Create A Blog in VS Code — Part III — DjangoSeries Episode # 06

Hi! How can I make my html page more attractive?

Answer: by using template inheritance.

Today, designing a website goes beyond aesthetics to include the website’s overall functionality.

Themes: BOOTSTRAP - TAILWIND CSS - TEMPLATE INHERITANCE - TEMPLATE DESIGN - HTML DESIGNPoint 1: Why is dry so important in HTML?;
Point 2: How can I improve my website design?
Point 3: How to Use Bootstrap & Tailwind CSS to help us out?

Before we can work with forms, requests, responses…there is one thing about our templates that isn’t very good design right now.

So if you notice our home page template and our about page template have a lot of similar repeated code.

Comparison home.html X about.html

And that is never good in programming because it means if we want to update one of those sections then we would need to update it in every location so for example if we wanted to change our default title for our website then we would have to make that change in both the home and about templates and the more pages that we have with repeated code the worse that problem would be so it would be better to have everything that is repeated in a single place.

To accomplish this we can use something called template inheritance.

Django’s template language is designed to strike a balance between power and ease.

A template is a text file. It can generate any text-based format (HTML, XML, CSV, etc.).

A template contains variables, which get replaced with values when the template is evaluated, and tags, which control the logic of the template.

Let´s get Started:

00#Step — This is a continuation of this post; get there and you are ready to fly on your own.

01#Step — Create a new base.html at blog/templates/blog/ directory, and type:

block content is used for overriding specific parts of a template.

In our case, we have a block named content and this is supposed to be overridden by children that inherit from this template (step#2).

That’s where the power of the templates comes from in a sense.

02#Step — Modify home.html to:

Then the base parent is inhered by home children's template. This block content will subscribe the placeholder block of base template.

03#Step — Modify about.html to:

Now we can see that this is all that we’re left with so we can see that we have a lot less code in both our home template and our about template and both of them are using this based on HTML template.

04#Step — Run the server python manage.py runserver

Reload it in the browser and still have the same pages that we had before; here is the output of my Terminal:

Microsoft Windows [versão 10.0.19042.1466]
(c) Microsoft Corporation. Todos os direitos reservados.
C:\Users\giljr\new_django>c:/Users/giljr/new_django/djangoEnv/Scripts/activate.bat(djangoEnv) C:\Users\giljr\new_django>cd django_project(djangoEnv) C:\Users\giljr\new_django\django_project>python manage.py runserver
Watching for file changes with StatReloader
Performing system checks...
System check identified no issues (0 silenced).February 02, 2022 - 20:06:18
Django version 4.0.1, using settings 'django_project.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
[02/Feb/2022 20:06:21] "GET / HTTP/1.1" 200 367
Not Found: /favicon.ico
[02/Feb/2022 20:06:21] "GET /favicon.ico HTTP/1.1" 404 2455
[02/Feb/2022 20:06:27] "GET /about/ HTTP/1.1" 200 175

As you can see, everything is fine!

05#Step — The Powerful Booststrap!

Bootstrap is a Sleek, intuitive, and powerful front-end framework for faster and easier web development.

GoTo this page -> Starter template:

https://getbootstrap.com/docs/5.1/getting-started/introduction/#starter-template

Let me show you why this is so powerful so let’s say that we wanted to now update our entire website to use bootstrap now if you don’t know what bootstrap is basically it’s an extremely popular library that makes it easy to add some nice styles to your website.

We need to add a few things, mainly in head and at the end of the body of base.html:

<head>
<!-- Required meta tags -->
<!-- Optional JavaScript; choose one of the two! -->
</head>
<body>
...at the end add:
<!-- Option 1: Bootstrap Bundle with Popper -->
<script>...</script>
</body>

So we should just be able to drop this starter template into base template and we’ll be good go.

Modify base.html to (I just copy and paste all above and after the title):

Use This HTML Boilerplate as a Starter for Any Web Page. You’ll avoid code repetition by using template inheritance.

See that I add tailwind CSS script and JavaScript too.

Tailwind CSS is incredibly performance focused and aims to produce the smallest CSS file possible by only generating the CSS you are actually using in your project. Combined with minification and network compression, this usually leads to CSS files that are less than 10kB, even for large projects (I prefer it instead to have to use static .css file:/

So Far, So Fine, So Good!

06#Step — Run the server python manage.py runserver:

Know what! Bootstrap is working!
It worked, it sold!

Both of those pages is affected, because both templates are inheriting that single base template (you control all script from base.html — Awesome, right?).

We can see that now we have some padding and some margin changes. Bootstraps is working fine!

07#Step — Now its time to embellishing our website. From now on I’m going to grab this code from some code snippets so you don’t have to watch me type all of this out.

The first snippet will be navigation bar (put this code in base.html right at the beginning of the body):

08#Step — Run the server python manage.py runserver

Navbars and their contents are fluid by default.

09#Step — Two other snippets: one goes at home.html and the other goes right after the navigations bar of base.html:

home.html snippet
base.html snippet — the rendering of the previous snippet will be pass to this template

10#Step— Run the server python manage.py runserver:

GoTo localhoost:8000/

This is my result. A minimalist, colorless, unpretentious, modest, and discreet elegance of a website. I like it! What do you think about?

See that register and login are disabled. We haven’t created those routes yet so we can’t use the URL tag with those yet because if we try to use the URL tag with a URL that doesn’t exist then we’ll receive an error so when we create those login and register routes in a future post.

That’s all Folks!

In the next #DjangoSeries Episode we will answer: How do I customize registration in Django?

Answer: Forms & Validations

See you around. Bye!

👉 git

Related Posts

Related Posts

00#Episode — DjangoSerie — Django Intro — How To Build your First App in Python Django Framework — DjangoSeries

01#Episode — DjangoSerie — Django MTV In VS Code — How To Install Django Inside Virtual VS Code

02#Episode — DjangoSerie — Can You Solve This in Python? — Here is A Basic Python Question!

03#Episode — DjangoSerie — JUNGLE-DJANGO Webpage! This Is My New Django Netflix Clone Page!

04#Episode — DjangoSerie — A Django Blog In VS Code — Quick Start!Part_I

05#Episode — DjangoSerie — A Django Blog In VS Code — Database, Migrations & Queries — Part_II

06#Episode — DjangoSerie — A Django Blog In VS Code — Bootstrap, Tailwind CSS — Part_III (this one :)

07#Episode — DjangoSerie — A Django Blog In VS Code — Forms & Validations — Part_IV

08#Episode — DjangoSerie — A Django Blog In VS Code — Login & Logout — Part_V

09#Episode — DjangoSerie — A Django Blog In VS Code — Upload Profile Picture — Part_VI

10#Episode — DjangoSerie — A Django Blog In VS Code — Update & Resize Picture — Part_VII

11#Episode — DjangoSerie — A Django Blog In VS Code — Class-Based-View & CRUD — Part_VIII

12#Episode — DjangoSerie — A Django Blog In VS Code — Posts Pagination & Quick DB Population — Part_IX

13#Episode — DjangoSerie — A Django Blog In VS Code — Self-Service Django Password Reset — Part_X

14#Episode — DjangoSerie — A Django Blog In VS Code — Heroku Deploy — How To Push Your Site To Productio — Part_XI

Credits & References

The Django template language by djangoproject.com

What is Web Design? The Ultimate Guide To Website Design [2021] by Robin Gandy

WHY DJANGO IS YOUR WAY INTO MACHINE LEARNING by Published by Marcelo de Almeida

UI/UX Principle #29: Color Has Meaning by Jeff Dance

Don’t repeat yourself by wikipedia.org

How does Instagram use Django? by quora.com

Find your new favorite web framework by hotframeworks.com

More about Django:__Django is designed to help the developers make an application as quick as possible.__For error reporting in Instagram, Sentry is used which is an open source Django app written by the team at Disqus. A database of 5 million users is managed by Django ORM in the year 2010.__Django is the core of Instagram.__Although a massive 5 million users is managed by Django ORM now, Instagram starts quickly as it is accessed because it uses Django which is tightly integrated.__The ORM can be replaced if Django is loosely coupled enough. The fun fact is that all Instagram and Facebook employees are allowed to contribute code to Django.__The whole of this amazing platform is written entirely in Python. To be precise Instagram features the world's largest deployment of Django web framework.

‘Mens sana in corpore sano’ by the Roman poet Juvenal 55 AD

Step-by-step — simple and sharp!
HowTo Run this Tutorial - From the Scratch - In your Machine:)Annotations: Quick Start - video #TakeTheFirstStepToLearnDjango0 - Download DJG_<previous>/Django_project from my git repo;
1 - On your desktop, create a dir and named it as Tutorial_#;
2 - Inside this paste the previous Django_project file;
3 - GoTo vscode Terminal (command prompt) and ...
4 - Run this quick_script
(copy/paste inside you terminal and hit enter and wait until
Pillow is up and running...):
python -m venv djangoEnv
djangoEnv\Scripts\activate
python -m pip install --upgrade pip
python -m pip install django
python -m django --version
pip install django-crispy-forms
pip install Pillow
5- GoTo Step#01 of this tutorial.And you are good to go!

--

--

--

J of Jungle + 3 Plats Arduino/RPi/Pic = J3

Recommended from Medium

Employ These Temporary Email Services For Free

ZS Associates Interview Experience

MSSQL Server Current Queries (Ultimate Script)

Technical Debt

Python for Absolute Beginners

Why Should Businesses Choose Flutter

What you need to know about Winible’s presale

What I Learned From Being a TA for an Intro to Python Class

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
J3

J3

Hi, Guys o/ I am J3! I am just a hobby-dev, playing around with Python, Django, Lego, Arduino, Raspy, PIC, AI… Welcome! Join us!

More from Medium

Django Tutorial #1: Setup the Project

A Django Blog In VS Code — Authentications, Login & Logout

Django Social Authentication: Login With Google

Build a simple To-Do List App with Django