FirstAider

Site can be viewed at First-Aider

A site for a fictional first aid training provider with differant pages showing the services they provide.

Technologies Used

This project was generated with:

• Angular CLI version 10.1.7.
• Bootstrap
• Typescript
• HTML
• SCSS
• Github
• Font Awesome

User Experience

I wanted the user to be able to view and navigate around the site easily, I chose a predominately blue and pale white colour scheme as I felt this would help to showcase the site better and to help it stand out from a lot of the other first aid sites which are usually a red and white colour scheme.

The home page is divided into sections which give a snippet of information about the pages that a user can navigate to from the navbar or from a link in the section itself.

When accessing the site a user can immediately see some of the upcoming first aid courses that are available, The courses section of the home page gives the most important information to the user and does not try to overwhelm them with too much information. If a user requires more information they can navigate to the courses page where they are given more information and the option of booking a course, If they choose to book a course they are navigated to a booking form where they can register for their chosen course.

The next section on the home page is an about segment, here a user again gets a snippet of information detailing the history of the first aid company. If a user wants to read more they can navigate to the about page of the site. Navigating to this page allows the user more information about the company and a link to the courses page.

After the about section is the contact section which should the user have any questions about any of the courses they can contact someone through the contact page. When on the contact page there is a form that can be filled out by a user to ask any questions that they may have, There is also a card with the company contact details here should someone prefer to contact the company differantely.

The FAQ section has an accordion style question area and a section about covid related questions, The accordion section will hold the most relevant questions, Underneath this section is a covid information area. If a user has a question that is not in the FAQ section they can access a link here that will bring them to the contact page.

A shop section will inform the user as to the existence of a shop section within the site where they may purchase first aid related items. When visiting the shop section of the site a user will see all the products available to buy, When they have made their choice they can navigate to a checkout page to complete the transaction

A testimonial section at the end of the home page is used to demonstrate the level of happiness that previous students of the first aider courses have for the professional way that the courses were presented. :)

Testing

The project has been tested on various differant screens to ensure that it is a mobile friendly site. Manual site testing shows that all links are working correctly, All forms have working validation

Local Deployment

If you wish to copy the project follow these steps:

• Visit here
• Click on the green Code button.
• To clone the repo using http copy the provided address.
• Open a git bash terminal.
• Navigate to a folder which will hold the cloned project.
• Type: git clone copied address and press enter.
• Open the project in your editor.
• Run npm install to include dependencies.
• Run the development server with ng serve.

Credits

• Stack Overflow the solution to a lot of questions.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.