Tuner Nation is a website that celebrates the art of tuning and all things automotive. The website will help car enthusiasts to connect, showcase their cars and learn from one another.
- To increase the number of people attending events.
- To provide clear information about events and how to join.
- To provide clear background and mission information.
- As a user, I want to see upcoming events so that I can plan to attend and showcase my car.
- As a user, I want to see photos from previous events so that I can so that I can get a sense of what to expect.
- As a user, I want to be able to view the information on a range of screen sizes.
- As a user, I want to easily navigate the website.
- As a returning customer, I want to find new information about upcoming events.
- As a returning customer, I want easily find contact information.
The colours where choosen to reflect a modern feeling. The combination of Night and Gold gives the website modern look and it is easy on the eye. The colour palette was created with Coolors.
Google Fonts and FontJoy were used for the following:
- Fira Sans Condensed is used for logo and shorter text.
- Oswald is used for headings.
- Robot is used for the body text of the website.
I think this pairing provides a balanced and visually pleasing contrast.
The website contains three main pages which can be accessed from the menu bar on the top of the website.
- Simple and intuitive.
- A navigation bar at the top which allows the visitors to easily navigate the website. Includes links to Home page, About page and Meet Up page.
- A logo at the top left which allows the visitors to easily return to the Home Page.
- Both Logo and Navigation bar are responsive for smaller screens.
- Contains a background image of a slightly tuned car to give the visitor an idea of what the website is about.
- Contains a heading and a short description of what the site is about.
- "Join Us" button so visitors can access the Meet Up page easily.
- Introduces the visitors to the website's mission.
- Image of a couple of tuned cars.
- Allows thye visitors to see where the events will take place.
- Short paragraph to encourage the visitors to join.
- Allows the users to see the date of future events.
- Simple and Informative.
- Description of what the website is about.
- Images of the past events.
- Contains a Form that the user can submit in order to book and and get info on an event.
- Contains a short instructions about how to attend an event.
- Hamburger Button for navigation bar on mobile screens.
- Tracks. A section where user can book time on tracks where they can drive/race their tuned cars.
- Events Page. A page dedicated just for events where more descriptive iformation about specific events will be.
- HTML5
- CSS3
- Figma: Used for creating wireframes.
- Visual Studio Code: Used for writing and developing code.
- CodeAnywhere: Used for writing and developing code.
- Git: Used for version control.
- GitHub: Used to store the files and deploy.
- FireFox Developer Edition: Used to test new features before implementing into actual code.
- Google Fonts: Used to import the fonts.
- FontJoy: Used to find fonts pairing.
- Font Awesome: Used for icons.
GitHub Pages was used for deployment:
- Log in to GitHub.
- Select repository for the project.
- Go to "Settings".
- Click on "Pages".
- In the Source section, select branch "Main" and then select "Root" from the dropdown menu.
- Click "Save".
- Wait a couple of section and GitHub will provide the link to deployed website.
There are many ways to do this. I did it in the following way:
- Log in to Github.
- Select project Repository.
- Click on the "Code" button.
- Copy the URL under HTTPS.
- Open VsCode.
- Log in to VsCode with your Github account.
- Press SHIFT + CMD + P (For Mac), type "Clone" and select "Git:Clone".
- Paste in the URL and press Enter to create the local clone.
Used to validate HTML and CSS code for all pages. H1 headings were used in section which resulted in a warning. Not able to fix the issue due to lack of time.
Home Page
About Page
Meet Up Page
CSS
- As a user, I want to see upcoming events so that I can plan to attend and showcase my car.
The upcoming section provides the user with clear information on when the events will be
- As a user, I want to see photos from previous events so that I can so that I can get a sense of what to expect.
The Gallery feature provides the user with images to help the user understand what the events are like
Manually tested the website's responsivness with help of Google Chrome and FireFox Developer Edition.
- Iphone 14 Pro
- MacBook Pro 13'
- Google Chrome
- Safari
- Firefox
- Side scroll bar for mobile screen size. Adjusted the size of mission image.
Lighthouse was used on every page of the website to test the Performance, Accessibility, Best Practices and SEO.
Used a linear-gradient to darken the images for a better Accessibility result.
Home Page
About Page
Meet Up Page
- Love Running Walkthrough Project
- :hover - CSS: Cascading Style Sheets | MDN How to change the color while hovering in CSS
- Flexbox vs. CSS Grid: Which Should You Use?
- GRID: A simple visual cheatsheet for CSS Grid Layout
- A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks
- -CSS Flexbox: A simple visual cheatsheet for flexbox
- grid-area - CSS: Cascading Style Sheets | MDN
- Design Considerations: Text on Images | CSS-Tricks - CSS-Tricks
- Hero image
- Photo by Christian Wiediger on Unsplash
- Mission image
- Photo by Karol Smoczynski on Unsplash
- Cities images:
- Photo by AIRIZ on Unsplash
- Photo by Felix Fuchs on Unsplash
- Photo by AIRIZ on Unsplash
- Photo by Martin Katler on Unsplash
- Photo by Ben Griffiths on Unsplash
- About Intro:
- Photo by Christian Wiediger on Unsplash
- Gallery:
- Photo by Jason Leung on Unsplash
- Photo by shen liu on Unsplash
- Photo by Jason Leung on Unsplash
- Photo by Serge Kutuzov on Unsplash
- Photo by Sai Kalyan Achanta on Unsplash
- Photo by Dylan Gillis on Unsplash