After doing the homepage, we’ll now be taking care of the projects page. In this lesson, I’ll give you the instructions for the projects page.

Previous Lesson: Lesson 41: Using ‘For’ Loop to Show Data from Models

After doing the homepage, we’ll now be taking care of the projects page. In this lesson, I’ll give you the instructions for the projects page.

This lesson’s another homework, or challenge you could say. Which means, you will do this on your own; you will squeeze your brains to finish this; and you will learn a lot! You’re going to create a new page in Django, and this time, it will be our Projects page!

“Why do I have to do this?” I just said it–you will learn a lot after doing this on your own. But, why will you learn a lot from this challenge? Because I know that all along, most of you guys were just typing and following along with me. And this lesson will stop you from doing so.

Instructions

So what you will do for this homework is just simple. These are the instructions for the Projects page:

1. Create an HTML file.

Remember, you should put this HTML file inside a templates folder, which is also inside the projects folder. And that’s what we have here:

We have created this a long time ago. That’s shy you shouldn’t be surprised that I have this on my computer. And, we have also tested this on our browser by typing localhost:8000/projects. So from our homepage:

ENTER:

“Why did this work?” It’s because we already have our projects/ path on the portfolio‘s urls.py here:

So, all you have to do next is to:

2. Get the Album template from getbootstrap.com

That’s here on the Examples, remember?

Now, you know what to do.

3. Beautify the NavBar

Yes, we’ll beautify the NavBar. That means that we don’t want this:

Instead, we want to have this as our NavBar:

Note: Since we are gonna have a new page, it’s better to create a new menu button too for the Projects.

6. ©Copyright

Yup, have the ©Copyright at the footer of the projects page. I think you know how to put that symbol.

7. Display the projects from the Projects model

It would be just like what we have here on our homepage:

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

Except that the contents of the cards are not hobbies anymore. Instead, these will be the projects. So, make sure that every project card has both its appropriate image and the summary.

That’s all. Do your best! If you have any questions, just post them down down below at the Comments section.

Next Lesson: Lesson 43: Creating the Projects Page in Django

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)

One thought on “Lesson 42: Instructions for the Projects Page”

Leave a Reply

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