Link to live Website

This is Portfolio Project 1 for Full Stack Developer Diploma taught through Code Insititute.

• I am not rewriting the README because this version shows the site as it was before I began making changes to 'finish' the site to the level I feel better represents my initial vision of the project.

The idea behind this website is to introduce people to the New Zealand Wars, this is part of history that was barely taught when I was at school. In an effort to improve the information around this subject the website is designed to deliver core information with external links to more indepth sources.

• As a first time user I want them to be caught by the images, and easy to use layout.
• As a returning user I want them to actively interact with the external links and investigate further into the site.

I have attempted to make this website as accesable as possible and as adaptable to various screen sizes.

The home page is designed to attract attention, I have used a large 'Hero Image' and colour that not only compliment the image but have a relaxing feel. The Hero Image selected is relavent to the content, as well as possibly drawing people to the site.

The secondary images I used are 'classsic' New Zealand images that people associate with the country. Alonside text that draws attention to the reasons why the site was designed.

The page is very wordy, by it's nature history often is, I have tried to break it up by using style elements to push bits around the page and added a couple of images, the page retains a logical structure despite the slightly random placing of elements.

I kept order by placing boxes around elements to define them, and draw them together at the same time.

Simulation of iPad mini on causes page.

This page acts as a sort of timeline, with a very brief rundown of the individual campaigns, the map image at the top is kept relatively small because it is a poor quality image, however it was the best I could find. While this page's details are brief there is an extensive 'external links' page with lots of extra sources of info.

Simulation of Samsung Fold (on the left), and Samsung s20 (on the right), on the campaigns page.

This page contains links to useful websites to extend knowledge base, and some useful publications, including a DVD set that remains the only documentary series on this subject ever produced.

Simulation of iPad Air on the external links page.

I based my colour scheme around the location and time period of the Wars, I used iColorpalette to find colours that matched my needs, while maintaining a suitable level of contrast for low vision readers.

Google fonts has a huge range of fonts, for this project I choose two fonts with the 'Sans Serif' fall back.

The font I choose for all the headers was 'Inter' it has a nice smooth look while being blocky enough to resize nicely aacross several header sizes:

The font I choose for all the text was 'Kavivanar', this font was an interesting choice, but it does work, it adds a nice periody,hand writen style to the text:

To highlight the sections within the 'External links and resources Page' I used a number of 'favicons', doing my best to use relavent images, I also used the 'classic' burger icon for the mobile menu drop down.

I have made the navigation bar as responsive as possible, it is fully interactable at all sizes, in the smallest form the menu operates from a classic 'burger' icon:

It opens up to look like this:

For screens 768px and larger the menu expands fully into a traditonal 'tab' style:

Each menu page connects with every other page.

I have done my best to make this project as responive as possible, elements move when the screen resizes, I will admit the code is not pretty as I would like however, I have done the best I can. There are several media querries to allow for multiple screen sizes.

I have done my best to ensure accessibility across all the tabs, I have included a google translate button on all pages, unfortunately I copied and pasted this element and do not really understand how it works so it maybe a little janky.

I have maintained a level of contrast between the text and background throughout so people with low-vision can read, with or without a screen reader.

• Add a consequences page, outlining both long and short term consequences of the wars.
• Expand the information on each of the pages to make the whole project feel more complete.
• Add more images to varous pages and sections, but must be non-copyrighted.

This is a list of technologies used during the construction and testing of the site:

• HTML to accomplish the structure of the website.
• CSS to style the website.
• Gitpod IDE to develop the website.
• Github To host the source code and GitHub Pages to deploy and host the live site.
• Git to provide version control (to commit and push code to the repository).
• FontAwesome Version: 6.5.1 Icons.
• Goggle Fonts For website fonts.
• Google Dev Tools For page inspection and checking website.
• CloudConvert For image conversion.
• TinyJPG For image compression.
• Favicon To create favicon for the website.
• iColorpalette To create the colour palette for the project.
• Am I Responsive To create mockup image for README.
• Google Chrome's Lighthouse to check accessibility.
• NVDA screen reader to access screen reader capabilities on website.
• Colorfilter to check website for colour-blind accessibility.
• ChatGPT used for spell checking, grammar, and readability.
• W3C HTML Markup Validator to check HTML code.
• W3C Jigsaw CSS Validator to check CSS code.
• Code Institute's Gitpod Template to generate the workspace for the project.

• Broken Image after deployment - reformatted the image to jpg.
  • This fixed the problem.
• A page was included that was not complete - removed it, added to future features section.
• Position of Google Translate after deployment - Played with settings in CSS.
  • fixed the problem.
• HTML failed validation - changed from 'ID' to 'class'.
  • fixed the problem, rechecked several times to make sure.

I have run tests checking accessibility of the site using:

• Screen reader - NVDA, this a standalone tool.

  • the screen reader could passably read the site and alt/aria tags, the pronunciation of the Maori words is interesting.

• Colour blind check

  • the site looked useable, and it was readable.
  • Test results:
    • Red/Green - red cone based
    • Red/Green - green cone based
    • Blue/Yellow - blue cone based
    • Greyscale

• Vision Imparied

  • the use of alt-tags and aria-labels throughout the document to maximise usage by vision impaired users.

I have checked the code using W3C HTML validator - No errors occured.

!I have only added the HTML screenshoot because every sheet had the same output!

I have checked the code wsing W3C CSS validator - No errors occured.

I have tried to ensure regular commits occured and that things have been commented correctly.

I have tested the website on four different browsers:

• Google Chrome

  • I have opened every page from every other page, all the links worked.
  • I have used dev-tools to test image links and alt tags, all showed correctly.
  • I have tested all the links on the external links page, making sure they conected correctly, all links worked correctly.

• Opera GX

  • I have opened every page from every other page, all the links worked.
  • I have used dev-tools to test image links and alt tags, all showed correctly.
  • I have tested all the links on the external links page, making sure they conected correectly, all links worked correctly.

• Firefox

  • I have opened every page from every other page, all the links worked.
  • I have used dev-tools to test image links and alt tags, all showed correctly.
  • I have tested all the links on the external links page, making sure they conected correectly, all links worked correctly.

• Edge

  • I have opened every page from every other page, all the links worked.
  • I have used dev-tools to test image links and alt tags, all showed correctly.
  • I have tested all the links on the external links page, making sure they conected correectly, all links worked correctly.

Outcome of testing I included the 'google translate' from W3 Schools.

• On Github navigate to the repository NZ-Wars-A-brief-overview

• Click Code drop down menu - a green button shown right above the file list.

• Copy the URL of the repository using "HTTPS", "SSH" or "Github CLI".

• Open Git Bash.

• Change the current working directory to the location where you want the cloned directory.

• Type "git clone", and then paste the URL copied earlier.

• Press enter to create local clone. A clone of the repository will now be created.

• For more details on how to clone the repository in order to create a copy for own use refer to the site: Cloning a Repository

• On Github navigate to the repository NZ-Wars-A-brief-overview
• Click Fork located towards top right corner on the GitHub page.
• Select "owner" for the forked repository from the dropdown menu under owner.
• It will create forked repo under the same name as original by default. But you can type a name in Repository name or add a description in Description box.
• Click on Create fork. A forked repo is created.

• Forking allows you to make any changes without affecting original project. You can send the the suggestions by submitting a pull request. Then the Project Owner can review the pull request before accepting the suggestions and merging them.
• When you have fork to a repository, you don't have access to files locally on your device, for getting access you will need to clone the forked repository.
• For more details on how to fork the repo, in order to for example suggest any changes to the project you can: Forking a Repository

This project was deployed to GitHub pages. The steps to deploy are as follows:

• Log into GitHub.
• Select NZ-Wars-A-brief-overview from the list of repositories.
• Select Settings From the Repositories sub-headings.
• In the left side menu select Pages from Code and automation section.
• Under the Source heading in the dropdown menu select main.
• A second drop-down menu should remain with the default value /(root).
• Press Save.
• A message that the website is ready to be deployed will appear, refresh the page and the link to the deployed site will be available in a green sub-section on the top of the page.
• Click on the link to go to the live deployed page.

Link to live website

• Ruapekapeka Pa Gate sourced from the history hits website.
• My own photos.
• National library of NZ - Various images Historic images.
• Almy - Various images Historic images.
• Getty Images - Various images Historic images.
• NZ wars documentary Prof. James Belich New Zealand Wars, I have got permission from Prof. Belich to use this media.

• W3 schools - for the google translate code. I also used this website for help with getting syntax right.

• I referenced The Code Institute Walkthrough project - Love Running, and the Coffee Coders project as references for parts of code, as well as flicking through the HTML and CSS sections to get the correct syntax.

I would like to acknowledge my partner for being incrediably understanding when I am working over weekends and late into the night.

I would also like to acknowledge my mentor Ronan for his help.