In this lesson, we’ll build up our Blog page using the blog template from Bootstrap. I’ll show you how to do it, step-by-step.

Previous Lesson: Lesson 44: Creating the Blog Page in Django

In this lesson, we’ll build up our Blog page using the blog template from Bootstrap. I’ll show you how to do it, step-by-step.

Now let’s start putting a little work here on our blog page:

This image has an empty alt attribute; its file name is Screen-Shot-2020-03-19-at-7.51.22-PM-1024x640.png

We don’t want this; we just did this to test this page. Instead, we want to have the look we have drawn on our sketch:

Alright. So we want it to look like that. Now let’s go back to getbootstrap.com and look for the Blog in the Examples:

Click on Blog:

This could work. But we still need to edit a lot of things here to have what we want. Now, how will we copy the code for this template? Command + Option + U or Right mouse click + View Page Source:

Select, Copy, and Paste

Now, Command + A or Ctrl + A (to select all) and then Command + C or Ctrl + C (to copy all the code). And finally, delete this line of code here on our blogs.html:

And then we’ll do a Command + V or Ctrl + V (to paste):

Let’s take a look at our website:

Why does it look like this? Well, that’s because we haven’t copied these BootstrapCDN yet:

We’ll copy this CSS code here:

This CSS code is responsible for the design and layout of our website. Where are we gonna paste this code? Here on Line 15, we’ll delete this:

And then we’ll paste by hitting Command + V or Ctrl + V:

Nice. This should make our website look more cooler:

Pretty cool huh? We now have the blog template on our computer! But we are not done yet. We still have something that we need to copy from Bootstrap. That’s this JS code:

This code is responsible for the behavior of a website. For example, Javascript (or JS) is responsible of menu bars and NavBars. Now, hit Command + C or Ctrl + C (to copy) and then we’ll go straight here on our blogs.html‘s ending footer tag:

And then we’ll paste it here under the footer tag like this:

Good. Refresh:

This image has an empty alt attribute; its file name is Screen-Shot-2020-03-20-at-7.15.26-AM-1024x640.png

After we have copied all these, let’s commit this change to GitHub:

Good. On the next lesson, we’ll start making this website beautiful, starting with the NavBar. See you there!

Next Lesson: Lesson 46: Beautifying the Blog’s NavBar

This article was written by Zeddrix Fabian

Zeddrix Fabian became one of Jehovah’s Witnesses on February 21, 2016, and started regular pioneering last March 2020. He wants to volunteer at Bethel⁠—that is his goal. After going to both private and public school for 10 years (Grade 1 to 8 in private; Grade 9 and 10 in public school), their family started trying homeschooling when he leveled up to Grade 11 last 2019. (Continue reading on ABOUT ZEDD menu)

Leave a Reply

Your email address will not be published. Required fields are marked *