Visit the deployed site: Legend of the Greek Gods
My initial idea for this project was to create an informative website about the Greek Gods. My target audience is anyone interested in Greek Mythology, this can cover a huge spectrum of ages, genders and interest levels. This ranges from children who want to learn about the Greek Gods, to anyone who wants to use the site for projects, to those who just want to read something fun and interesting.
-
The main features that I wanted to include are:
-
Easy to use navigation menu.
-
Easy to read information.
-
A black and gold colour scheme that stands out, but is not overwhelming.
The structure of the site was designed to be simple and easy to use and have a good content balance to not overload the user and give them enough information to not leave them lost or needing more knowledge.
-
The website is for the following user types:
-
Users that have no previous knowledge of the stories, history, or characters and see what they used to look like.
-
Users with basic knowledge of Greek history, who were looking for more information and to increase their knowledge base.
-
Users who have good knowledge of Greek history but want to refresh their knowledge and do some research or even just enjoy reading about the history of all the gods.
- The site needs to be easily accessible.
- The navigation menu needs to be simple to use on a range of devices, including desktop, tablet and mobile.
- Maneuvering around the site should be straightforward.
- The site should be informative and all the text should be easy to read.
- The images should be clear and not stretched or squashed.
- I want it to be easy to understand how to navigate throughout the site.
- I want the content to be easily read and understandable.
- To gather information for projects.
- To recommend the site to friends and family.
- To get in contact with us
My overall color scheme used throughout the site was gold and slightly off-black.
I chose these colours for my theme to represent the high status of the gods, which have been known to use gold in clothes, buildings, money and plenty of other items, I chose the off-black color to make the gold color stand out on the site.
I also used white text in the forms section on the Contact Us page.
Here are my wireframes for desktop, mobile and tablet for this project
I have used the following features in this project:
-
Hover
-
Tells the user the location of the mouse whilst navigating the menu.
-
Helps the user not lose their place.
-
Contact Form
-
Form validation requests the user to input the correct information in the input fields.
-
Avoids the user accidentally sending blank or incomplete forms.
| Bug Encountered | Bug Solution |
|---|---|
| None of the background images would fit on the screen properly, especially on the home page as the top of the image was getting cut off. | To fix this issue, I changed the background-position from background-position: center center; to background-position: top center; |
While running my code through W3C validators, I was given an error of duplicate attribute class. |
After closer inspection. I added img-fluid and d-block w-100 into one class=" " rather than splitting it between multiple class=" ", After checked all pages through the W3C validator, there were not further errors shown. |
This site was deployed using GitHub Pages with the following steps below:
- Login or Sign Up to GitHub.
- Create a new repository named "Legend-of-the-Greek-Gods".
- Once created, click on "Settings" on the navigation bar under the repository title.
- Click on "Pages", on the left-hand side below Secrets.
- Under "Source", choose which branch you wish to deploy, In most cases, it will be "main".
- Choose which folder to deploy from, generally from "/root".
- Click "Save", then wait for it to be deployed. It may take some time for the page to be fully deployed.
- The URL will be displayed above the "source" section in GitHub Pages.
If you need to make a copy of a repository:
- Login or Sign Up to GitHub.
- On GitHub, go to manni8436/Legend-of-the-Greek-Gods.
- In the top right corner, click "Fork".
If you need to make a clone:
- Login to GitHub.
- Fork the repository manni8436/Legend-of-the-Greek-Gods using the steps above in How To Fork a Repository.
- Above the file list, click "Code".
- Choose if you want to close using HTTPS, SSH or GitHub CLI, then click the copy button to the right.
- Open Git Bash.
- Change the directory to where you want your clone to go.
- Type git clone and then paste the URL you copied in step 4.
- Press Enter to create your clone.
If you need to make a local clone:
- Login to GitHub.
- Under the repository name, above the list of files, click "Code".
- Here you can either Clone or Download the repository.
- You should close the repository using HTTPS, clicking on the icon to copy the link.
- Open Git Bash.
- Change the current working directory to the new location, where you want the cloned directory to be.
- Type git clone and then paste the URL you copied in step 4.
- Press Enter, and your local clone will be created.
The W3C Markup and CSS Validators were used to validate my project to make sure there were no errors within the site.
| Code validated | Website Page | Validator Results |
|---|---|---|
|
 |
 |
|
 |
 |
|
 |
 |
|
 |
 |
|
 |
 |
| Code validated | Validator Results |
|---|---|
 |
 |
Click Here to view the full testing steps that were completed on every device and browser.
I have tested my website on both desktop and mobile, Overall I am pleased with the results however there is still room for improvement, by reviewing and possibly removing any unused code, eliminating render-blocking resources and using next-gen image formats like WebP and AVIF. With this feedback, I will look into improving my lighthouse scores, in particular on mobile.
Click here to view all lighthouse results
| Lighthouse Results |
|---|
 |
 |
 |
 |
 |
| Lighthouse Results |
|---|
 |
 |
 |
 |
 |
- I was very happy with my initial lighthouse scores.
- The issues reducing my performance scores are that I have a lot of images, including background images on all pages and also a huge amount of content on four pages.
- My mobile scores are lower due to the scaling down of images and text for use on mobile.
- While writing my code, I was careful to ensure that it was fully accessible.
- Every image has the relevant alt text applied to it.
- All text has good visibility on the background I chose.
- All images are shown in the correct aspect ratio, so as not to look stretched or pixelated.
- I ensured the site had all the relevant meta tags needed.
- All font sizes are legible on all screen sizes.
These images were used to depict the three main Gods in Greek Mythology.
| Zeus | Poseidon | Hades |
|---|---|---|
 |
 |
 |
Images for this project have been provided mainly by Wikipedia and Pinterest, A full list has been provided below.
| Background Images | Lesser Known Gods Images and Carousel Images | |||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
?file=Poseidon.jpg){kind=link}
| Text content on all Pages was copied and/or amended from the following sites |
|---|
I would like to give a big thanks to Chris Quinn for all his help, effort, guidance and patience he has provided during this project.
I would also like to thank Abi Harrison for all her support, and advice and for explaining things to me when I did not understand.