Learn Django

Add Static Files

In the previous lesson you configured Django to serve static files. In this lesson you'll create the static assets required in this project.

Step 1: Install Bootstrap

As a quick introduction, Bootstrap is a front-end framework that makes it easier to implement and manage the visual design of websites and applications. Instead of writing a custom CSS file, you can use Bootstrap to rapidly apply styles to HTML elements.

Bootstrap comes with a set of default styles i.e. colors, fonts, etc. You can use these default styles, or customize them to your liking. The course project uses a customized version of Bootstrap that has already been created. Follow the below steps to set it up.

Create the CSS Bootstrap File

Install Bootstrap's CSS file.

  1. Navigate to the /.../crmeasy/crmapp/static/css folder and create a file named bootstrap.min.css
  2. Open the Bootstrap CSS file and copy all of its contents
  3. Paste the contents from Step 2 into the bootstrap.min.css file

Create the JS Bootstrap File

Install Bootstrap's JS file.

  1. Navigate to the /.../crmeasy/crmapp/static/js folder and create a file named bootstrap.min.js
  2. Open the Bootstrap JS file and copy all of its contents
  3. Paste the contents of Step 2 into the bootstrap.min.js file

Step 2: Install jQuery

jQuery is a JavaScript library that, according to its website, "makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers".

It will be used in this course to make the course application feel like a desktop app. With jQuery we can do things like submit and fetch data to and from a server and display it inline without refreshing the page.

Follow these steps to install jQuery.

  1. Navigate to the /.../crmeasy/crmapp/static/js folder and create a file named jquery.min.js
  2. Open the site's version of jQuery and copy its contents
  3. With jquery.min.js open, paste the contents into it from Step 2

Step 3: Add Custom JS & CSS Files

The CRM Easy application uses custom JavaScript (JS) and CSS files. Teaching how JS and CSS work is out of the scope of this course. Instead you'll download the full built files and install them into the project. Follow these instructions to do so.

Install the JS File

The first step is to create and populate the JS file. Follow these steps to do so.

  1. Navigate to the /.../crmeasy/crmapp/static/js folder
  2. Create a file in this folder named app.js
  3. Open the site's JS file, copy its contents, and paste it into the file from Step 2

Install the CSS File

The second step is to create and populate the CSS file. Follow these steps to do so.

  1. Navigate to the /.../crmeasy/crmapp/static/css folder
  2. Create a file in this folder named app.css
  3. Open the site's CSS file, copy its contents, and paste it into the file from Step 2

Step 4: Add Images

This project uses several image assets. Follow these steps to download and place the images in the right location.

  1. Download the image zip file here
  2. Unzip the file and copy the files to /.../crmeasy/crmapp/static/images/

Step 5: Add Fonts

A custom font family is used in this project.

  1. Download the font zip file here
  2. Unzip the file and copy the files to /.../crmeasy/crmapp/static/fonts/

Step 6: Commit Changes

Execute these commands to commit your changes in Git.

1
2
3
4
5
# add files
(venv)$ git add .

# commit files
(venv)$ git commit -m "added static assets"

Track your progress with a free account