In order to assist us in identifying page elements we will be recreating for the Blog detail page, it would make sense to open up our mockup and review the layout and structure. The Blog page can be found in the Mockup
folder located in our exercise files. Begin by opening up the blog-detail.html
file within the browser, as shown in the following image:
The Blog detail mockup looks very similar to the Blog listing page, with the exception of a few new areas that were not present before:
First, we have replaced the teaser content with the full content of the post.
Second, we now have a new section below our main content that lists any comment threads, with a photo of the comment's author.
Third, we have a comment form that allows users to leave their name, a subject, and a comment for each post.
Having identified these three different components, we can now take a quick look at what our Blog detail page currently looks like and discuss the best way to tackle each...