This is a website for Nissan Skyline R-34 GT-R aficionados. This car is a legend in the worldwide car community. It’s extremely popular with street racers, tuners and car fans around the world, and even in motorsports. It’s every car person’s dream project car. And, if you're of a certain age group (my age group), you grew up playing racing games on PlayStation, watching “The Fast and the Furious” and you were absolutely obsessed with Initial D.
In all three of those franchises, the Nissan Skyline GT-R plays a pivotal role. It was the best car in Gran Turismo 2. Paul Walker drove one in “2 Fast 2 Furious”. And the God Foot was a menace on the mountain. It was a huge deal.
But, strangely, there aren’t many websites specifically dedicated to the Nissan Skyline R34 GT-R, with not just technical information, but also good photos and videos of this specific model (R34). I hope this website helps changing that and is followed by many others.
This website is designed to be responsive and accessible on a range of devices, making it easy to navigate for potential R34 fans.
• User stories
o First-time Visitor Goals
a. As a first-time visitor, I want to easily understand what the website is about, navigate with ease throughout it all and find functional, yet interesting content.
b. As a first-time visitor, I want to find good, specific and relevant content about the R34: a mix of the car's technical details, good quality photos and informative videos about this specific model, all in one website.
o Returning Visitor Goals
a. As a returning visitor, and because this is a website for car fans, who tend to visit the same car websites regularly for different purposes (because they're working on a project car and they need detailed information about a specific model or parts, or ideas based on the R34's style and features for their own car, which is information that needs to be constantly accessed depending on the project car they're working on, for example), I want to be able to easily access the same good information about the R34 that I accessed the first time I visited the website and that impressed me so much.
o Frequent User Goals
a. As a frequent user, I want this information to be available at all times so I can access it whenever I need it and show it to other R34 aficionados in my local car community and car fans in general - spreading good car information is what car people do when they meet other gearheads, and websites like this are a good source of car knowledge at all times.
• Design
o Color Scheme
a. The four main colors used are white (as the background color, just like in most car websites, where the many images tend to be very colorful and big and can be better looked at with a neutral, but bright background), black (the text color, which makes it easier to read all the technical text when the background color is white - being neutral colors, they bring the user's attention to the photos, which are one of the main reasons car fans visit car websites - and it's also used on the R34 featured on this website), silver (the colors of both the navbar background and the footer background - this matches the silver color of the R34 featured on every image on the website, so I thought it would be a good combination) and red (which is also used on the R34 that featured on this website - I thought it would be a good idea to create the hyperlinks for the website text in Tail Lights red, it seemed very appropriate). Given the content of the website, I believe this white-black-silver-red color combination works well, suits the layout and triggers a good emotional response from the users.
o Typography
a. The text and menus font used is the Carme font, a font that makes text both elegant and easy to read, with sans-serif as the fallback font in case, for some reason, the font isn't being imported into the site correctly. The headings font used is Racing Sans One (for obvious reasons, it's a website about a car), which is very common in the world of motorsports. I believe its style suits the content, the layout, the purpose and the feeling of speed this website wants to create in its users.
o Imagery
a. Images are crucial. Car websites are visually appealing, and when the user of such websites visits one, what he/she wants to look at mostly is the car images - it's the same when we want to buy a car and visit the automaker's website to look at the images and make a decision. There's a different photo of the R34 separating each section of the website, and a gallery with many others, but my favorite is the main image at the top of the page (underneath the navbar) - in my opinion, it's the most appealing of them all, so I've decided to make it the first thing the users see when they land on the website.
• Wireframes
o Desktop wireframe (Home page) - View
o Desktop wireframe (History page) - View
o Desktop wireframe (Specs page) - View
o Desktop wireframe (Powertrain page) - View
o Desktop wireframe (Gallery page) - View
o Desktop wireframe (Videos page) - View
o Desktop wireframe (About page) - View
o Mobile wireframe (Home page) - View
o Mobile wireframe (History page) - View
o Mobile wireframe (Specs page) - View
o Mobile wireframe (Powertrain page) - View
o Mobile wireframe (Gallery page) - View
o Mobile wireframe (Videos page) - View
o Mobile wireframe (About page) - View
o NOT USED (original idea) - Desktop wireframe (Home page) - View
o NOT USED (original idea) - Desktop wireframe (History page) - View
o NOT USED (original idea) - Desktop wireframe (Specs page) - View
o NOT USED (original idea) - Desktop wireframe (Powertrain page) - View
o NOT USED (original idea) - Desktop wireframe (Gallery page) - View
o NOT USED (original idea) - Desktop wireframe (Videos page) - View
o NOT USED (original idea) - Desktop wireframe (About page) - View
• Responsive on all device sizes
• Interactive elements
• Navigation Bar
o Featured at the top of the scrolling single-page, the fully responsive navigation/link bar introduces the user to all the specific content on the website by showing links (hover.css was used to add an underline effect to each link while being hovered over) to the Home section, the History section, the Specs section, the Powertrain section, the Gallery section, the Videos section and the About section. It's a sticky navigation/link bar, so it follows the user's viewport as he/she scrolls down the long single-page, allowing the user to easily navigate through the content across all devices without having to go back to the top of the page to access other sections. It obeys the combination of colors described on the Color Scheme section of this document.
• The Home section
o The Home section works as the landing page, which includes a beautiful photo of an R34 in South Africa, at the top of a hill, with an entire city in the background and, when the user scrolls down, with some text stating the car model and a catching phrase to allow the user to see what the website is about (on mobile devices, there's no need for the user to scroll down to see the text on Home section).
Screenshot of the landing page here
• The History section
o A brief history of the Nissan Skyline GT-R throughout the years. Any external links will open in a new tab to allow easy navigation for the user and avoiding the user to leave the website.
Screenshot of the History section here
• The Specs section
o The car’s detailed technical specifications – the language spoken by every car fan in the world. Any external links will open in a new tab to allow easy navigation for the user and avoiding the user to leave the website.
Screenshot of the Specs section here
• The Powertrain section
o The content of this page explains the assembly of every component that pushes the car forward, like the transmission, the driveshaft, the axles, the differential, etc., with a specific section just for the engine, the legendary Nissan RB26DETT. Any external links will open in a new tab to allow easy navigation for the user and avoiding the user to leave the website.
Screenshot of the Powertrain section here
• The Gallery section
o Quality photos of the R34 that I found online (including photos of the interior of the R34 featured on this website). A classic section – and a must in any car website. This gallery was created using a typical strict grid layout, with a couple of columns and no gaps for a more intense visual effect. In mobile devices, and because the layout has to be responsive and fit the images into a smaller space, the images are stacked on top of each other in one single column, still with no gaps to maintain the same visual effect.
Screenshot of the Gallery section here
• The Videos section
o We’re in the video era and, when it comes to the automotive industry, this kind of visual content became specifically important. The videos on this page are four very good reviews of the R34 on YouTube by Throttle House, Top Gear, Donut Media and Speedhunters, all of them respected car channels with a great presence online – these videos are iFramed on this section of the website. All four videos can be watched and fully controlled by the user (play/pause, go backwards, go forward, etc.), regardless of them being watched in full screen or not. There's also an option on the iFrames of watching them directly on YouTube (in this case, the YouTube page will open in a new tab so the user doesn't leave the website).
Screenshot of the Videos section here
• The About section
o On this page, I briefly introduce myself, explain what the website aims to accomplish and acknowledge the contribution of several sources to this website. Any external links will open in a new tab to allow easy navigation for the user and avoiding the user to leave the website.
Screenshot of the About section here
• Footer
o The footer section includes a “Copyright © 2022 Pedro Ferreira” notice – it’s shown on every section of the website (it's a sticky footer, so it follows the user's viewport as he/she scrolls up and down the long single-page website). Just like the navbar, it obeys the combination of colors described on the Color Scheme section of this document. This sticky footer was created as small as possible (differently from the navbar in that sense) as the information on it is not as relevant to the user experience as the navbar, for example, so this keeps the footer from stealing valuable space from the rest of the content of the website (text, images, videos, etc.). The social media icons on it (for YouTube, Instagram, Twitter and Facebook) lead the user to the login pages of these social media platforms (not to any specific YouTube/Instagram/Twitter/Facebook page/account), they're there only to make the footer look better and the page more professional, as the creator of this website has no intention of sharing his work on social media at this point in time. No hover.css was used on the social media icons in the footer (to add the float transition while being hovered over) because the footer bar would grow in size momentaneously has the icons were being hovered over, lending a strange visual effect to the user's viewport and the general user experience.
• A “Comments” section, even a blog section for R34 fans and car enthusiasts in general (not added now because this website is to be created using HTML and CSS only, not JavaScript).
• The reason why this website doesn't have seven different pages and the navigation bar links to specific sections of a long, scrolling single-page instead is because it follows the usual model for car websites (for desktop or mobile devices), and it works better in mobile devices. This is also the reason why background images were not used (as all the text on this website, with an overlay effect for better reading, would look too small on mobile devices). This was the original idea (the links to the wireframes are on the "Wireframes" section of this README.md file), which also included an image background change effect on every page (the background image changes every few seconds – it’s dynamic content), but it wasn’t added now because this website is to be created using HTML and CSS only, not JavaScript.
• HTML5
• CSS3
o Hover.css was used to add an underline effect to each link on the navbar and the website's text while being hovered over.
o Google fonts were used to import the "Carme" and "Racing Sans One" fonts into the style.css file - Carme is used for text and the menus and Racing Sans One for the headings (this combination of styles was used throughout the project).
o Font Awesome was used on the footer bar to add social media icons for aesthetic and UX purposes.
- Git:
o Git was used for version control by utilizing the Gitpod terminal to commit to Git and push to GitHub.
o GitHub is used to store the project's code after being pushed from Git.
- Snipping tool:
o A snipping tool was used to create the logo, resizing images and editing photos for the website.
o TinyPNG was used to compress all images on the website.
o Balsamiq was used to create the wireframes during the design process.
o PDF To Image converter was used to convert the PDFs of the wireframes to image format so they could be uploaded to and accessible on GitPod and GitHub.
The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of this project to ensure there were no syntax errors in the project.
• W3C Markup Validator - Results • W3C CSS Validator - Results
The Am I Responsive? website design tester was used to test the responsiveness of this website. Screenshot here
Google Chrome's DevTools were used to thoroughly test this website, including the Lighthouse tool - please see below screenshots of both Lighthouse reports (one for desktop and one for mobile - the 78 in Performance for mobile is due to the high number of images on the website's Gallery section, which impacts the page load time, though all images on the site were compressed):
• First-Time Visitor Goals
i. As a first-time visitor, I want to easily understand what the website is about, navigate with ease throughout it all and find functional, yet interesting content.
a. Upon entering the site, users are automatically greeted with a clean and easily readable navigation bar to go to the page section of their choice. The logo "Skyline" on the navbar, an obvious reference to the car model and also to the outline of land and buildings defined against the sky on the image of the R34 underneath, together with the wording of the links on the navbar (specs, powertrain, etc.), immediately make the user aware that it's a website about the Nissan Skyline and make the CTA (Call-to-Action) obvious. On mobile devices, the title and subtitle of the website ("Nissan Skyline R34 GT-R" / "The Fifth Generation of a JDM Legend") add to the user's (good) first impression of the website. And the About section clearly explains what the website is all about.
b. The user has two options: click the Call-to-Action buttons in the navbar or scroll down, both of which will lead to the same sections of the website, to learn more about the Skyline.
ii. As a first-time visitor, I want to find good, specific and relevant content about the R34: a mix of the car's technical details, good quality photos and informative videos about this specific model, all in one website.
a. The site has been designed to be fluid and never to entrap the user. The sticky navigation bar follows the user's viewport as he/she scrolls up and down the page, and each link describes the section of the website they'll end up at clearly. This way, the user always has somewhere to go and doesn't feel trapped as they get to the end of a section or to the end of the page.
b. The sticky footer, which also follows the user's viewport throughout any scrolling, allows the user to see who created the website and click on the social media icons to visit those pages at all times (a first-time visitor may want to see the website creator's following on social media to know more about him and look for more content like this, or to join and interact with other R34 aficionados in the community).
c. All these goals have been achieved by every visitor to this website that I contacted (family, friends, car enthusiasts, etc.), with the exception of knowing more about the creator of the website (as previosuly mentioned, the social media icons lead to the login pages of the social media platforms, but not to the website creator's individual social media pages as one would expect, as he prefers not to expose himself that way at the time of this project). Whichever social media link they click, it'll open in a new tab to ensure the user can easily get back to the website (the same applies to any other external links on the website).
• Returning Visitor Goals
i. As a returning visitor, and because this is a website for car fans, who tend to visit the same car websites regularly for different purposes (because they're working on a project car and they need detailed information about a specific model or parts, or ideas based on the R34's style and features for their own car, which is information that needs to be constantly accessed depending on the project car they're working on, for example), I want to be able to easily access the same good information about the R34 that I accessed the first time I visited the website and that impressed me so much.
a. I believe the (good) first impression made on most first-time users has paid back, as more family members, friends and car enthusiasts that I contacted visited the website again to look at the content - this goal has been achieved.
• Frequent User Goals
i. As a frequent user, I want this information to be available at all times so I can access it whenever I need it and show it to other R34 aficionados in my local car community and car fans in general - spreading good car information is what car people do when they meet other gearheads, and websites like this are a good source of car knowledge at all times.
a. At this stage, the user is already comfortable with the website layout and can easily navigate his/her way around the site's content. This is the feedback I got from most visitors, so I believe this goal has also been achieved.
• The website was tested on the Google Chrome, Mozilla Firefox, Microsoft Edge and Safari browsers (on Safari only by my mentor - he confirmed it was fully responsive and functional). It was not tested on Internet Explorer as it's no longer supported.
• The website was viewed on a variety of devices such as desktops, larger laptops, medium/smaller laptops, tablets, phablets, larger mobile phones and medium/smaller mobile phones.
• A large amount of testing was done to ensure that all section links on the navbar were linking correctly. The same was done for all the external links on the website, including the social media icons on the footer bar, and for all the iFramed YouTube videos on the Videos section.
• Friends, family members and car enthusiasts were asked to review the site and documentation to point out any bugs and/or user experience issues.
• Fixed Bugs
• The text was smaller than expected at more than 1400px on the media query for extra large screens and TVs (1201px-1400px), so the maximum width for this media query was increased to 1600px, which solved the issue.
• On most advices, the content of the website (images, videos, text, headings, etc.) was placed too much to the right and was being pushed out of the screen/viewport, so a too wide white margin could be seen on the left, which created a very unaesthetic horizontal scrollable bar - this was due to the use of too much padding and margin space (the reason for this exaggerated use of padding and margins was the incorrect use of DevTools to check the responsiveness of the website on several screen sizes, which was showing the website content as perfectly centered/aligned when it wasn't; after manually testing the whole website on several screen sizes, the creator of this website figured it out and the unnecessary padding and margin space were removed from the CSS code and, along with a few other minor tweaks, the issue was solved).
• The navbar was "eating" the main image underneath, as well as the headings of the several website sections every time the user clicked on a navbar link that would take him/her to the those specific sections (it would land a few centimeters below the section heading, instead of right above it). This is particularly problematic when we have a sticky navbar, as it's the case. This was fixed by increasing the height of the image underneath the navbar and by adding enough negative margin-top and the same positive value of padding-top to all section headings, which "tricked" the navbar and solved the problem.
• The footer bar was also "eating" the text at the very bottom of the website page (at the end of the About section, which is the last section of the site). This was fixed by changing the margin bottom space.
• After a lot of trial-and-error, and as mentioned above, the problem with the content aligning right and being pushed out of the screen/viewport (which created a horizontal scrollable bar) was fixed for all screen sizes, but there was still a very, very small piece of horizontal scrollable bar on the smallest screen size targeted by the media queries (between 320px and 480px) that the creator of this website couldn't figure out where it was coming from, so an 'overflow-x: hidden' property value was used, which effectively made the horizontal scrollable bar disappear and solved the issue.
• Unfixed Bugs
• This website is not responsive in mobile devices with a width of less than 320px, as only some smart watches are narrower than 320px (information about this topic can be found, for example, here).
• There's a small bug that occasionally affects the four iFramed YouTube videos on the Videos section. Two/three times out of ten, when we choose to open these iFrames in full screen in mobile devices (fortunately, this only happens in mobile devices), the lower part of the videos is cut off. This is due to the rotation that the YouTube widget does when the screen rotates from portrait mode to landscape mode in order for the mobile device to be able to play the iFramed video in full screen. So, when the phone is on portrait mode and we click on full screen (or tap the video twice) to watch a YouTube video in full screen, it rotates from portrait mode to landscape mode in order for the video to be watched in full screen and, when that happens, two/three times out of ten it significantly cuts off the lower part of the video (it works perfectly about seven/eight times out of ten). This is a well-known bug with YouTube videos on mobile devices (some examples of this can be found here and here, but this information can be confirmed using many other online resources, it's public information). Just as an example, I've tried to open the iFramed Youtube videos on this website and the same issue occurred when trying to do it using my smartphone. When already in landscape mode (so, no rotation from portrait mode needed to watch a video in full screen), the video opens and plays in full screen perfectly (it's only when the mobile device is in portrait mode/position and a rotation to landscape mode is needed that this happens, and only two/three times out of ten, as previously mentioned). But the videos can be watched and controlled by the user (play/pause, go backwards, go forward, etc.) at all times, regardless of it being watched in full screen or not or in portrait or landscape mode. In bigger screens, with no need for the screen to rotate in order to play these videos in full screen, no issues occur.
The project was deployed to GitHub Pages using the following steps...
-
Log in to GitHub and locate the GitHub Repository.
-
At the top of the Repository (not top of the page), locate the "Settings" Button on the menu.
-
Scroll down the Settings page until you locate the "GitHub Pages" section.
-
Under "Source", click the dropdown called "None", select "Master Branch" and click on "Save".
-
The page will automatically refresh.
-
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...
-
Log in to GitHub and locate the GitHub Repository.
-
At the top of the Repository (not top of the page), just above the "Settings" button on the menu, locate the "Fork" button.
-
You should now have a copy of the original repository in your GitHub account.
-
Log in to GitHub and locate the GitHub Repository.
-
Under the repository name, click "Clone or download".
-
To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
-
Open Git Bash.
-
Change the current working directory to the location where you want the cloned directory to be made.
-
Type git clone, and then paste the URL you copied in Step 3.
$ git clone https://github.com/PedroMiguelFerreira/nissan-skyline-r34-gt-r
- Press Enter. Your local clone will be created.
$ git clone https://github.com/PedroMiguelFerreira/nissan-skyline-r34-gt-r
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.
Click here to retrieve pictures for some of the buttons and more detailed explanations of the above process.
• The W3Schools Online Web Tutorials were a huge help throughout the creation of this website. Nothing was ever copied from it, but it was extensively used as a source of code knowledge/confirmation. A good example of this was the use of the CSS "overflow-x: hidden" property value on the 320px-480px media query.
• Mike Dane's Giraffe Academy CSS tutorial about flexbox on Mike's YouTube channel was crucial for me to understand the CSS flexbox layout and be able to use it on several code blocks of this website.
• As previously mentioned, the navbar was "eating" the main image underneath, as well as the headings of the several website sections every time the user clicked on a navbar link that would take him/her to the those specific sections. This was fixed by increasing the height of the image underneath the navbar and by adding enough negative margin-top and the same positive value of padding-top to all section headings, which "tricked" the navbar and solved the problem. I found this clever trick on this article by Chris Coyier published on the CSS Tricks website.
• All text on this website, except for the content text on the Home and About pages, was taken from two Wikipedia articles: one about the Nissan Skyline GT-R and another one about the RB26DETT engine.
• The social media icons in the footer were taken from Font Awesome.
• The photos used as main and section images on this website were taken from Speedhunters’ website with the permission of the rightful owner of these photos, Mr Stefan Kotze, a famous South African automotive photographer and regular contributor to Speedhunters (this permission was given by email, which is available on request).
• The second main image on this website was purchased by the creator of this site on the iStock website (proof of payment is available on request).
• The images used for the Gallery section were also taken from Speedhunters’ website, also with the permission of the rightful owner of these photos, Mr Stefan Kotze.
• The Skyline logo image was downloaded for free from this page on the Logodix website.
• All four videos are iFramed from YouTube, which offers this option – they’re videos by Throttle House, Top Gear, Donut Media and Speedhunters, famous YouTube car channels (the Top Gear video is iFramed from the YouTube page of user “Insomnia K”, while all others are iFramed from the car channels' own YouTube channels).
• Stefan Kotze, the best automotive photographer in the world and whose work I greatly admire, for all the beautiful photos of a Nissan Skyline R34 GT-R that were published on Speedhunters’ website and that were extensively used on this website. Without them, this website might not exist.
• Wikipedia for all the technical content on this website.
• My Mentor for continuous helpful feedback.
• Tutor Support at Code Institute for their support.
• Code Institute's Slack community for their support.
• All family members, friends and car enthusiasts who helped testing this website.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
