Newgrange Monument

The purpose of the Newgrange website is to provide information to tourists and history enthusiasts. It provides a brief history of the monument and its cultural signiicancne, alongside a gallery of related images. Users can also find information related to booking tours and entering the winter solstice lottery

Features

Navigation

• Featured on the top right of the screen are links to the home, history, winter solstice, and gallery pages
• The links move from inline with the logo on desktop, to underneath it on mobile devices
• The black font contrast with the white background, making it easier to read
• The active page is underlined on the navigation bar
• The logo can also be used to link back to the home page
• I used the navigation code from the Love Running walkthrough project

Header

• The header shows an image of Newgrange and a remark about the monument to introduce it to the user
• The covertext contrasts the image and is placed on a transparent background to make it easier to read

About Newgrange Section

• This portion of the website gives a broad overview of Newgrange
• Its provided into three sections, "Ancient", "Cultural", and "Grand"
• These sections sit beside eachother on desktop and stack ontop of eachother on mobile
• It overlays another picture of Newgrange, and the contrasting text again sits on a transparent background for ease of reading

Visit Newgrange Section

• This section provides information about location and where to buy tour tickets
• This portion of the website is also split into two sections, one dedicated to different tours and one for location
• There is also an embedded google map link
• These sections sit beside eachother on desktop and stack ontop of eachother on mobile
• The black font contrast with the white background, making it easier to read

History and Winter Solstice

• The History and Winter Solstice pages follow the same layout as eachother for continuity purposes
• These pages give the reader a brief overview of the history of Newgrange
• Two paragraphs of text are layed out beside images relevant to the information
• The text and images contrast with the background for ease of reading and viewing
• On mobile, the images and text stack on top of each other

Gallery

• The gallery shows a few images relevant to Newgrange
• The images are layed out neatly at appropriate wdiths and heights so as not to appear stretched
• The images stack on top of each other on mobile
• The images contrast with the white background for ease viewing

Testing

• I tested and confirmed this website works on Chrome, Safari and Firefox
• I confirmed this project is responsive and functional on multiple screen sizes
• All text and images are easy to read

Bugs

• When I deployed my project to github pages I discovered that some of the pages didn't diplay properly on mobile
• This was because there was an error in my media queries, cutting off the bottom half the page
• I fixed this by adjusting the height for some of the divs on mobile

Testing

• No errors found on the official W3C HTML validator
• No errors found on the official Jigsaw CSS validator
• Performance score on the Lighthouse accessibility validator was originally very low due to long loading times. I increased the score significanty by converting some of the larger .PNG files to .WEBP files.

Unfixed Bugs

No unfixed bugs

Deployment

The site was deployed to github pages. In the settings of my repository I selected the pages section, sourced it from the master branch and and clicked save. Github then provided a link to the deployed site which can be found HERE.

Credits

Content

Media