Armada Swimming Club is a site that hopes to attract competitive swimmers to join our swimming club. The site will be targeted towards competitive swimmers, who wish to improve their technique, times, strength, performance and potentially join the national team.Armada Swimming Club will support each swimmer during this transition and everything that they need to succeed in their swimming career. Armada Swimming Club will be useful for swimmers to see exactly what we offer if they decide to join our swimming club.
- Navigation Bar
- Picture of the Swimming Pool
- Club Benefits
- Footer
- Gallery
- Contact Us Page
- Thank You Page
- Navigation Bar
- Media Queries
- Additional Pages
The wireframes for the website were produced in Balsamiq. There are frames for a full width display. The final site varies from the wireframes due to developments that occured during the creation process.
- Home Page
- Gallery Page
- Contact Us Page
The website has three pages. The home page is the default loading page, gallery and contact us pages are all accessible primarily from the navigation menu. There is another page called thank you that users only see when they submit a form query.
The fonts chosen were 'Monsterrat' for the headings and 'Lato' for the body text. They fall back to sans-serif respectively.
- 'Monsterrat' was chosen for the headings to give the user an inital welcoming feel.
- 'Lato' is used for the body text as it goes along nicely with the headings whilst being easy to read for all.
The colour scheme eventually chosen is one based on black, dark blue, whitesmoke, cyan, light blue, red and orange. The black colour contrasts with the rest of the images and it is an easy color to read. Dark blue colour is associated with the swimmer's competitive gear. Cyan colour was used to catch the user's eye and to draw their attention to the contact page. The light blue, red and orange were used for contrast between the different social media sites and easier for the user to get engaged with the club.
This website is primarily for competitive swimmers, particularly those who are interested in joining the national swimming team and potentially achieving the qualifying times for the Olympics. The website offers information about what each swimmer will receive once they join our swimming club. Additionally, the website includes a Gallery, where each swimming stroke is shown and three facts at the back of each card associated with each stroke. The website also provides a contact us section where users can contact us if they need any further information about our swimming club. Overall, the website is for anyone who is interested in joining the national team and potentially achieving the qualifying times for the Olympics.
-
Navigation Bar:
-
Featured on all three pages, the full responsive navigation bar includes links to the Logo, Home page, Gallery and Sign Up page and is identical in each page to allow for easy navigation.
-
This section will allow the user to easily navigate from page to page across all devices without having to revert back to the previous page via the ‘back’ button.
-
-
Picture of the Swimming Pool:
-
The picture in the middle shows exactly how the swimming pool looks like.
-
This section includes border line which is eye catching for the user to grab their attention.
-
-
Club Benefits:
-
The club special offer section will allow the user to see the benefits of joining Armada Swimming Club.
-
The user will see what the club offers when signing up to the Armada Swimming Club. This should encourage the user to consider our club in pursuing their future swimming career with us.
-
-
Footer:
-
The footer section includes links to the relevant social media sites for Armada Swimming Club. The links will open to a new tab to allow easy navigation for the user.
-
The footer is valuable to the user as it encourages them to keep connected via social media.
-
The footer also has a contact us section, where it navigates the user to the contact us page, where they can easily sign up for our club.
-
-
Gallery:
-
The gallery will provide the user with supporting images of how each swimming stroke looks likes.
-
This section is valuable to the user as they will be able to easily identify the types of swimming strokes and facts associated with each swimming stroke.
-
-
Contact Us Page:
-
This page will allow the user to get signed up to the Armada Swimming Club to start their swimming career with our competitive team.
-
The user will be able to specify if they have any questions relating to what the club could offer them if they join us.
-
The user will be asked to submit their full name and email address.
-
The user will have the opportunity to see where the swimming pool is located on the map.
-
-
Thank You Page:
-
The user will get a thank you response after submitting their questions about joining our club.
-
The user will have the opportunity to go back to the home page after clicking on the button provided on the thank you page.
-
-
Navigation Bar:
- A search bar.
-
Media Queries:
- A hamburger menu for mobile version.
-
Additional Pages:
-
An additional page displaying the qualifying times for the Olympics.
-
An additional page displaying the qualifying times for the National Team.
-
- Balsamiq - used to create the wireframes.
- HTML5 - provides the content and structure for the website.
- CSS - provides the styling.
- JavaScript - provides the function.
- Gitpod - used to deploy the website.
- Github - used to host and edit the website.
The Armada Swimming Club website has been throughly tested. All the code has been run through the W3C HTML Validator and the W3C CSS Validator. No error were found after the last test.
The HTML validator results for each page are below:
- Home Page
- Gallery Page
- Contact Page
- Thank you Page
The CSS validator results are below:
The website was tested on the following browsers with no visible issues for the user. Google Chrome, Microsoft Edge, Safari and Mozilla Firefox. Appearance, functionality and responsiveness were consistent throughout for a range of device sizes and browsers.
The responsive design tests were carried out manually with Google Chrome DevTools and Responsive Design Checker.
| IPhone SE | Galaxy S8+ | iPhone XR | iPad | iPad Pro | Display <1200px | Display >1200px | |
|---|---|---|---|---|---|---|---|
| Render | pass | pass | pass | pass | pass | pass | pass |
| Images | pass | pass | pass | pass | pass | pass | pass |
| Links | pass | pass | pass | pass | pass | pass | pass |
Header
- By clicking on the main logo will bring the user back to the landing page.
Navigation Bar
-
Hovering on the different navigation bar's links will trigger hover effect, highlighting the link for the user.
-
By clicking on the navigation bar's links will bring the user to the specified page.
Flip Cards
- Hovering over each card on the gallery page, the card will flip and the user will be able to read the facts on each card.
Contact Us Page
-
When filling out the form, the user is required to complete all fields before submitting.
-
By clicking on each field for the details, the outlining of the field is highlighted for the user.
-
By clicking and dragging on the map will move the area shown on the map for the user.
-
By clicking the plus and minus buttons changes the zoom of the map.
Thank you Page
- By clicking the button on the thank you page, it will bring back the user to the home page.
Footer
-
By clicking on the social media links will open the specific website on a new tab.
-
By clicking on the contact us link will bring the user to the contact us page.
-
Resolved
During HTML validation on index.html one bug became known, one of the elements were not closed. It was easily fixed by closing the element at the end. Same bug appeared in testing the gallery.html, again by closing the element at the end the bug was fixed.
-
Unresolved
No bugs found.
-
Performance - How the page performs whilst loading.
-
Accessibility - Is the site acccessible for all users and how can it be improved.
-
Best Practices - Site conforms to industry best practices.
-
SEO - Search engine optimisation. Is the site optimised for search engine result rankings.
- The site was deployed to GitHub pages. The steps to deploy are as follows:
- In the GitHub repository, navigate to the Settings tab.
- Once in Settings, navigate to the Pages tab on the left hand side.
- Under Source, select the branch to master, then click save.
- Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.
The live link can be found here
- A copy of the GitHub Repository can be made by forking the GitHub account. This copy can be viewed and changes can be made to the copy without affecting the original repository. Take the following steps to fork the repository;
- Log in to GitHub and locate the repository.
- On the right hand side of the page inline with the repository name is a button called 'Fork', click on the button to create a copy of the original repository in your GitHub Account.
- The method from cloning a project from GitHub is below:
- Under the repository’s name, click on the code tab.
- In the Clone with HTTPS section, click on the clipboard icon to copy the given URL.
- In your IDE of choice, 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 copied from GitHub.
- Press enter and the local clone will be created.
- Google Fonts : Used for fonts
- Google Maps: Used for maps.
- Font Awesome: Used for icons.
- TinyPNG: Used to compress images.
- W3School: Used for the flip cards
- Britanicca: Used for facts on the cards
- Swimming World: Used for facts on the cards for Backstroke
- Swimming: Used for facts on the cards for freestyle
- Tritonwear: Used for facts on the cards for freestyle
- Your Swim Log: Used for facts on the cards for Butterfly
- British Swim School: Used for facts on the cards for Butterfly
- Newyorker: Used for facts on the cards for Butterfly
- Kids Kiddle: Used for facts on the cards for Breaststroke
- British Swim School: Used for facts on the cards for Breaststroke
- Your Swim Log: Used for facts on the cards for Breaststroke
- Codepen: Used idea for form
- Codepen: Used idea for footer
- Codepen: Used idea for header
- Codepen: Used idea for thank you page
- Readme.md: Used for some ideas
- Pexels: Used for the swimming strokes
- Unsplash: Used for swimming strokes
- Freepik: Used for picture on thank you page
- Giphy: Used for gif
This website was developed and designed as a Portfolio 1 Project for Full Stack Software Developer Diploma course at the Code Institute. I would like to thank my mentor Marcel Mulders, our facilitator Chris Quinn, the Slack community, and all at the Code Institute for their help and support. I really enjoyed working on this project as I have great interest in swimming, which the website is about.