Customisation to extend models and the admin page

So far we’ve only covered the basics for creating your own models and how that can be presented within your website.

What we’ll be doing in this post is showing you how to make the most out of making custom models. Additionally, we’ll be improving the default Django admin page of our book shelf application.

  • Create a book model (with extra features)
  • Customise our admin page for the book model
  • Install a text editor plugin into our admin page to use its custom features

Create a book model

When working with models in our database, there are two specific files we need to work…

Controlling the direction of CSS Grid items

Live dev notes taken throughout the CSS Grid course by Wesbos —

By default, when the number of items exceed the explicitly defined tracks, those items get tacked onto the next row. This means by default:

grid-auto-flow: row

If we want the exceeded items to flow over into a new column, we can follow the process of:

  1. Define your explicit columns using grid-template-columns
  2. Change the direction of the auto-flow to columns, i.e. grid-auto-flow: column;
  3. (Optional) Define the auto width of the columns, i.e. grid-auto-columns: 200px;

Below is the addition of 3 items, now implicitly defined:


The difference and when to use it

Live dev notes taken throughout the CSS Grid course by Wesbos —

auto-fit , auto-fill and minmax() (more on this later) are Wesbos’ most used pieces of grid.

So far, we have been working with items that don’t have much content in them. Which is why it makes sense that we don’t see any problems when we start specifying widths and heights of tracks.

To see how auto-fit and auto-fill will be most useful for organizing content, let’s increase the amount of content within each of the items and add a border to the edges of the explicit grid.

Project case study — Building a responsive blog layout

Live dev notes taken throughout the CSS Grid course by Wesbos —

Today we look at building a Full Bleed Blog Layout inspired by Phillipp Rudloff.

Wesbos has provided us with a single base HTML file which also houses the base CSS at the bottom.

Below is what we’re working with.

CSS grid has shown it’s capabilities in application layouts, but in this project we tap into the benefits of using it for laying out text on a page.

To do this, we’ll turn the post into a grid with 3 columns, where:

  • Most of the content is going…

Considering responsive edge cases

Live dev notes taken throughout the CSS Grid course by Wesbos —

minmax() provides so much ammunition when combined with auto-fit and auto-fill because it has the power to replace a lot of the media queries written manually as it is responsive by nature.

Let’s take a look at a grid of 4 items distributed with a 150px width:

<div class="container">
<div class="item item1">Item 01</div>
<div class="item item2">Bonjour!</div>
<div class="item item3">Item 03</div>
<div class="item item4">Item 04</div>
.container {
display: grid;
grid-gap: 20px;
border: 10px solid var(--yellow);
grid-template-columns: repeat(auto-fill, 150px);

Now what if we reduced the…

How to get the most out of your templates

We’ve only covered a small part of templates in the previous tutorial. In this post, we’ll be diving deeper into the following:

  • Reference Static files (CSS, images, etc)
  • Using models with our templates
  • If statements
  • For loops

Referencing Static Files

Any static files require the following settings to be amended within :

STATIC_URL = '/static/'

If we wanted to add our own custom CSS to the website, we can do so by creating a separate CSS file and saving it into:

sitename > sitename > appname > static > appname > style.css

So we’ve created a static folder which follows the same…

Developing user experience through URL routes and templating

As you’re developing your website, it is important to understand that navigation is critical to the success of its user friendly experience.

For this reason, we need to build logic into how we switch between pages and how far we want our user to dive into the content, if it’s layered and multi-faceted.

While it might not seem much, the following post will cover:

  • URL patterns
  • Creating templates
  • Dynamic URLs

URL Patterns

We have already built a url pattern into our website, which doesn’t take in any custom value, yet. http://localhost:8000/ is the default url we are given from Django, but what…

Capturing and editing data on your website’s backend

Now that you have a website up and running, we can start to provide information for you to create, read, update and delete — Also known as CRUD. We can even send it to other places and pull from other sources as well.

  1. Django Admin
  2. Create a Database / Model
  3. Create, Read, Update and Delete Entries
  4. Using Python to manipulate the database

1 — Django Admin

But before we can even get into databases, we need to first have a look at the admin page of our website.

Every Django website we make has its own admin page, and every Django application will have…

Building your first Django website


Before you jump into building websites using Python and Django, make sure you have a grasp of Virtual Environments.

Process of building a Django Website:

  1. Installing Django
  2. Commands for setting up and running the website
  3. Folder Structure
  4. Creating a Django app
  5. Hello World

1 — Installing Django

To get into building with Django, we first need to install this package.

  • Open Command Prompt
  • Navigate and activate your virtual environment
  • Pip install Django
pip install Django
  • Verify that Django can be seen by Python. To do this, run Python in your Command Prompt
python>>> import django>>> print(django.get_version())
2.1.2 <-- This is what I am using at the moment.


Summary, Notes & Highlights

Beginning of April this year, I set out a challenge to learn CSS Grid in public as a way to solidify my understanding of learning a new topic with some form of accountability.

While the streak lasted for at least a month (yet, still having a couple more posts that I JUST finished recently), I reckon for the most part it was a successful outcome for the challenge.

Some things that I learned in the process:

  • I preferred watching chunks of each video at a time, then pausing to do the exercise. This forced me to explain in the post…

Emily Y Leung

Creative. Problem solver. Learning programming in public |

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