Creating Specific URLs in HTML Templates

What we need to do is to make it so that when you click on a post on the home page, it links to the individual post page that we made.

The way to do this is put an <a> element around each entire post. <a> element are what make links and so it will allow us to link to the individual post page. <a> elements look like:

<a href="/link/to/new/page">Optional Text</a>

The text inside called "Optional text" can be replaced with other HTML elements. Whatever goes inside of the <a> element will become a link to the page of "/link/to/new/page".

Another key point is that we have to make a link for each post inside of our index.html template for-loop. Thus, we'll be dynamically making the link based on the post.id. In our index.html we would make a link to a post as such:

<a href="/post/{{ post.id }}"></a>

The code for the html link is as follows:

<div class="container">
    <div class="row">
        {% for post in posts%}
            <div class="col-md-4">
                <a href="/post/{{ post.id }}">
                    <div class="image-post">
                        <div class="image-area">
                            <img class="image" src="{{ post.imgURL }}">
                        </div>
                        <div class="caption-text">
                            {{ post.caption }}
                        </div>
                        <div class="postedby-text">
                            Posted by {{ post.postedBy }}
                        </div>
                    </div>
                </a>
            </div>
        {% endfor %}
    </div>
</div>

Now when we go to the homepage, you'll see that each of the posts are clickable and link to to the individual post page!

Lastly, let's make it nice and fancy so that when we hover over the post, it changes the background color. We can do this in our index.css as such by adding the following styles:

.image-post {
    background-color: #d3d3d3;
}

.image-post:hover {
    background-color: #b3b3b3;
}

.image-post:active {
    background-color: #c3c3c3;
}

If we want to style how a certain HTML element looks when it is being hovered over by the mouse, we simply add :hover to the class or ID and style that. The :active suffix styles when the element is being clicked on.