Love Running 23: Gallery Layout

Love Running 23: Gallery Layout


Now we’ll create our gallery page It’s good UX to consistently maintain elements such as headers and footers across a site. In the finished example, you can see that we have done just that. Our gallery has the same logo, navigation, footer layout and positioning as our home page. Users expect this. It makes the site intuitive. And intuitive means first-pass-learning. In other words, having visited the home page, the user quickly finds their way around the site. So let’s begin. Create a new project file called gallery.html at the same folder level as index.html. Once we’ve done that we will simply copy the contents of our index file, paste it into the gallery file, and remove the sections we don’t need. We want to keep not only the outer HTML but the header and footer. The easiest way to remove the unwanted code is to use repl.it’s handy utility that allows us to collapse the structural elements. The code will then look less busy and the structure is more obvious. We delete the three sections between the header and the footer. Because this code now represents the gallery page, we set the gallery navigation link to “active” and include a link to our newly created gallery page in our navigation. We also update the gallery link in our index page to enable the user to navigate to the gallery from the home page. Once we’re done doing that, let’s run our code to see if it all works. And it does The link to the gallery works, and when redirected we can see the header and footer elements are there as well. Next we’ll begin building the gallery itself.


Leave a Reply

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