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.
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 child template that inherit from this Base 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 child 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 — Ctrl+c and Run the server python manage.py runserver. By Reloading it in the browser you 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-templateLet 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):
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:
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
09#Step — Two other snippets: one goes at home.html and the other goes right after the navigations bar of base.html:
Complete blog/base.html Template 👈️
Complete blog/home.html Template 👈️
10#Step— Run the server python manage.py runserver:
GoTo localhoost:8000/
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
How to add Tailwind CSS to HTML? by themesberg.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
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 Pillow5- GoTo Step#01 of this tutorial.And you are good to go!
