This is an educational website designed to inform users about the Vikings during thier time in England. It has been designed to be interactive and informative for three user groups, first time visitors, Students and History Enthusiast

• As a First Time Visitor, I want to easily understand the main purpose of the page and learn more about the Vikings.
• As a First Time Visitor, I want to be able to easily navigate throughout the page to find content.
• As a First Time Visitor, I want the page visually appealing.

• As a Student, I want to find information about the vikings that aids my understanding.
• As a Student, I want interaction to make learning fun and accesible.
• As a Student, I want imagery to assist with the written theory.

• As a History Enthusiast, I want to explore the areas of England.
• As a History Enthusiast, I want to understand the underlying situations in England.
• As a History Enthusiast, I want to clarify the order of events during the vikings time in England.

The main colour used for the site was teal, this was inspired by the Assassin's Creed Valhalla video game. Text colour was predominantly a charcoal black with the Title being dark blue.

Two font styles were used on the site, courtesy of Google Fonts, the most predominant style was Raleway with the fallback of sans-serif and the other style used on headings was Rye with a fallback of cursive. The developer chose Rye as the heading font to create a sense of history for the user. The Raleway font was chosen for its clean readability and modern look, which to the developer made it a good choice to make the site accessible for users with a visual impairment.

The developer wanted to integrate some of the common viking imagery on the page. The first instance of this is found in the heading where the pictures of viking dragon art are positioned either side of the title. This was done with the intent of making the title look like either a viking helmet with horns or a longboat with the pictures acting as the bow and stern. Next the brand image of the navbar is a viking longboat a common image closely link to the vikings, this is to reinforce the page theme. Finally, on the timeline navbar the dates are preceeded by the icon of either a raven (crow) or a dragon. The flying raven was the image on the sails of Ragnar Lothbrok's clan, and the dragon represents Jörmungandr (the midgard serpent) and symbolised chaos and destruction.

1. Desktop

2. Tablet

3. Mobile

• Responsive on most devices sizes from 1366px-width and lower - this includes mobiles, tablets and laptops
• Interactive elements (Burger menu (mobile devices only), Google Maps and markers, accordion, timeline, longboat animation)

Technologies Used

HTML5 CSS3 JavaScript3

• Bootstrap 5.0: Bootstrap was used to assist with the responsiveness and styling of the website. Specific features include - navbars, burger menu and accordion.

• Google Fonts: Google fonts was used to import the 'Raleway'and 'Rye' font into the style.css file which is used throughout the page.

• Font Awesome: Font Awesome was used on the navbars to add icons for aesthetic and UX purposes.

• jQuery: jQuery came with Bootstrap to make the navbar responsive. It was also used in script.js to develop parts of the functions used on the page.

• Git: Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.

• GitHub: GitHub is used to store the projects code after being pushed from Git.

• Balsamiq: Balsamiq was used to produce wireframes during the design process.

Testing

The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project.

The Markup Validator highlighted 5 warnings which all related to specifing the script format as "text/javascript". The developer has left this, as they have been taught this to be good practice.

The result of the CSS validator highlighted 17 errors, these errors are associated with Bootstrap 5's CDN, which the developer does not have access to.

When code was passed through JS Hint no major issues were flagged. 18 warnings were flagged the majority regarding use of extensions, however the developer didn't wish to add these to improve loading. There was one warning regarding 'not using new for side effects', however this is part of Google Maps implementation and thus the developer doesn't wish to edit this.

Testing User Stories from User Experience (UX) Section

• As a First Time Visitor, I want to easily understand the main purpose of the page and learn more about the Vikings.

Upon arriving at the page the title immediately gives the user an overview of the page content.

The options on the menu give further depth into what can be expected from the content.

The user can then find informaion about the vikings throughout the page starting with the summary paragraph, through to the timeline

• As a First Time Visitor, I want to be able to easily navigate throughout the page to find content.

The user can easily navigate through the page wherever they are on the page. At the top of the page the user has the option to jump to the relevant section.

Once in the main page content the user can get back to the top of the page in one click by using the back to top link

• As a First Time Visitor, I want the page visually appealing.

The user is greeted by bright colours when arriving on the page, which creates a welcoming and postive feeling. Rye and Raleway fonts add to this by creating a modern look that is aligned with the page theme.

• As a Student, I want to find information about the vikings that aids my understanding.

This is achieved in multiple ways on the page. Firstly Google Maps has been coded to render each modern county, but the flag image differs to show the English territory to which it formerly belonged. This creates a visual understanding of how England was divided.

To further aid Google Maps the accordion feature is positioned next to it, displaying the same flags but with the addition of the territory names, by doing this it is acting as a key for the map.

The accordion also provides additonal information about the history of each area adding an extra layer of understanding.

Further down the page the timeline acts as another visual experience.

• As a Student, I want interaction to make learning fun and accesible.

The use of interactive elements, such as Google Maps, Accordion and Timeline promotes engaging and fun material which makes the learning more accesible

• As a Student, I want imagery to assist with the written theory.

By displaying images for each written section on the timeline, the developer has ensured that the needs of differing learning styles are met.

• As a History Enthusiast, I want to explore the areas of England.

On Google Maps it is possible to zoom the map in and out with the flags displayed, this allows for the user to explore where their location was in relation to the territories. There is also the option to see the county name by hovering on left side of the flags.

On the accordion, the four territories each have their own section with an explanation of their history.

• As a History Enthusiast, I want to understand the underlying situations in England.

This can be located by the user by exploring the territories of England. Each section details how these areas were formed. East Anglia is seen above.

• As a History Enthusiast, I want to clarify the order of events during the vikings time in England.

The timeline feature clearly shows events in chronological order.

Where more than one major event happen in a period of time the earliest year was set first followed by the next chronological. This is the case between 865-874 A.D where within this time period two major events occured in 866A.D., the developer therefore decided that it was best to label them 'i' and 'ii' to acknowledge that there were seperate events.

• The Website was tested on Google Chrome, Opera, Microsoft Edge and Safari browsers.
• The website was viewed on a variety of devices such as Desktop, Laptop, iPad Air & iPhoneX. Other devices were tested through the inspect web developer tools.

• Animation On the viking boat animation below the timeline, there are a few points were the boat appears to move back before animating. This is due to the margin-left value being a differential of 6 e.g.(item 1 8%, item 2 14%) and the animation function taking each point and adding 7. Visually this means that in the happy flow the points that have a difference lower than 7 appear as though the ship is moving from before the previous timeline item, other points animation as expected.

This was a contigency plan as the planned animation was to take the current value of margin-left on the image as the start point and then move to the new location, however when implementing this the first value always returned "null" on the console and despite many efforts in getting this to work the developer was unable to find a solution within their current ability.

Deployment

The project was deployed to GitHub Pages using the following steps...

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository (not top of page), locate the "Settings" Button on the menu. This will be cog looking icon in the top-right.
3. Scroll down the Settings page until you locate the "GitHub Pages" Section.
4. Under "Source", click the dropdown called "None" and select "Master Branch".
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.

By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps...

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
3. You should now have a copy of the original repository in your GitHub account.

1. Log in to GitHub and locate the GitHub Repository Under the repository name, click "Clone or download".
2. To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
3. Open Git Bash Change the current working directory to the location where you want the cloned directory to be made.
4. Type git clone, and then paste the URL you copied in Step 3. $ git clone https://github.com//TJones305/Vikings_In_England Press Enter.
5. Your local clone will be created. $ git clone https://github.com//TJones305/Vikings_In_England

Example: Cloning into CI-Clone... remote: Counting objects: 10, done. remote: Compressing objects: 100% (8/8), done. remove: Total 10 (delta 1), reused 10 (delta 1) Unpacking objects: 100% (10/10), done.

Credits

• Bootstrap5: Bootstrap Library used throughout the project to make site responsive using the Bootstrap Grid System. Also for the navbar and accordion base code.

• MDN Web Docs: For Pattern Validation code. Code was modified to better fit my needs.

• Google Maps: For use of their API and initMap function

• EmailJS: For use of their API and on window.onload function

• Content: All content was written by the developer.

Credit goes to the following:

• Heading Dragon Art edited from: https://fineartamerica.com/featured/viking-ship-nordic-runes-tshirt-bi-nutz.html
• Viking boat in brand image and animation created by Darius Dan and found at: https://www.flaticon.com/free-icon/viking-ship_1793046?term=viking%20ship&page=1&position=4&page=1&position=4&related_id=1793046&origin=search
• Old English Territory flags came from: https://britishcountyflags.com
• Footer Back to Top image aquired from: https://www.wellwood.ca/about-us/vision-values/

Timeline images:

• Viking Raid: credit to Ubisoft Games - picture obtained via Assassin's Creed Valhalla Fan Kit
• Raid on Lindisfarne monastery: credit to Ubisoft Games- picture obtained via Assassin's Creed Valhalla Fan Kit
• Ragnar Lothbrok in snake pit: https://www.pinterest.com.mx/pin/687291593116915890/
• Great Heathen Army Conquests: https://www.pinterest.com/vikingsloot/viking-battle/
• Vikings invade York: https://medium.com/@Bavipower/how-the-vikings-worked-3dcf9b2491ee
• Map of Danelaw: http://viking.archeurope.info/index.php?page=the-danelaw-map
• Map of Normandy: https://www.durhamworldheritagesite.com/learn/history/normans/founding-normandy
• Eric Bloodaxe: https://bavipower.com/blogs/bavipower-viking-blog/erik-bloodaxe-viking-king-of-norway
• Harald Bluetooth: https://imgur.com/gallery/GSdnz1G
• King Cnut https://en.wikipedia.org/wiki/Cnut_the_Great
• Edward the Confessor and Harold II, created from: 1)https://alchetron.com/Edward-the-Confessor 2)https://spartacus-educational.com/MEDharold.htm
• Battle of Stamford Bridge and Battle of Hastings Map: https://spartacus-educational.com/NORhastings.htm
• Viking Compass:

All research was put into this during planning key infomation below.

All Old England Territories are based on the year 865AD using the following source: https://twitter.com/mapporntweet/status/1201396916501635072

Modern Day Counties defined according to the following map at http://www.itraveluk.co.uk/maps/england/

List of sources information was gathered from as follows:

• Wikipedia - for history of Old England Territories
• https://www.historyextra.com/period/anglo-saxon/key-viking-dates-lindisfarne-raid-swein-forkbeard-harald-hadrada-stamford-bridge/
• Curious Minds| All About History| Book of Vikings| ISSN: 2057-195X
• https://www.lifeinnorway.net/viking-timeline/
• YouTube| History With Hilbert| The History of the Vikings in England (AD. 793 – AD.1066)
• https://www.historic-uk.com/HistoryUK/HistoryofEngland/Great-Heathen-Army/
• University of Hull | Vikings up North: The Legend of Ragnar Hairy-Breeches. Audio clips at: https://hull-repository.worktribe.com/output/371612/vikings-up-north-the-legend-of-ragnar-hairy-breeches/
• http://www.bbc.co.uk/history/ancient/vikings/overview_vikings_01.shtml
• http://www.bbc.co.uk/history/ancient/vikings/bloodaxe_01.shtml

Acknowledgements

• My Mentor Gerry McBride for constructive feedback and continuous.

• Student support at Code Institute for their helpful advice and guidance.

Limitations:

-Screen accessiblity during development The largest screen size accessible to the developer was 1366px-width, therefore larger screen sizes may display different to intented layout.

• Burger Menus Both Burger menus will expand on opening but require manual closing. It was attempted to add in the capability for the menu to collapse on selection but the developer had issues in getting this to work as they wanted, therefore they felt it was better to not add this functionality at this stage.

Future Additions:

1. There is scope for this site to add additonal pages, for example the site can focus on other countries influenced by the vikings such as France and Ireland, or alternatively the site can focus on the culture and battle tactics of the vikings.