A responsive website built in Bootstrap, HTML and CSS. The website and company are fictious and have been created for the purpose of Project/Milestone 1 'User Centric Frontend Development Milestone Project' of the Code Institute Level 5 Diploma in Web Application Development. The company, address, logo and information contained on the website are fictious.
- A responsive website available on all devices.
- The website should be easy to read for all users.
- The website should have five pages; Home, Timetable, About, Contact and Prices.
- The website should compliment the colors of the logo.
- A home page with a simple menu linking to the other four pages.
- The footer should contain copyright to the left and social icons with links on the right.
- The home page should also consist of a Hero style banner with a slight animation to capture the visitors attention.
- There should be an overlay welcoming the visitor to the site
- Below the Hero will be three columns for classes, with an image, small description of the class and a button to click through to the contact us page
- A timetable page with a simple menu linking to the other four pages.
- The footer should contain copyright to the left and social icons with links on the right.
- The timetable page should also consist othe title under the header.
- The table which will display the contents of the pool's operating times will take the remaining space.
- A timetable page with a simple menu linking to the other four pages.
- The footer should contain copyright to the left and social icons with links on the right.
- The timetable page should also consist othe title under the header.
- The table which will display the contents of the pool's operating times will take the remaining space.
- A timetable page with a simple menu linking to the other four pages.
- The footer should contain copyright to the left and social icons with links on the right.
- On the left of the page is static content showing the contact information relating to the company.
- On the right of the page there should be a contact form that submits via email to the client and customer.
- A prices page with a simple menu linking to the other four pages.
- The footer should contain copyright to the left and social icons with links on the right.
- The prices page should also consist othe title under the header.
- The table which will display the contents of the price structure and will take the remaining space.
About The Author @djpotts21
I have worked as a web designer for several years in both in-house companies and agencies producing websites. During this time, I have used WordPress and various WordPress builders to build my websites.
Having worked with WordPress since 2011, I am very confident in my ability to build websites using WordPress. Through the Code Institute, I am currently pursuing a Level 5 Diploma in Web Application Development through the goal of expanding my knowledge and fine-tuning my HTML, CSS, and JS skills.
Click here to view the site on my Git Pages
HTML Testing was conducted using the Markup Validation Service by W3C, each page was tested by direct input, the results are linked below.
CSS Testing was conducted using the Markup Validation Service by W3C, each page was tested by direct input, the results are linked below.
- HTML
- CSS
- Bootstrap 5.2.3
- Fontawsome 6.4.0
The primary colors of the website are made up of four colors;
- Resolution | Blue Hex #252E8A | rgb(37, 46, 138) | hsl(235, 58%, 34%)
- Picton Blue | Hex #4AA5D3 | rgb(74, 165, 211) | hsl(200, 61%, 56%)
- 'Not quite' | Black Hex #262626 | rgb(38, 38, 38) | hsl(0, 0%, 15%)
- 'Not quite' |White Hex #f2f2f2 | rgb(242, 242, 242) | hsl(0, 0%, 95%)
- Black | Black Hex #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%)
- Poppins font provided by Google Fonts which is used in the headings.
- Linked in the header of each html using Google provided code to link and preconnect.
- Roboto font provided by Google Fonts which is used in the content.
- Linked in the header of each html using Google provided code to link and preconnect.
- Hero Banner of two children being taught swimming by a female teacher 'swimming-lessons-7339440.jpg' is by Anilsharma26 on Pixabay
- Keith Profile Photo a man in gym clothing is by 'sport-1685834.jpg' Keifit on Pixabay
- Samantha's Profile Photo a female dancing 'woman-4036106.jpg' is byTony Möörk on Pixabay
- Johan's Profile Photo a male with blue eyes and blonde hair '4k-5552541.jpg' is by Image by Sam Williams on Pixabay
- Class 1 photo of a adult male swimming 'man-462874.jpg' is by Michal Jarmoluk on Pixabay
- Class 2 photo of a baby being held by mother in a swimming pool 'baby-76087.jpg' is by McStone on Pixabay
- Class 3 photo of a child swimming with an orange swimming aid 'swim-619074.jpg' is by TaniaVdB on Pixabay
- Learn2swim logo was created for free using Logomaker.com
- Web 3 Forms for providing the api url to submit any form oontent to and sending to an email. URL: https://web3forms.com/
- The paragraph under the heading "Why should you teach a baby to swim?" on the home page starting "Teaching a baby to swim..." was written by Easy-Peasy.AI also known as ChatGPT, the statement was sent "write a small paragraph explaining the benefits of teaching a baby to swim" and the AI responded with the paragraph.
- The paragraph under the heading "Why should you teach a child to swim?" on the home page starting "Teach a child to swim..." was written by Easy-Peasy.AI also known as ChatGPT, the statement was sent "write a small paragraph explaining the benefits of teaching an children to swim" and the AI responded with the paragraph.
- The paragraph under the heading "Why should an adult learn to swim?" on the home page starting "Teach an adult to swim..." was written by Easy-Peasy.AI also known as ChatGPT, the statement was sent "write a small paragraph explaining the benefits of teaching an adult to swim" and the AI responded with the paragraph.
- The paragrah on the about us page explaining the story of the fictious company Learn2swim was written by Easy-Peasy.AI also known as ChatGPT the statement was sent "write a company history for a website about the company learn 2 swim based in Northumberland in the United Kingdom" and the AI responded with the paragraph.
- Keith's Bio was written by Easy-Peasy.AI also known as ChatGPT the statement was sent "write a short personal bio for a swimming instructor called keith"
- Samanthas's Bio was written by Easy-Peasy.AI also known as ChatGPT the statement was sent "write a short personal bio for a swimming instructor called samantha she is a keen dancer"
- Johan's Bio was written by Easy-Peasy.AI also known as ChatGPT the statement was sent "write a short personal bio for a swimming instructor called johan he looks a bit like Eminem"
- Classes Images on home page were streching out of ratio.
- FIX: After some research the css property of object-fit was used to set the image to cover so the image ratio would remain at 1:1. Thanks to W3schools - CSS The object-fit Property
- Timetable page - Tables were running off page on mobile view. If I reduced the content size to fit width of device, it would be unreadable.
- Fix: I split the table in to three sections for mobile and created two classes which the displayed the desktop table class only on the desktop view and hiding the mobile tables. Whilst on mobile hiding the desktop tables but displaying the split table on mobiles.
If you have any feedback, please reach out to me at 131493188+djpotts21@users.noreply.github.com.