Nano Reef Tank Creator's Guide

This guide is for people who want to start a nano reef tank but don't really dare due to lack of experience or because they find it too complicated. There are many guides on the web that are perceived as very heavy, which means that you easily lose interest. This guide will remedy that by simply describing how to do it in the most efficient and easy ways.

Over time, if more people start to get involved in saltwater aquarism, it could help to save the endangered reefs from extinction by taking care of the creatures that live there right now.

Features

Features on this page entice the user to start their own nano tank project. Through an airy, clear and responsive layout, the user can easily get all the information to them and see the value of it being so simple.

Existing Features

• Navigation Bar

  • Featured on the hero section, full responsive navigation bar includes links to the Home, Guide, and contact section.
  • Animation on both vertical and horizontal view due to different screen sizes for a great user experience.
  • This section will allow the user to easily navigate to the start of the guide or directly to contact section.
  • As it is a one page layout, with just 4 sections in main, no need for navbar to always appear.

• The landing page

  • The landing includes a background photo, title and paragraph, and a button that leads to first guide section.
  • The button make the user active, the animation effects creates a nice user experience.
  • Position is fixed to create a feeling of separate parts.

• Guide Sections

  • Different layout on all guide sections to make the page more interesting.

• The Footer

  • The footer is under development due to lack of time but it shows an idea of how it will look like with a contact form and icon links to social assets/images sites. Links will open in a new window.
  • The footer contact and social assets/images sites give the user several ways to keep in touch or find more information.

Features Left to Implement

• Footer layout that is not finished but is functioning
• Better resolution on hero bg image

Testing

Webpage is showing up nicely when testing it on different sizes in chromes developing tool.

Validator Testing

• HTML
  • Just a form duplicate error and an extra
    were found and corrected when passing through the official W3C generator
• CSS
  • No errors were found through the official Jigsaw generator

Unfixed Bugs

No bugs found.

Deployment

• The site was deployed to GitHub pages. The steps to deploy are as follows:
  • In the GitHub repository, navigate to the Settings tab
  • From the source section drop-down menu, select the Master Branch
  • Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.

The live link can be found here - Nano reef tank creator's guide

Credits

Content

• The text for the Home page was mostly written by myself and from my experiences
• The icons on the page is from Font Awesome

assets/images

• The photos used on the page are from Pexel and the authors is named in code comments