7th Gateshead Scouts

7th Gateshead Scouts is my local scout group where I help as a Cub leader. Currently the scout group does not have a website to advertise exactly what the group offers in terms of activities and experiences. My aim for this project is to create a website for the 7th Gateshead Scouts so that they are able to advertise the group.

The idea to create a website for the 7th came to me when I was discussing with the Group leader about having a bigger presence online as so far the group hasn't got any social media accouts or a website to help advertise the group. The group has space and could benefit from some new scouts.

This is my first of four milestone projects that make up my Full Stack Web Development course at THE CODE INSTITUTE. The main requirements are to make a responsive website with HTML5 and CSS3

Here is a link to my live website https://callumhearne.github.io/7th-Gateshead-Scouts/

UX

Main aims

• To provide knowledge into what Scouts as a whole is about.
• To provide knowledge into what the 7th offers to new Scouts.
• To create a simple and responsive website that is suitable for all devices.
• To create a website that is simple to use with clear menus and a consistent design.
• To create a website that keeps parents up to with events coming up.

User Stories

Project Stackholder:

• I am the creator of the project and also a leader at the scout group. I would like the website to help attract potential scouts to our group.
• I am the group leader at the 7th Gateshead Scouts and I would like this this website to help introduce new scouts to the scouting organisation as a whole as well as my group

New users

• I am a user who heard about the 7th through another parents at school and decided to check the website to see who what the group involves and what sort of events they hold.
• I am a user who was searching for a local scout group to enlist my son in and found the 7th's group website where I was able to have an insight into the group.

Returning user

• I am a returning user who has returned to the website to check the calendar to make sure that my kids don't miss out on any of the events coming up.
• I am a returning user that users the website to keep up to date with all the activites happening.

Tablet user

• I am a table user and I want to able to use the website perfectly on my tablet.

Design Process

1. Strategy plane: From the beginning of the project I knew I wanted to make a simple website that had all the necessary information included to inform the users about the 7th Gateshead Scouts Group. I also aimed for this project to be a website that members of the group can also use to keep up to date with what is going on with the group and what events are happening. I started the UX planning by asking the group leader what sort of questions he gets asked by newcomers so I can.

2. Scope plane: After deciding what I wanted my website to be for this project I then began to plan on what key features I would use to achieve my goal. To decide what I wanted I had a look at what I could with what I had learnt from CSS, HTML5 and Bootstrap and decided to make a calandar for users to keep up to date with events, images showing the scout group, a promo video showing new users what scouts are about and sections describing what scouts and what the 7th are about.

3. Structure plane: Now that I knew what I wanted for the website I needed to decide what I wanted on each page. I decided for the first page that I would include a small introdution into scouts with a small paragraph on what scouts is, how big the community and a short promo video. I didnt want to make this section too big as it was not the main focus of the website. After that I added a small introduction into the 7th. On the second page I wanted to deicate this page to the 7th starting with a big image of the 7th's scouts followed by a section describing what the weekly meetings entail and what sort of other activites the 7th get involved in. I added a little upcoming events section to the page to show a little into what the group is doing. This meets one of aims of informing new people about who the 7th are. For the finally page I made a calandar listing all of the upcoming events and have descriptons for all of them as this meets my other aim of the current group members being able to keep up to date and aware of upcoming events.

4. Skeleton plane: To navigate the menu I have decided on using a simple nav bar at the top of the page. I decided that this was the best thing to do as the website is very simple and doesn't need any complexity to the navigation. I prioritised having a small introduction into the scouts so that new users are brought up to speed straight away and is on the same page as everyone before looking at the rest of the website.

5. Surface plane: For the colour scheme I decided on a the Groups traditional Green. I decided to use the green on the header and footer while useing white with black text for the core of the website. I did this because I didn't want the colours to be overpowering for the user while still adding some of the 7th's personality to the website.

With this in mind I started to plan my website on figma testing out the colour scheme. When designing the calendar cards I first though of using the same green as the heaer and footer but thought this was overpowering so opted for a lighter green making the page feel more inviting.

I then went on to Google fonts to deicde on what sort of fonts I was looking for. I deicded are Roboto as i felt it was a very easy font to read and I was in no need of a fancy font because I was prioritising functionality over style.

Wireframing my project on figma

Before I started to create my website on Github/Gitpod I first designed it on Figma so that I had an idea on what I was creating and how I was going to create. This allowed me to have an understanding of the tools I was going to use before I made it.

Link to my Figma https://www.figma.com/file/7kE3g8mC9nmEaxhjXDwdJk/7th-Gateshead-First-Assignment?node-id=0%3A1

Features

The website consits of 3 pages. Each page has a nav bar to be able to navigate between the pages.

Cosistent features across all pages:

• A navigation bar that is consistent and responive on all pages.
• A footer with a email link that consistent and responsive on all pages.

Homepage:

• The page starts with a image.
• There is introduction text into what scouting is.
• Followed by a little promo video on the scouts.
• A new section telling the user a little bit about the 7th as a group.
• A image of a scout to finish the page.

7th Gateshead:

• The page starts with a picture of the 7th scouts.
• Followed by 2 bits of text with titles explaining a little bit about the 7th and what they are about.
• Last on the page is a few bootstraps cards showing a few of the upcoming scout events with a photo for each card.

Calandar:

• The calandar page starts with a 2 titles one explaining that the cards are upcoming events and the other is the year of the events.
• There is 6 bootstrap cards with events, dates, descriptions and pictures.
• There is another title splitting up 2020 events from 2021.

Technology used

• HTML5
  • HTML5 was used to create and add content to the website.
• CSS3
  • CSS3 was used to style all of the HTML5 to match my design.
• JavaScript
  • JaveScript was used to help make my nav bar repsonsive.
• Bootstrap framework
  • Bootstrap was used to create the nav bar, footer, cards, and containers for the website.
• Gitpod
  • Gitpod was used as a space for me to be able to code and test my website.
• GitHub
  • GitHub was used to host my website and store all of my code

Additional technology used

• Figma
  • Figma was used so that I can design my website before I started to make it.
• FontAwesome
  • I used FontAwesome to get the icons for my social media links.
• Google Fonts
  • I used google fonts to set the fonts for my website (roboto).

Testing:

All of the testing is on a seperate document. This is the link https://github.com/callumhearne/7th-Gateshead-Scouts/blob/master/Testing.

Deploying my project:

I created my project on GitHub and coded it on Gitpod. The following link wil take you to me live project. https://callumhearne.github.io/7th-Gateshead-Scouts/

Deploying to GitHub

To deploy my work on GitHub I did the following:

1. I opened up my settings.
2. Scrolled down to "GitHub Pages" section.
3. From here, I selected the "master branch" as my source.
4. Then selected "save".

Credits:

Content

All of the content was fictional and made up by me apart from the name of the scout group and the names of events.

Images

7th Gateshead :

• The first photo on the Homepage and 7th page were sent in by the group leader. Unsplash :
• The Images used for the bottom of the Homepage and cards were from the Unsplash website.

Video

Youtube :

• The promo video was taken directly from the scouts youtube channel. Here is the link to the video https://www.youtube.com/watch?v=Jlrimx5fjTQ.

Acknowlegdements:

Thank you to the following people who helped with support and guidance at different stages in the project:

• The guidance and support of my mentor Seun Owonikoko.
• The supportive Code Institute community, including my fellow students and the tutor support team.
• The 7th Group for allowing me to use the group name and photos.