Welcome to my first Milestone project.

Specialised Transport Training (S.T.T)

See the live project on GitHub Pages here.

STT was an real driving school which wound up in 2007. I had been an instructor at the school for about six years up to 2004.

The site is made to look 'retro' on purpose and is intended to be viewed as a website might have looked in the late 1990's and early 2000's when the driving school was in operation.

User Experience (UX)

• User stories

  • First Time Visitor Goals

    1. As a First Time Visitor, I want to easily understand the main purpose of the site and learn more about the organisation.
    2. As a First Time Visitor, I want to be able to easily navigate throughout the site to find content.
    3. As a First Time Visitor, I want to locate their social media links to see their followings on social media to determine how trusted and known they are.

  • Returning Visitor and Frequent User Goals

    1. As a Returning Visitor, I want to find the best way to get in contact with the organisation with any questions I may have.

• Design

  • Colour Scheme

    • The two main colours used are Crimson and Cream. This matches the company colour scheme and the colours of the vehicles.

  • Typography

    • The Crimson Text and Roboto fonts are the main fonts used throughout the whole website with Serif used as a fall back for Crimson Text and Sans Serif as the fallback font for Roboto in case for any reason the fonts aren't being imported into the site correctly. Crimson Text closely matches the text painted on the training vehicles, so it is appropriate for the context of the site.

  • Imagery

    • The large, background hero images are designed to be striking and catch the user's attention.
    • The images are of the actual vehicles being used to train and so should prompt the user to ask more about them.

• Wireframes

  • Wireframe - View

Features

• Responsive

• Interactive elements

Technologies Used

Languages Used

• HTML5
• CSS3

Frameworks, Libraries & Programs Used

1. Bootstrap 4.4.1:
   • Bootstrap was used to assist with the responsiveness and styling of the website.
2. Google Fonts:
   • Google fonts were used to import the 'Crimson Text' and 'Roboto' fonts into the style.css file which is used on all pages throughout the project.
3. Font Awesome:
   • Font Awesome was used on all pages throughout the website to add the social media icons.
4. Git
   • Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
5. GitHub:
   • GitHub is used to store the projects code after being pushed from Git.
6. Balsamiq:
   • Balsamiq was used to create the wireframes during the design process.

Testing

The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project.

• W3C Markup Validator - No errors but 2 warnings for index .html. No errors or warnings for gallery.html or contact.html.
• W3C CSS Validator - Results

Testing User Stories from User Experience (UX) Section

• First Time Visitor Goals

  1. As a First Time Visitor, I want to easily understand the main purpose of the site and learn more about the organisation.

     1. Upon entering the site, users are automatically greeted with a clean and easily readable navigation bar to go to the page of their choice. Underneath there is a Hero Image with Text.
     2. The main points are made immediately with the hero image

  2. As a First Time Visitor, I want to be able to easily be able to navigate throughout the site to find content.

     • The site has been designed to be fluid and never to entrap the user. At the top of each page there is a clean navigation bar, each link describes what the page they will end up at clearly.

  3. As a First Time Visitor, I want to look for testimonials to understand what their users think of them and see if they are trusted. I also want to locate their social media links to see their following on social media to determine how trusted and known they are.

     • The user can locate social media links in the footer on every page.

• Returning Visitor and Frequent User Goals

  1. As a Returning Visitor, I want to find the best way to get in contact with the organisation with any questions I may have.

     1. The navigation bar clearly highlights the "Contact Us" Page.
     2. Here they can fill out the form on the page or are given the phone number and address of the company.
     3. There is a map on the "Contact Us" Page so that the offices can be easily found for first time visitors.
     4. The footer contains links to the organisations Social Media platform pages.
     5. Whichever link they click, it will be open up in a new tab to ensure the user can easily get back to the website.

  2. As a Returning Visitor, I want to find the Facebook Group link so that I can join and interact with others in the community.

     1. The Facebook Page can be found at the footer of every page and will open a new tab for the user and more information can be found on the Facebook page.

Further Testing

• The Website has been tested on Google Chrome, Firefox, Microsoft Edge and Opera browsers.
• The website was viewed on a variety of devices such as Large Desktop, Laptop, Samsung Galaxy Tab 'A' tablet, Samsung Galaxy S20+ & Samsung Galaxy A5.
• A large amount of testing was done to ensure that all pages were linking correctly.

Known Bugs

• On some mobile devices the text on the hero image pushes down too much and becomes 'invisible' because it's the same colour as the body. With more time to experiment, this should be fixed.

Deployment

GitHub Pages

The project was deployed to GitHub Pages using the following steps...

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository (not top of page), locate the "Settings" Button on the menu.
   • Alternatively Click Here for a GIF demonstrating the process starting from Step 2.
3. Scroll down the Settings page until you locate the "GitHub Pages" Section.
4. Under "Source", click the dropdown called "None" and select "Master Branch".
5. The page will automatically refresh.
6. Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.

Forking the GitHub Repository

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...

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
3. You should now have a copy of the original repository in your GitHub account.

Making a Local Clone

1. Log in to GitHub and locate the GitHub Repository
2. Under the repository name, click "Clone or download".
3. To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
4. Open Git Bash
5. Change the current working directory to the location where you want the cloned directory to be made.
6. Type git clone, and then paste the URL you copied in Step 3.

$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY

7. Press Enter. Your local clone will be created.

$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
> 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.

Credits

README

• The 'Deployment' section above has been taken directly from the Code Institute example README.md file as has the layout of the document.

Code

• Bootstrap4: Bootstrap Library used throughout the project mainly to make site responsive using the Bootstrap Grid System.

• The code for the image carousel was taken from Bootstrap carousel documentation and modified by the developer to add the images and 'alt' values.

• Google Maps: For the site map used on the 'Contact Us' page.

Content

• All content was written by the developer with inspiration taken from all of the previous Code Institute training videos and project 'mock-up' sites such as 'Coders Coffeehouse' and 'Whiskey Drop'.

Media

• The training vehicle images were provided by Geoff O'Brien who took the original photographs and owns the intellectual rights to each image.

• The 'instructor' images were taken from Google Images and verified as free to use.

Acknowledgements

• My Mentor for helpful feedback.

• Geoff O'Brien was the owner / proprieter of the real Specialised Transport Training driving school. He gave me permission to use the business name and supplied all of the training vehicle images.