1 | Project Setup & Templates
Part 5 | Main Template
Overview:
Before we get into designing our template, let's first remove that blue background and image we have.
Your css file should be blank now and your store.html file should only consist of {% load static %} and <h3>store</h3>
Step 1 | Add HTML Boilerplate to main.html
00:17:51
Step 2 | Adding Viewport & Static
00:18:49
Now let's add a few things to the template that we want available on each page.
Just under <!DOCTYPE html> add load static so that we can add images and styling. Under <title> we want to add the viewport meta tag to make our website more mobile responsive (If you don't know what this is; it's ok, just add the tag) and finally our stylsheet that will be made available on every page that inherits from this template.
Viewport meta tag
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1" />
Step 3 | Adding Bootstrap
00:19:03
We will use Bootstrap for a lot of our styling and for the main layout. Let's go to https://getbootstrap.com/ and paste in the necessary css link and javascript links.
Add the CSS link inide the <head> tag and the javascript links just above the closing body tag.
View Source CodeStep 4 | Container/Navbar Placeholder
00:20:00
Before we add a navbar, let's add a placeholder into the template and ensure that all the pages are inheriting from the main template.
Inside the <body> tag let's first create a div with the class of "container" to center all the content inside the other templates.
Inside the div let's create a block tag for the pages, this is where content for all other pages will set. I added a <br> tag to create some separation between the content and top of the page.
For now let's just add an <h3> tag for the navbar placeholder. We will get to the real navbar in the next step.
Step 5 | Inheriting
00:21:04
Now we want to have all the other pages (store.html, cart.html, checkout.html) inherit from main.html. Let’s add the following code to each template but ensure the text inside the content blocks is still unique.
 |
 |
 |
Summary:
Each page should now contain the nav bar along with its name.
