This website is a historical detail of the Shogun and the Samurai era. Detailing the hierarchy and armaments the warriors wore during the 12th century in Japan. The website viewers are also able to view a gallery showcasing the types of Samurai equipment used and also view two videos from youtube giving a brief explanation on the Samurai and Shogun titles.
The goal of this project is to entice viewers with an interest in the historical background of the Samurai era to a easily-navigational, aesthirical appealing, responsive website.
The main purpose for the website is to serve as a central hub of information on the Samurai / Shogun Era of Japan. Through informative text and images/videos this will entice the user further on the history of Japan. With several images showcasing the armaments and also a contact us page so if users have additional questions or any queries they can contact the website host.
- The user can easily find all the necessary information across the home page.
- The user can easily navigate to the Gallery page and view all images (which will open a seperate page when selected) and view videos on the gallery page to further explain Samurais and Shoguns.
- The user can easily find the contact methods if they need to ask business about extra information via the contact us page and also through the footer
- The footer contains clear links to Facebook, Twitter, googlemail and Youtube which open in new tabs.
The following image shows a wireframe of each of the 4 pages of the site. These wireframes were created using MockPlus.
The common elements across all 3 pages are the Header and Footer sections.
- The Header- This sections appears across the top on all 3 pages and also contains a samurai helmet logo on the left. When selecting the helmet the user will return to the top of the homepage. The navigation menu is also positioned on the right. Both the logo and menu will respond to the screen sizes used. The navigation menu on certain phones will use a 'burger' style selection menu.
- The Footer - The section appears across the bottom on all 3 pages. There is a contact us section on the left with a button that will take the user directly to the contact us page. In the centre of the footer is the social links for Facebook,Twitter,Googlemail and Twitter and on the right is a samurai logo for aesthetics.
This is the main landing page which the user will be first presented with. By using a eye catching image and colours i hope to keep users interested in viewing the site. This page contains the following elements below:
- Hero Image - The image spans across the full width of the page and very eye catching showing a samurai looking towards the direction of a cherry tree. I've also added text over the central part of the image with the name of the site 'Emperors Shogun' with smaller text 'and the samurai guards'. This is in a font style which is in a japanese calligraphy style.
- Descriptive text - This section is beneath the main hero image and highlights on three points. 'Who were the Shogun and the Samurai" the 'Samurai Armor' and the 'Samurai Weapon'. I've added text detailing each of the 3 sections and also added relevant imagery beside the texts.
- Secondary Hero Image - This image is added for aesthetic reasons to make the website more visually appealing and also to show an image of what the website is based on, to keep the user further interested.
- Additional Descriptive text - This is the final descriptive text on this specific page, answering a question which is quite common for this part of Japanese history 'What is the difference between a Shogun and a Samurai' I've also added an image on the right side of the text for the page aesthetics.
This is the second page of the website and showcases 17 images and 2 videos (linked to youtube). The images are arranged out in a grid area and each image when hovered over shows a text commenting on what the image relates to. I've also ensured when selecting the image this will open a new page allowing the user to view the image clearly.
Further down the Gallery page, i've added text using the same Japanese calligraphy style/color i've used on the other page for consistency. The text advises the user to view the videos linked directly to youtuve for further information on the 'Life of a Samurai' and a quick 'Shogunate Japan in 2 minutes".
The Contact us page contains a table which can be filled on the four sections. I ensured the background of the table matches the header/footer color for aesthetics and also the text to be easily visible. This page primary function is for users to submit any additional questions they may have on the historic events during the Shogun dynasty.
The submission page generates once the user has submitted there details across via the contact us form. This page also has a link within the text to take the user back to the home page.
- HTML - Hypertext markup language used to give the website its overall structure and semantic value.
- Google Fonts - All fonts were taken from Google Fonts
- Bootstrap - Aided in creation of header / footer style and setting the frameworks to be worked on. It was an efficeint way of creating the desired layout for my website.
- CSS3 - Cascading Style Sheets used to apply consistent styles across all sections of the application.
- Color Scheme - was taken from: Coolors
- Structure of the readme file was taken from the sample readme from Love Running: LoveRunning
- Font Awesome - All icons (Social icons) were taken from Font Awesome
- Git, Github & Gitpod - Used to continuously develop and deploy the incremental versions of the application.
- Mockup - Assisted in creation of wireframe mockups.
I have tested this website across the 3 main web browsers Google Chrome, Microsoft Edge & Safari (using my MAC). The site loaded consistently across all 3 with no issues detected.
I tested the site across differing devices, using my old model iPhone 8, Dell Laptop and my iMac. I've used several different browsers and no issues were detected between any of these devices.
Throughout the process of creating the site, i've used Google Chromes Developer tools to test the responsiveness of the site. I've used 3 seperate dimensions to test and design the site for different screen sizes.
- 1280px width and below
- 800px width and below
- 400px width and below
I've ensured the navigation was very clearly accessible for all screen sizes (Mobiles and desktops) and that all information were clear to read with backgrounds that do not collide in colors. I also wanted to make the website aesthetically appealing with the scrolling images.
I've also ensured the Contact Us form correctly sends the user to the thankyou page once the data is submitted, and the form data validation works correctly. I attempted to submit without filling out each field, and was presented with a message to fill out the required data (First name, Last name, Email). When attempting to use a non-valid email address in the email field, the relevant error message appeared asking to use the correct format. I've also added a reset button in case the user wishes to clear all the data on the form and start again.
The HTML of the website was tested using the validator at [https://validator.w3.org/].
I've been advised of the below errors and have now corrected all of them and the site passed the validator.
- Missing closing tag for images within Gallery.
- Footer link error for social links.
- Missing <"/div"> within contact us page.
The CSS was tested using the validator at [https://jigsaw.w3.org/css-validator/] and no errors were reported.
I used the extension "Lighthouse" within Google Chrome Developer Tools and the results ranged from 90% - 93% which i am content with.
While testing several devices i encountered an issue with the contact us form. On smaller screened iphones i found the contact us page spread across the screen where the user is unable to read what the entry field correlates to. After several alterations and testing within CSS and adjusting the size i eventually got the table to a size i am happy with as shown below.
During the finalizing process of developing the site, i soon thought of several different methods of how i could have improved this site and implement these ideas in the future for other projects:
-
Improve the aesthetic for smaller devices when viewing the footer, initially i liked the "stacked" style of it but thought perhaps it might appear too clunky and should match how the site looks on larger screens.
-
Use higher resolution images especially for the header logo, as this counted towards my grading for the "lighthouse" check i've used in Google developer tools.
- I accessed the Code Institute template at [https://github.com/Code-Institute-Org/gitpod-full-template] and clicked on the "Use This Template" button.
- The next step, i gave my repository a suitable name.
- I clicked on the green Gitpod button (using browser extensions on Google Chrome)
- This created my development environment on Gitpod where I began to push the incremental changes to the live hosted site.
- I navigated to the Github repo settings tab and found the Github pages dedicated section.
- Within the Source dropdown menu I clicked on "main", and then "Save". Live link is available here [https://prezbala.github.io/ProjectOne/index.html]
- Navigate to the Github repo at [https://github.com/PrezBala/ProjectOne]
- Click on the Code button, then Download ZIP.
- Extracted / Saved the ZIP to a secure location on my machine.
- Ran the file on a browser of my choice (i.e. Chrome)
- The code for the social icons/Header style was derived using Bootstrap frameworks
- The code for the hero image with animation on the homepage was taken and modified from the Love Running walkthrough project offered by Code Institute. I made small modifications to suit my project
- I've looked at websites created by other students within Slack to see how they've structured there code and also there read me files which helped influence my own version. the student codes i took influence from were (https://github.com/jboyd8/milestone-project-1) , (https://github.com/kevinjohnkiely/la-rosa-restaurant-project-1/) and (https://github.com/BenD2525/the-rescuers-p1).
- The Slack community. The help a student is able to receive from the other students is a really great tool to have.
- The code for the social icons/Header style was derived using Bootstrap frameworks
- My Mentor Andre Aquilina who has provided me several tips/advise which has helped me in figuring out bugs i encountered during testing phases.
All image content for the project i found via google images.
Just one font was used throughout the website, with varying weight for headings and body text. Permanent Marker
I found the colour scheme using 'Coolors' and used some of the complimentary colour scheme for the site.
The colours used throughout the website are (and their Hexadecimal code):
- Dark Salmon #E45845
- Peach #FDBD78
- Dark Grey #312F33
The social media icons on the contact page were sourced from Font Awesome [https://fontawesome.com/]
All text content across the application was composed by myself and also derived information from the links below.