Project Lambda is an informative history website focusing on the Battle of Thermopylae in 480BCE.
The target audience for this website will be those looking to broaden there knowledge on Ancient Greek, or more specifically, Spartan history. I want them to be able to clearly understand the sequencing of events, be able to jump to key sections should the wish to, and to come back as returning users if they want to refresh their knowledge on the subject, or reference the website for their own history projects (at school, for example).
My own goal with this website is to engage with this target audience and anyone who will be interested in learning about the battle having heard of it in history lessons or films/documentaries, and want to learn more. I want to present information-rich text that paints a clear picture for the reader, and stimulates the readers' desire to want to learn more.
I came up with my first wireframe and concept using the Balsamiq Wireframes Application that was suggested by Code Institute. This helped me to visualise my ideas and got me to think about how I might implement and style them.
Using Balsamiq, I came up with three mediums for the website. A desktop, Tablet and Mobile rendering:
When I think of Ancient Greece, and more specifically Sparta, I think of 3 Colours: Bronze(Golden-Yellow), Grey and Red/Crimson. These colours had to feature on my website.
Fonts Used:
- Roboto (FW: 300 Light)
- Lora (FW: Medium 500)
- When hovering over the nav links in the header, a 1px solid black under-line displays.
Main colours:
- Font: Black
- Body: rgba(176, 178, 184, .7)
- Header and Footer: Goldenrod
- Image Background: Gray
- Floating Div: Red, and Crimson when hovered over.
Media:
- A mixture of images will show between relevant text on the site, as well as 2 background images. One for under the header and one for over the footer. I have opted not to use any video/audio.
Links:
- Links to 3 sections on the page can be found in the heading (Battle, Legacy and Socials)
- Links to the Social Media websites are displayed with associated Icons in the footer (Facebook, Instagram, Twitter and Youtube)
- A red floating div follows the user as they scroll down the website, and when selected, it takes the user back to the top of the webpage to save them from scrolling all the way back.
- Navigation Bar
- A responsive Navigational Header that allows the user to return to the top of the page by clicking the H1 Title or to quickly find segments of the website they wish to jump to.
- There are 3 options: Battle, Legacy and Socials. The Battle link takes the user to the 3 day battle section of the page. The Legacy link allows the user to jump to the aftermath of the battle to see how the battle has influenced history. The Socials link takes the user to the footer of the website to access the social media icons and follow the developer on any of those platforms.
- When the user hovers over the links, they underline to add a bit more functionality to the bar and to confirm to the user that the links to respond to taske them where they want to go.
- Hero Image
- A hero image of a picture depicting the battle at the top of the page between the header and the About section. Designed to draw the user in to find out more about thew battle.
-
About Section
- An About section describes the aim of my website to the reader between two hr lines. It's deisgned to brieftly take the reader's attention away to tell them why I made this website and what my goal is for the reader by the time the feel they want to leave the website.
- An About section describes the aim of my website to the reader between two hr lines. It's deisgned to brieftly take the reader's attention away to tell them why I made this website and what my goal is for the reader by the time the feel they want to leave the website.
-
Belligerents
- This is split into two seperate areas. One describes the Greek Allied forces, the other, the Achaemenid-Persian forces. Seperating both areas of content is a div of 3 images under each block of text. This is to give the reader a good idea of what a typical soldier looked like and how the armies may have fought together in groups.
- This is split into two seperate areas. One describes the Greek Allied forces, the other, the Achaemenid-Persian forces. Seperating both areas of content is a div of 3 images under each block of text. This is to give the reader a good idea of what a typical soldier looked like and how the armies may have fought together in groups.
-
Battle Section
- The battle section, which is linked in the Navigation, splits up the information about the battle in to 3 day blocks. The reader can see what happened on each day of the battle, before viewing a battle map below to see where the battles took place and how the troops travelled to get there.
- The battle section, which is linked in the Navigation, splits up the information about the battle in to 3 day blocks. The reader can see what happened on each day of the battle, before viewing a battle map below to see where the battles took place and how the troops travelled to get there.
-
Legacy Section
-
The Legacy section, which is linked in the Navigation, shows the immediate aftermath of the battle and the Cultural influences on us today. I want the user to see where certain famous phrases come from, and how this event in history has shaped modern media such as films, documentaries, books and games that the reader may recognise.
-
If the reader doesn't recognise them, I hope it encourages the reader to investigate further into the media out of curiosity.
-
-
Footer/Social-Network Bar
- This section, which is also linked in the Navigation Bar, encourages the reader to follow the developer on the displayed social media icons. They are very recognisable icons that should intuitively be clicked on to lead the reader to the given websites.
As an extra task, I was challenged by my mentor to create a basic custom error 404 file to diplay if a user mistypes the url or searches for a page within the website that does not exist.
The styling is simple, but does the job. It uses the same colours and logo title as the index.html to keep a consistent theme. A link directs the user back to the home/main page of the website:
-
In future, a link in the Nav bar to other related battles from the same period would be beneficial to the goals of the site and the reader, to give further context and detail to the battles referenced in my website.
-
What I would do, is add a drop down link to the nav bar that contains links labelled by name of the battle (Marathon, Salamis, Plataea), and the reader would be taken to another page detailing that battle.
-
Perhaps video links on the site would be useful for readers to further their knowledge.
HTML tested with no errors found on: https://validator.w3.org/
CSS tested with no errors found on: https://jigsaw.w3.org/css-validator/
Prior to adding the floating div on my website, and other small styling and formatting changes, this was my Lighthouse Accessibility score:
After adding the new floating div and making some other minor changes, my accessibility score dropped from 100 to 97 but you will notice the performance appears to drop significantly.
I do not notice any significant performance changes to the website, apart from an ever so slighly longer webpage loading time when opening the page for the first time. I also do not know how much the performance is down to the device on which the user is visiting the website.
- Tested the website on laptop and mobile devices (Macbook Pro, Iphone X and Iphone 12 Pro). I found the website was responsive across all platforms and there were no bugs glitches impeding the user experience. One issue the appeared but seems to have been fixed is the bug where the floating div was not appearing on all mobile devices. Formatting the css seems to have resolved this.
- Tested the website on 2 different browsers: Safari and Chrome. I did not find any issues that presented themselves to me.
- The navigation and footer menus all work exactly as intended. The navigation links take you directly to the sections they are meant to, and the social media icons link the user to the relavent social media websites in a new tab. The floating div works on all devices now as well.
I submitted my project to the peer-code-review channel on slack to get some feedback, as well as the London community channel. Some users recommend I change the margins of the paragraphs and images, as well as some aesthetic changes they recommended.
One user actually found a bug that shows a favicon not loading in the dev-tools, but it displays on the website perfectly. I promptly added this into the bugs section in my readme file.
Otherwise, users enjoyed the content and theme of the website as being quite an interesting and original idea for an MS1/PP1 submission.
I have been very fortunate to not have experienced many bugs in this project. Namely, the only bug I have found myself is that sometimes the floating div that takes you to the top of the page, doesn't appear on all mobile devices. Sometimes it loads, other times it is not present, but also doesn't impact the web page in any way. After a few formatting changes in the css, however, the issue seems to now no longer be present.
One user on the peer-code-review channel found a bug in the dev-tools that displays one of the favicon icons as not loading (an error 404 for the icon), but the icon displays on the webpage as expected.
I have not found a fix for this yet, but as mentioned, the icon displays perfectly fine when deployed.
Issues I encountered include:
- Making the 404 file: I could not get my image to display until I looked online and found out that you need to make a 404.md file as well as the 404.html file in order for it to display. In it, you need to quote the permalink code you see written in the image below:
- Images in the .imageline class: I was struggling to get the images to stay inline or stacked as I adjusted the responsiveness of the webpage. I found a good compromise image size of 80% width and height as the default css, and added media queries to scale the images up or down depending on screen width.
Below are the steps to take to deploy this website:
Project Lambda is deployed on Github. Follow the steps below to deploy a Github Repository through GitHub pages:
- Select the repository that you want to deploy, and select the settings link at the top right of the menu bar (A 'cog' icon will show near it).
- Select the pages section on the vertical navigation bar on the left.
- On the Github pages tab, scroll to the Source area and change the "None" branch tab to "Main", followed by changing the folder selector to "Root".
- Finally, save this setting and refresh the site until you are presented with the following message in green: "Your site is published at (Your Github web address)"
You can fork your repository to create a copy of the original one. This allows you to make changes without altering the original repository. Take the steps below:
- Find and select your chosen repository.
- At the top right of the page, between the watch/unwatch tab and the star tab, select the "Fork" tab.
- You will now find a copy of the same repository in your account.
See steps below to make a local clone repository:
- Find and select the chosen repository.
- Select the "Code" button above the displayed repository files.
- Select and Copy the displayed link.
- In Gitpod, change the directory to the desired location.
- Type "git clone" in the terminal and paste the link, followed by pressing the Enter key on your keyboard.
- You have successfully created a local clone!
Several other websites heavily influenced the information presented on my website.
Namely, these online sources include:
- Wikipedia (Source 1)
- History of Yesterday
- World History
- Realm of History
- Hellenic Art
- Wikipedia (Source 2)
- Historynet
- Greek armour/weapons
- Hoplites
- Greek-City-Times
In the back of the comic book '300', which I mention in the Cultural Influence section of my page, there is a recommended reading list which I would like share for those that wish to further their understanding about the battle through other literature:
- The Hot Gates by William Golding
- The Histories by Herodotus
- Thermopylae: The Battle for the West by Ernie Bradford
- The Western Way of War by Victor Davis Hanson
Icons used the social media were provided using Font-Awesome. Chosen Fonts were selected from [Google-Fonts] (https://fonts.google.com/)
I hit bumps along the way on this project, being my very first website. I couldn't have got it to where it is today without the help of the following people:
- My Code Institute Mentor: Adegbenga Adeye
- My London Coding Community Mentor: Harry Dhillon
- Esteph, from the London Coding Community, who took the time out of her day to help me with problems in my code
- Alexey Kuzmis, also from the London Coding Community, who helped with layout-idea brainstorming at the start of the project
- Github Docs: helped me to expand my knowledge on README syntax: Link
- W3 Schools: for CSS tutorials. I cannot recommend this enough: Link
- Coolers: A website that helped me to pair colours together in an appealing way: Link
- gokulkrishh on Github Gist: providing a fantastic boilerplate Media Query template for other users, like myself, to take inspiration from: gokulkrishh-template
- I used this Youtube video by "dcode" as inspiration for my floating div button. It is a fantastic tutorial: [Youtube-link](https://www.youtube.com/watch?v=u5hx_YtqylA&t=149s
Thermopyles image : Link
Thermopylae image 2 : Link
Greek Hoplite Image: Link - Originally published by Johnny Shumate and uploaded by Jan Van Der Crabben under the following license: Public Domain.
Spartan Army Image: Link
Spara Image: Link - Image linked in a Quora thread.
Hot Gates Battle Image: Link - The image itself comes from a book titled "The Gates of Fire".
Hoplites & Spara Image: Link - credit is sourced to Wikimedia Commons.
Persian Cavalry Image: Link
War map Image: By User:Bibi Saint-Pol - Own work. Data from Image:Perserkriege.jpg by Captain Blood, which uses the dtv-Atlas Weltgeschichte. Von den Anfängen bis zur Gegenwart, p. 56. Blank map from Image:Map greek sanctuaries-fr.svg., CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=1724898
300 Image: Link - image from the movie '300' by Zack Snyder.
300 Comic Image: Link - image of Comic Book '300' by Frank Miller.
Leonidas Monument Image: Link
Thespian Monument Image: Link
Thermopylae Plaque Image: Link
This project, my first proper adventure in to putting coding into practice, has been a thoroughly enjoyable experience. This has proved to be a great challenge to test what I know so far on my Code Institute journey. There were some tricky spots to overcome, but with the help of peers and my mentor, I have come out with a website that I can be proud of for a first endevour!
6 weeks ago, I didn't know what HTML and CSS was. To get to a point now where I can code a basic website makes me beyond happy! To that end, Happy Coding, Readers! :)