Project: Photography Hacks

Context

This project was completed as an assignment for a course on Bootstrap. The subject for this assignment was of my choosing. I chose to create a site for photography enthusiasts. Below is a list of key features.

  • The site was to have at least 5 pages.
  • There was to be use of responsive layouts for mobile compatibility using Bootstrap. I was to include content, including text, imagery, and media, as well as responsive navigation.
  • There also needed to be the application of pagination buttons somewhere on the site.
  • The main site navigation was to include at least one dropdown menu.
  • Use of breadcrumbs for enhanced navigation.

Technologies applied: HTML5, CSS3, Bootstrap, Responsive Web Design, and Photoshop

Page Designs

Home

Layout for home page of Photography Hacks site

About

Layout for about page of Photography Hacks site

Galleries

Layout for galleries page of Photography Hacks site

People Collection

Layout for people collection gallery page of Photography Hacks site

Tip Videos

Layout for tip videos page of Photography Hacks site

Contact

Layout for contact page of Photography Hacks site

Mobile Layouts

Below shows how the indicated page layouts display on devices such as iPads and Tablets.

Home

layout for home page on ipads and tablets

People Collection

layout for people collection page 1 on ipads and tablets

Tip Videos

layout for tip videos page on ipads and tablets

Contact

layout for contact page on ipads and tablets

Below is a slideshow of all pages of the site, including the navigation and responsive media (video), as they would display on smartphone devices.

Home

layout for home page on smartphones

Navigation

layout for home page with navigation panel on smartphones

About

layout for about page on smartphones

Video

layout for fullscreen video on smartphones

Pagination Buttons

The galleries page leads to internal pages, of photo collections, between which the pagination buttons can be used to navigate. In this image, the user is on page 1, as highlighted in blue, of the people collection gallery. Also shown are previous and next buttons for the user to click.

screenshot of pagination buttons on people collection gallery page

Use Of A Dropdown Menu

The image below shows a dropdown menu under the galleries link for different gallery types with headings and partitions for organization.

screenshot of dropdown menu with styling

Breadcrumbs For Enhanced Navigation

Breadcrumbs (shown at the top of this image) typically appear horizontally across the top of a page. They provide links back to each previous page the user navigated through to get to the current page (contact page in this case).

screenshot of breadcrumbs link bar

< Go back to portfolio page