View the live project here

1. Introduction
2. How does it work
3. UX
   1. Ideal User Demographic
   2. User Stories
   3. Development Planes
4. Features
   1. Design Features
   2. Existing Features
   3. Features to Implement in the future
5. Technologies Used
   1. Main Languages Used
   2. Frameworks, Libraries & Programs Used
6. Testing
7. Deployment
   1. Deploying on GitHub Pages
8. Credits 2. Media 3. Code
9. Acknowledgements

From this website you can view the place where the next events will take place, pictures and video from gallary and sign up to get the latest updates of new events.

This website uses AngularJS to route viewers through the site and control which Javascript is executed. The site is styled with Bootstrap. The quiz has been created using Javascript and modal for enlarging images is displayed using some JQuery code. Bower has been used to manage package dependencies for deployment of site on github pages. The site can be viewed HERE

The ideal user for this website is:

• Current user
• New user
• Car enthusiast

1. As a current user, I want to see regular updates to the information and new events.
2. As a current user, I want to easily navigate through the site and access the information I require with ease.
3. As a current user, I want to easily navigate to content I have previously viewed within a small number of steps.

1. As a new user, I want to easily navigate the entire site intuitively.
2. As a new user, I want the information I seek to be easily accessible and relevant.
3. As a new user, I want attractive and relevant visuals and colour schemes that work with the content.

To create a comprehensive website that has a gallary of the latest events with videos and images. Locations of meetups and an easy contact us page with easy way to contact us.

The information above was then organized in a hierarchical tree structure, a site map, showing how users can navigate through the site with ease and efficiency, with the following results:

Wireframes were made to showcase the appearance of the site pages while keeping a positive user experience in mind. The wireframes were created using a desktop version of Balsamiq.

For the color scheme a modern black and white team was chosen as it also allows color blind users to easly navigate the website. Background for text used where the following:

• rgba(39, 29, 29, 0.7); - On Homepage Car of the month
• rgba(0, 0, 0, 0.6); - On Homepage Events
• rgb(58, 58, 58); - Social network logo color in all footers
• color: #252525; - H1 and H2 color
• color: #3A3A3A; - Paragraphs and a tags

The typography pairing used on the site are [Caveat]https://fonts.google.com/specimen/Caveat?query=caveat, and Edu QLD Beginner, imported from Google Fonts. A backup of cursive or Sans-Serif had been applied in case of import failure.

Caveat was chosen for the Main H1 and H2 , with the rest using the font Edu QLD Beginner.

The selected imagery has been sourced from Pixabay as a free source.

Various images, found in the images folder, these are beening used across the site.

• Eye catching front page with event winner picture
  • grid picture box in gallary
• Information page.
  • Top navigation to go to different parts of the website
• Media page with pictures and a video
• Links page to social media

• None

• HTML5
• CSS3

• Google Fonts
  • Google fonts was used to import the fonts into the style.css file. These fonts were used throughout the project.
• Font Awesome
  • Font Awesome was used on almost all pages throughout the website to import icons (e.g. social media icons) for UX purposes.
• GitPod
  • GitPod was used for writing code, commiting, and then pushing to GitHub.
• GitHub
  • GitHub was used to store the project after pushing
• Balsamiq
  • Balsamiq was used to create the wireframes during the design phase of the project.

• Prototype code was written and tested using several web browsers

• All code used on the site has been tested to ensure everything is working as expected

• Site viewed and tested in the following browsers:

  • Google Chrome
  • Opera
  • Microsoft Edge
  • Mozilla Firefox

• HTML Validtior by - https://validator.w3.org/

  -Index page

  -Gallary page

  -Sign up page

• CSS Validator by - https://jigsaw.w3.org/css-validator

  

• lighthouse performance

  

  

  

This project was developed using GitPod, which was then committed and pushed to GitHub using the GitPod terminal.

To deploy this page to GitHub Pages from its GitHub repository, the following steps were taken:

1. Log into GitHub or create an account.
2. Locate the GitHub Repository.
3. At the top of the repository, select Settings from the menu items.
4. Scroll down the Settings page to the "Pages" section.
5. Under "Source" click the drop-down menu labelled "None" and select "Main".
6. Upon selection, the page will automatically refresh meaning that the website is now deployed.
7. Scroll back down to the "Pages" section to retrieve the deployed link.

• Almost all images were sourced from the various artists from Pixabay.
• All videos were sourced from Gumbal`s channel on YouTube

The code was made from the skeleton of the example used in the coders coffee house but it was implimented in my own way. Using different stratages of colors ,placements and use for the website.

• I would like to thank my family for their valued opinions and critic during the process of design and development, espacially my wife while trying to hold down the fort with our 3 week old daughter Millie <3 .
• I would like to thank my mentor, Owonikoko Oluwaseun, for her invaluable help and guidance throughout the process.