• User stories

  • First time visitor goals

    1. The main purpose of this site is to provide an understanding of the eruptive history of the La Soufrière Volcano, along with a gallery and a donation page.

    2. This site consists of three pages:

       (1). The main page, this page will include the majority of the information about the volcano which can be accessed by scrolling from top to bottom.

       (2). The next page is the gallery, this can be accessed in the navigation bar, this is located in the right of the main page and the donation page. The gallery consists of multiple photographs and videos of the volcano.

       (3). The final page is the donation page. This can be accessed in the navigation bar, this is located in the top right corner of the main page and the gallery page.

    3. For users that are curious about the website's social media, this can be found at the bottom of the main page.

  • Returning visitor goals

    1. For users returning to the website, there will be frequent uploads of new content including more photographs, videos and information. Also new content can be found on the website's social media.

    2. Users can easily get in contact with us, by completing form located on the donation page.

  • Frequent visitor goals

    1. There is an option to sign up to a newsletter for frequent users which includes any major updates or uploads to the website. This can be found at the bottom of the main page.

    2. There is an alternative check box option when completing the contact us form on the donation page, to receive updates on new uploads and content which gives frequent users the chance to stay up to date with the website.

• Home Page Wireframe

  Link home page wireframes

• Mobile Wireframe

  Link home page wireframes

• Donation Page Wireframe

  Link home page wireframes

• Color Scheme

1. The main colours used were Darkslategray, Gainsboro, Skyblue and Black .

• Typography

1. The main font that was use throughout the website was Gideon Roman, whilst the headings had the font of Anton. These fonts for imported from Google fonts.

• Header

1. The header is consist of the logo and a navigation bar.

• Logo

1. The website is consist of a Home, Gallery and Donation page and each page has their out logo.

• HTML5
• CSS3

1. Github:

• I used GitHub to store date for my project when it was being development process.

2. Balsamiq:

• I used Balsamiq to create wireframes during the design process.

3. Google-Fonts:

• The main font that was use throughout the website was Gideon Roman, whilst the headings had the font of Anton. These fonts for imported from Google fonts.

1. I can confirm that the website's content is legiable and easy to understand.

2. I made use of the Chrome Developer Tools to view the website on a variety of screens such as ipad Air, ipad mini, pixel 5, iphone 12 and Nest hub.

3. I confirm that the website works on different browsers as I have tested it on Google Chrome, Safari and Opera mini.

• HTML

  I checked the HTML code using The W3C Markup Validation Service and there were no errors.

  

• CSS

  I checked the CSS code using CSS Validation Service and there were no errors.

  

• I checked the accessiblity using Google Chrome dev tools lighthouse.

• Bugs found and solved

1. The paypal button was in a different font to the other buttons.

2. The 1812 and 1979 image was not adjusting to different screen size because of a float property.

3. The newsletter input element, require atrribute was part of the name attribute.

4. Removed horizontal line from header.

5. Radio button was not functional as it was allowing me to select all the options without deselecting any.

The project was deploted to GitHub Pages using the following steps

1. Log in to GitHub and locate the Github Repository.

2. At the top of your Respository( not top of page), locate the "Settings" Button on the menu.

3. Scroll down the Settings page until you locate the "GitHub Pages" Section.

4. Under "Source", click the dropdown called "None" and select "main".

5. The page will automatically refresh.

6. Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.

• Thank you to Codeinstitute for supportive content along the way.

• Thanks to StackOverflow for alot of help.

• Thank you to W3school for alot of help.

• All content of the website came from research that I gathered.

• Most of the images come for the photographer Primewilson.

• My mentor Narender Singh for his support and help.

• Codeinstitute their tutor and student care support.

• The photographer Primewilson for photos/images.