No Boundaries

This is my first milestone project towards my full-stack developer course with the Code Insitute. I have created a website for a new business called no boundaries. They are a new business and already have a basic wordpress website, so this project came at a good time to benefit both parties.

No Boundaries provide sessions using various cricket and exercise based activities to promote and improve a child’s physical, mental and social wellbeing. By encouraging and increasing these three areas of wellbeing, a child has the best chance to thrive in all areas of their future lives.

This project will be creating a new website for No Boundaries to use when introducing themselves to schools and councils, in the hope of securing bookings.

UX

This website will be used by teachers, councils and parents. The main aim of the website will be to introduce the business and show what they do, as well as tell them some information about the team. This will be in the hope of securing the booking of sessions for the teachers school, or saturday sessions through the council. The website may also be used as a means of contact between user and staff.

Due to the mix of people using the website, the visual language will need to have a balanced look between professional - for the teachers, and playful - to show the parents that it will be a fun program for their children to take part in. I will hope to achive this by having the website look clean and sharp with bright colors.

User Stories

• I am a Headteacher of a primary school. I have secured some funding to use towards an afterschool activity for the pupils of my school.

  A lot of the children are already members of Saturday football teams, so I would like an alternitive to football. However, there should also be a focus on helping the pupils thrive as people, rather than just sport coaching.

  I need to know that the pupils will be looked after by a team of experienced and professional people.

  The website will show that the sessions focus on the social and mental wellbeing of the pupils, as well as the physical wellbeing. I will also point out some key facts about childrens well being, such as obesity levels and despression / anxiety figures in young children. The website will have an introduction to the staff so the teachers can get more familiar with who they are going to be working with. There will also be a contact page where teachers can get in touch should they require more information or a meeting.

• I am the Leisure and Culture officer at the local council. I am looking for activities to put on in the community to engage children with socialising and becoming more active.

  I will need to be able to get in contact with the team should I like what I see.

  I would like to put on some Saturday sessions which will help young children in my community make new friends as well as getting children physically fitter in the aim of reducing child obesity. Due to the rise in the interest of cricket in England, since the victory in the cricket world cup last year, this will be good activity to invest in.

  Again, the website will show key stats with childrens health, which will hopefully match the concerns of the counciller to engage an initial connection. Focusing on the three main aims of the business, social - mental and physical wellbeing of children. The website will need to point out that the team are focused in the London and Surrey area.

• I am the parent of a pupil in primary school.

  My daughter is shy, and struggles to socialise with other children and I am concerned about her confidence which may be detramental in the future. I am looking at after school / weekend clubs which she will be able to participate in which will not be too aggresive or full on, as we have found some team sports to be overwhelming.

  I need to know that the club I sign my team up to share the same concerns about my child and these will be accomodated for.

  Cricket can be known as 'the gentlemans game' - not in the sense that only men should play, but that it is not as aggresive, violent or nasty as other sports. I would need to show this through the visual language, by using soft colors, friendly fonts, and rounded edges. The content should make the user feel confident that their children are in safe hands. An introduction to the team will do this, as well as showing a focus on adapting social skills.

I did not use any mock-ups for this project. However, one reflection, I feel this was a mistake, and added wasted time to the project. I will be making mockups in the future.

Features

• Homepage - A brief introduction to the business and some key stats to encourage people to invest in the page.

• What We do - This will be a more detailed introduction to the business and the core values.

• Meet The Team - A page to show visitors to the site the members of No Boundaries, with some information about them.

• The Facts - Some facts on childrens mental health and obesity issues in the UK.

• Contact - A contact form so people wishing to speak to the team have a way to get in touch.

Fonts

I have used the Google Fonts library to make the text on my page visually appealing.

@import url("https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Raleway:wght@400;700;900&display=swap");

• Luckiest Guy - This font was used as it is playful and similar to the existing logo used by the company. I was not entirely happy with how the existing logo worked on the page, as they did not have a high quality version of the logo. So I created one which is very simiar to achieve a more professional look for my project.

• Raleway - I selected this font to use throughout the site as it works well as both a heading in bold and in normal weight for other text. It looks professional, friendly and is easy to read against the block colors of the background.

color

I used Adobe Color to select the scheme for the website. The main color to be used was both the bright blue and grey. So I looked through the palettes to find one which features these two colors, but which also had a red to tie in to the cricket theme.

color: #3c3d40 color: #43aed9 color: #f2f2f2 color: #f26052 color: #d95252

Images

The stock images used throughout the site were taken from the existing No Boundaries website. These are free to use images originally taken from Pixabay

The homepage hero image was taken from Unsplash

The images of the members of the team were sent to me by one of the directors of No Boundaries.

Future Features

• In the future, I would wish to add more photos of the team in action to replace the stock images on the about us page.

• I would also like to add a booking system onto the site. This would be a page where people could log in and see the sessions they currently have booked, as well as the ability to book new sessions.

• I would also make the contact form fully functional so that people will actually be able to get in touch with the team.

• I have used a color scheme that is loosely based on the companies existing branding (a lot of use of bright light blue), with the use of some additional colors. In the future, should the website go on to be used by the company, I would accomodate any changes they wish to make to fit more with their own brand.

• Similarly, I used a logo which is only based on the actual existing logo. This was because the existing image I had for the logo didn't appear as sharp as making a text based logo. I kept the playful font, however added a more subtle red to fit in with the color scheme I chose. I would change this to add in the actual logo once handing over to the business.

Technologies Used

• HTML5 This was used to create the structure of the site.

• CSS This was used to make the page more visually appealing.

• Bootstrap This project used Bootstrap as a framework. The main use of this will be for the layout and grid of the page.

• Google-Fonts I have used range of fonts from Google to make the page more visually appealing.

• FontawsomeI will have used FontAwesome for the pictograms on my site.

• JQuery This was used for the mobile menu in the navbar.

• GitPod This was used to create the HTML and CSS for the site.

• GitHub This was used for hosting and version control of the website. From here, I also used the Code Institute template to begin the coding of my site.

Testing

The key points from my user stories were to make sure the website showed that the team were proffesional, friendly, experienced, and shared the concerns of mental health / obesity in children.

I made sure the site looked professional by using a simple font, and a consistent color scheme throughout the site to keep on brand across all pages.

I used a softer / pastel color scheme to accomodate for the friendly aspect of the business. Also, using rouinded edges on all boxes backed this up so the site did not look too clunky.

I created a page for the team so that the people would be introduced to the members and will get to know more about them before enquring.

A facts page was also created to show why the business is created and that the team share the same passions and concerns as the parents / teachers / councilors wanting to run an after school club.

A contact form was made on the last page. This was so that the users of the site can get in touch should they require more information or want to make a booking.

Changes to the page

After a mid project call with my mentor, and following his advice, it was clear that the page lacked width and I should be more confident in using the whole width of the page. It also made me realise that the page was quite plain, and lacked navigation throughout the site, apart from the top nav bar.

So following the call, I added more images, more links, and more width across the site:

I also made the Meet us page easier on the eye with less red across the page:

All the pages are linked through the top nav bar, and can easily be navigated throughout the site. It is consistent across all pages so the user can easily navigated between the pages at any point. A consistent look also aids with the user being able to go from page to page with ease.

Manual Testing

1. Nav Bar:

   1. From the homepage - click on the first item of the Nav Bar - About Us
   2. From About Us, click on the second link - Meet The Team
   3. From Meet the Team, click on the third link - The Facts
   4. From The Facts Click on the Final link - Contact Us
   5. Repeat the steps so that all links have been clicked on to all pages, ensuring they all link to the correct page

2. The Facts:

   1. Hover over / click the first box to reveal a the fact behind the number
   2. repeat for all boxes

3. Contact Form:

   1. Without filling out any fields click the submit button - An error message appears asking to fill out the first box.
   2. Fill out the first box and click the submit button - An error message appears asking you to submit the email field.
   3. Fill out the email field with an invalid email address - An error message appears asking for a valid email address.
   4. Fill out the email with a valid email address and click submit - An error message appears asking to fill out the comments box.
   5. Fill out all boxes and click submit - The page refreshes as their is no code behind the form.

4. Footer:

   1. When hovering over the 4 links at the bottom, the link changes from white to blue.
   2. When clicking the Facebook link - you are taken to the No Boundaries Facebook page.
   3. When clicking the Instagram link - you are taken to the No Boundaries Instagram page.
   4. When clicking the Youtube link - you are taken to the No Boundaries Youtube page.
   5. When clicking the Twitter link - you are taken to Twitter.

Cross Platform Testing

I have used the following browsers to test my site:

1. Google Chrome - Version 83.0.4103.61
2. Mozilla Firefox - Version 76.0.1
3. Microsoft Edge - Version 44.18362.449.0

The only bug I found when testing across the different platforms was that the placeholder text on the contact page did not display in white as intended, but instead displayed in grey. This made it hard to read. I found a fix for this on W3School so applied this in the CSS which worked.

Device Testing

I have used Chromes device similator to test how it looked on different devices and at different sizes. I checked the following devices:

1. iPad pro
2. iPad
3. iPhone X
4. iPhone 6/7/8 Plus
5. iPhone 6/7/8
6. Kindle Fire HDX
7. Galaxy S5

These were tested both landscape and portrait.

As well as this, I used my Huawei P20 to test the page on mobile.

After asking for feedback through the Peer-Code-Review thread on Slack, it was brought to my attention that the footer was directly underneath content on pages which did not have a lot of content, which was not common practice. This was happening on The facts and content pages. After looking through various pages of people having the same issue, I found a fix that worked and applied this.

I also had an issue on the facts page when simulating the iPhone 5s device, where the boxes would overflow the right side of the page. I set a media query for screensizes up to 320px to make the boxes and text smaller, which solved the issue.

Validating Code

I have used the following to validate my code:

1. W3C HTML Validator - This was used to test all the pages' HTML.
2. W3C CSS Validator - This was used to test the CSS.

The only issue I had was in the CSS Validator which said that some border colors were the same as the background color for some boxes.

In this section, you need to convince the assessor that you have conducted enough testing to legitimately believe that the site works well. Essentially, in this part you will want to go over all of your user stories from the UX section and ensure that they all work as intended, with the project providing an easy and straightforward way for the users to achieve their goals.

Deployment

I used GitHub and Gitpod to create all pages and css on my site. This was initially started with the Code Institute Template.

This was used for version control and regularly pushed changes using the terminal in Gitpod.

One issue I encountered with this, was accidently closing a page having not pushed my changes through. I lost some work from this and had to re-do this. This turned out as a bit of a blessing as the page looked better the second time in doing it, but also taught me to make sure to push changes through regularly.

To deploy the page and make it viewable to others, I used Github pages:

1. In the No Boundaries project I clicked on the settings tab.
2. I scrolled down to Github Pages and changed the Source to Master Branch.
3. This meant I could then share my page with others using the following link: No Boundaries

Content

All text used on this website was taken from the existing No-Boundaries page. In parts, some of the text has been amended / adapted.

Acknowledgements

• I received inspiration for this project from my old housemate at University. He has recently started up the 'No Boundaries' business and looking to make a living from this. Starting my course has come at a good time for both of us, as it gave me the opprtunity to base my project on something real, that may make a difference in the real world. It also gives the business the chance to have a bespoke website built for them for free.

• I would like to thank Joel Douglas for the input on this project.

• A thank you to Nick Hampshire and Adam London for letting me use their business to base my project on.

• Also, a big thankyou to all the Code Institute team. The course and training videos have helped me learn so much in a short space of time.