To view the live version of the website please click AngelsHaven

My inspiration in making this project is our 22 months old daughter. We’re not putting her to creche since I’m working from home so pretty much I look after her during the day and my wife when she comes home after work. Thus, we’ve decided to look for a weekend activity where she can play and interact with other kids and at the same time learn new things. We found some interesting classes but unfortunately they were all in different locations. This means we can only chose one since going to other venues will take much of our time and effort. Then I came up with an idea, why not offer the most in demand classes in one location.

Who is the target market?

Ideally our target markets are parents or childminders looking for a meaningful weekend bonding activities with their little ones.

As a parent or childminder:

• I want to see the programs being offered
• I want to see the schedule of classes of each program
• I want to see the prices of each program
• I want to be able to contact the management for further inquiries
• I want to be able to view the website using my mobile phone

All through out the pages we've used 3 colors ( blue, yellow and red) and these were designated for each class offered.

I used Balsamiq Wireframe 4 to create the framework for the website. There have been several modifications as the project progressed but below are the final outputs:

• Desktop View
• Ipad View
• Mobile View

• Navigation Bar - Allows the user to navigate to all the pages of the site, consistent throughout the site
• Footer section - This section will show user information on the company’s address, phone number and email address. At the same time, it gives easy access to the social media platforms
• Home Page/Logo - This page gives the user a snapshot of the class pictures through slide. It also allows the user to see feedback from other parents.
• Our Story - This page gives the user an idea how the concept was formed, summary of the class programs and the people managing each classes.
• Swimming Page - The purpose of this page is to give information on the swimming classes, schedule of classes and price
• Classroom Page - The purpose of this page is to give information on the classroom classes, schedule of classes and price
• Ballgames Page - The purpose of this page is to give information on the ballgames classes, schedule of classes and price
• Contact Us Page - This page will allow the user to send inquiry or comment to the management team. Additionally they will see the location, contact info and location map.

In addition to existing features, my future plans are as follow:

• Add a page where fellow parents can volunteer on either of the classes provided skills are matching with the requirement.
• Add more team members
• Add more photos to each class gallery
• Information about the corona-virus situation and what is being done to prevent the pandemic
• Add corporate social responsibility page that shows how we give back to the community

• HTML5 - To create the structure and content of the page
• CSS3 - Used to style the website
• Bootstrap4- This framework was used to create a responsive mobile-first design and include functioning components.
• Fontawesome - I used the font awesome icons for the social media, location and contact details
• Googlefonts - Used to style the fonts of the website
• Favicon - Used to create the website icon
• Trello - Used as my project management tool

The W3C Markup Validator were used to validate every page to ensure there were no syntax error in the project. Below are the results of the testing:

• CSS
• index.html
• ourstory.html
• swimming/classroom/football.html
• contact.html

The primary tool used to monitor the page responsiveness was Google Chrome Developer Tool. The tests were done using the following platforms:

• Samsung Note 10
• Samsung S9+
• Iphone 5/SE
• Iphone 6/7/8
• Ipad Pro
• Laptop 1024px
• Laptop >1200px

The summary of the tests can be accessed here.

Browser testing was done using below browsers to ensure website can be viewed for all users. The website is responsive on all browsers except for the IE, the entire sites' margin and spacing was all over the place.

• Chrome
• Firefox
• Edge
• Safari
• IE

• Manual testing was done using Samsung Note 10, Sony Z5 and Iphone 5 by family members.
• The responsive design was tested using Responsinator and ami.responsivedesign.is websites.

An error was detected when viewing the page using an Ipad Pro through the Developer tool. There was an ample white space between the bottom of the page and the footer thus placing the footer close to the center of the page. This was fixed by adding more content and margin thus pushing the footer section at the bottom of the page.

1. Log in to GitHub and locate the GitHub Repository
2. At the upper right corner of the Repository Page, click on the "Settings" Button.
3. In the Settings Page, scroll down until you locate the "GitHub Pages" Section.
4. Under "Source", click the dropdown called "None" and select "Master Branch".
5. The page should automatically refresh when you select the Master Branch.
6. Once refreshed, scroll back to the "Github Pages" section to locate link for the deployed website.

1. In the repository page, click on the Clone or Download button ( right beside the Gitpod button).

2. To clone the repository using HTTPS, copy the link in the "Clone with HTTPS"

3. Open Git Bash.

   • Make sure Git Bash App is downloaded in your laptop/desktop
   • Paste the Cloned link using the "Git Bash here" option.

   

4. Type "git clone" in the Git Bash command page, then paste the URL you copied.

   

5. Press Enter to create the local clone.

   

Click Here for additional details and more detailed explanation of the process.

• The text for the classes were copied from Claphandies, Aquababies, Littlekickers and imageswimming
• The logo was created using canva website
• Bootstrap4: Bootstrap Library used throughout the project mainly to make site responsive using the Bootstrap Grid System.
• Additionally, these websites contain great source of inspiration and solution whenever I encounter an error or just looking for a better way of presenting my idea:
  • W3schools
  • Stackoverflow
  • Youtube

• The photos used in this site were obtained from Adobestock, pixabay, pxhere, unsplash and pexels
• I used Trello to monitor my progress

• My Mentor, Precious Ijege, for guidance and helpful insights
• Richard Wells for hosting a call in creating a simple website the-bath-co using Bootstrap4
• And finally, to our daughter - Althea Gabrielle - my inspiration for this project and with-out the support ( emotional and psychological) of my wife - Angel - I wouldn't be able to overcome all my self-doubts.