Click here to view the Embrace Autism project live
- Introduction
- UX
- Development Process
- Design Process page by page
- Features
- Technologies Used
- Testing
- Deployment
- Credits
- Acknowledgements
- Notes
This milestone project is the first of four that is to contribute towards my Full Stack Web Developer Diploma with Code Institute. The main requirements in this project are to design a responsive website using HTML5 and CSS3 with the option of using CSS libraries/frameworks like Bootstrap. There is a minimum requirement of three web pages or three separate sections on one page. I chose to go with four webpages as I wanted to keep the homepage content minimum, the about page and resources page relevant with the right level of content and a fourth page offering users the option to subscribe on a mailing list. All this I feel would work well when using the menu bar to navigate around the site.
Embrace Autism is a fictional information website that is mainly aimed at parents who have a child with a diagnosis of Autism (ASD – Autistic Spectrum Disorder). The website provides advice and ideas on how to occupy and keep Autistic children happy, engaged and active. As a father of an Autistic child, I know how difficult it can be to entertain and keep your child happy and fulfilled. Therefore, I had the idea to design a website that can offer help and advice drawn upon my own experiences and what has been taught to me. Embrace Autism is a website that you can access time and time again to get new ideas and useful links to external websites relevant to ASD. There is the option to subscribe to the Embrace Autism mailing list by providing your name and email address (info@embrace-autism.co.uk) to get regular new ideas, free of charge.
Every Friday morning my wife and I attend an Autism intervention workshop online with other parents and NHS professionals to discuss the best ways to help when raising a child with Autism. The knowledge gained is often information I like to share with other parents and therefore the Embrace Autism website idea I believe is the perfect platform to offer the information gained from these workshops.
Date this project started: 9th March 2021
- Parents/parental guardians of children who have just had a formal diagnoses of Autism
- Parents/parental guardians of children with Autism who may need more support
- Parents/parental guardians who feel their child is on the Autistic spectrum
- Older children with Autism
- To inform other parents of potential new ways to help in their day-to-day life when bringing up their Child with Autism.
- Offer suggestive ways to improve the quality of life for all members of the family involved.
- To encourage parents and all member of the family not to ignore the condition but instead realise what it is, embrace it and find ways that will work to understand and cope well with it.
- To let parents, know that they aren't alone and that there are many other parents and families out there that have been through challenging times when raising a child with Autism.
- To make it easy for all users to navigate around the site using the menu navigation bar with the option to read more about the service being offered.
- To make it easy and quick to subscribe for weekly/monthly updates offering the user help and advice in the form of a mailing list.
- To offer useful links to creditable charities and organisations that can offer more in-depth advice and support.
- The main aim from a developer's point is to maximise as many subscribed members on Embrace Autism's mailing list as possible by encouraging users to complete the very quick and easy subscribe form. By doing this, the Embrace Autism site will gain more popularity and a wealth of subscribers creating a fantastic community of parents going through a similar journey.
-
I am a parent with a young child that's just been diagnosed with Autism. I need some general advice on what to do, now that I know what my child's condition is. I don't necessarily need specific advice at this stage, I just need to be pointed in the right direction.
-
I have a teenage Son who has Autism. He only wants to play on his computer games every day. He hardly leaves the house and I'm concerned about his health and wellbeing. I would like some help with improving my Son's life style.
-
I have five children. The two youngest have been diagnosed with Autism at different levels on the spectrum. I spend a lot of time with them which leaves little time left to spend with my older children and husband. I am in need of some support to free up more time whilst keeping all my children happy and entertained.
-
I work for a large Autism charity and see that Embrace Autism is offering advice and support from a parent's point of view with experience raising a child on the Autistic spectrum. How do I reach out to the founders of this website to provide more information and advice to help assist their site visitors?
-
I'm a teenager with Autism and have high-level sensory need. I find it difficult to wear a face mask when I'm in shops and with most shops insisting, people wear one, it's becoming very hard to go out. Is there anything I can do to make it easier for me when shopping?
- I knew I wanted to create a website based on a subject that is close to my heart. I came up with the name "Embrace Autism" for the website and knew early on what type of site it was going to be, who it was aimed for and what it can offer. Once I had completed the Strategy and Scope planes knowing what was and what wasn't needed or achievable, I then focused on the structure and layout.
- I wanted to keep the Structure straightforward so that all users visiting the site would see the same flow, patterns and layout making their experience on the site enjoyable and easy to navigate around. I put together a list of features i wanted.
-
The content for the website mainly came from my own experiences and therefore this took a little time to put together. I used a couple of external sources to help with the content from other Autism websites I am familiar with. Credits to these sites can be found at the bottom of this README document for reference within the 'Credits' section.
-
Once I knew what structure I had in mind I moved onto the Skeleton plane and used Balsamiq wireframes to start some blueprints on how the website looked. Initially I was building a website with three pages, however, after going through the design process early on I knew that four pages was needed to spread out the right level of content in the right places. This I believe would offer better overall UX. For reference to my wireframes, version three was when the wireframing changed from three to four pages.
Please click PDF Wireframes to see all versions
-
Moving on to the surface plane of the UX process, I wanted to make sure there was consistence with regards to the header (logo name and navigation menu) and footer throughout all pages (social media icons, email icons and copyright text). I also wanted to show an even and relevant amount of information depending on which page the user is on.
-
I wanted the website to have a minimum of three pages, home (index.html), about (about.html) and subscribe (subscribe.html). However, as mentioned above a fourth page for resources (resources.html) would be needed to help structure the content in the right place. I also considered a blog page, however, at this stage I feel that this wouldn’t be needed for a new website like this.
-
As my target audience would be mainly other parents with a child on the Autistic spectrum, the design I wanted to achieve is a clean and friendly website that is easy to use, gain useful information and subscribe to a mailing list. I also wanted to make sure the website was attractive enough for visitors to return back to as they would be aware that new information would be added regularly. In order to get the right style website, I felt the layout of the site, colour schemes and font choices were going to be an important part of the design process. I took my time testing different font styles in Google Fonts and chose the Ubuntu - Sans-serif (fallback) font family for most of the website content. The Ubuntu font was chosen as it appears friendly and very readable to the eye. I chose the Kalam - Cursive (fallback) font family for the logo text, homepage cover text and where ever the word 'Autism' appeared throughout the site. The Kalam font was chosen to stand out and show as a striking style to the eye and completely different to most of the website content. At the same time both fonts I believe work well together which was equally important to have.
-
When starting the design of the website the first thing I wanted to do was set the default font style, font colours and background colours within the body element for all pages.
-
Full details can be found below for reference: -
- Font-family: Ubuntu - Sans-serif (fallback) will only be used if Ubuntu doesn't load)
- Font colour - Dark blue: hex:274c77
- Background Colour – Very light grey: hex:e7ecef
-
The home and subscribe pages have minimum content. The homepage has been designed to gain the users attention and encourage them to easily navigate to the about page, resources page and then onto the subscribe page to register.
-
I changed the colour of the website a couple of times and used Coolors to assist with a couple of colours that worked well to compliment the light blue already found and that I wanted to use. The colours chosen from Coolors was a dark blue and very light grey. I needed a colour to stand out when buttons and text links are being hovered over. I originally picked a green colour for this, however, after using the Color Scheme Designer Site I found a more compatible colour. I picked a soft orange which worked very well.
-
Full details of all colours used for the website can be found below: -
- Light Blue: hex:479ce0, rgb:71,156,224, hsl:207°,71%,58%
- Dark blue (from Coolors) hex:274c77, rgb:39,76,119, hsl:212°,51%,31%
- Very light grey (from Coolors) hex:e7ecef , rgb:231,236,239, hsl:202°,20%,92%
- Hover orange hex:#daac62, rgb:218,172,98, hsl:37°,61.9%,62% (selected by using DevTools 'Toggler Colour Picker' to match this shade of orange)
-
I wanted to offer users the option of making contact by email. I was going to apply a generic email address at the top of the homepage in text format, however after moving it about a few times I decided to add an icon within the footer of every page which looked much more professional.
-
I took some time to work on making my HTML accessible for the visually impaired. I made sure that anchor elements, media clips, external links and internal links had the relevant aria-labels and sr-only classes added. I also made sure that certain text had aria-labelled by applied and that all image elements had the alt attribute in place.
-
The homepage design went through a few trials with choosing the right type of image I wanted and the positioning of it. When I found this image I knew it would work well for what I wanted to achieve on my landing page. The image has striking colours with clear version of an adult and a child embracing a colourful heart-shaped object expressing love and care. The background is a beautiful light blue which matches my colour scheme throughout the site.
-
I wanted to use all colours pre-picked for the homepage and with the hero image being colourful I felt this would maximise the attraction for all users.
-
The cover text highlights three key benefits about the website. The text was formatted as an unordered list with the bullet points removed. At first the unordered list was nested in a div element; however, I wanted the list to sit inside a semantic element to show improved web development. I used the aside element to achieve this. On a desktop screen size, the colours I chose for the cover text list was a dark blue with a light grey background colour using rgba(106, 112, 116, 0.7). The 'alpha' was used to show a softened colour background and to appear to blend into the hero image. On small laptop, tablet and mobile screen sizes the cover text sits below the hero image with a blue background colour and the font colour in light grey. I chose to move this below the hero image so the user would clearly see the hero image first and then the cover text below with the idea to achieve better overall UX.
-
There was an ordered list using numbers 1-3 giving an easy step by step process to move throughout the website. However, after careful consideration I decided to remove the ordered list and strengthen the look of the navigation menu bar with easy-to-understand menu titles within the navigation bar. Early versions of my embrace-autism-wireframes-1.pdf shows this feature.
-
Below the cover text there is a 'SUBSCRIBE FOR FREE' button which is linked to the subscribe page. On all screen sizes this is dark blue with the light grey text. On small laptop, tablet and mobile screen sizes this sits below the hero image and cover text. The wording is in capital letters and when hovered over, the background colour changes to orange showing the user that it can be clicked.
-
After removing the ordered list, I had the option to increase the size of the cover text and 'SUBSCRIBE FOR FREE' button making both more visible to users.
-
I decided to add a h1 header to complete the design of the homepage, stating what the website is about an who it is aimed for. On large screen sizes the colour of this is dark blue in Ubuntu font styling except for the word 'Autism' which is in Kalam font. It can be found above the hero image, central to the page. On small laptop, mobile and tablet size screens this header is below the hero image and above the cover text in the centre of the screen. The header colour is light blue with the word 'Autism' in dark blue to make it stand out more on smaller devices.
-
The about page has a dark blue background colour within the middle section of the page. The Ubuntu font is used for all content in light grey colour. The structure of the page leans to the left side to make the content easier to read. The page holds information in the form of sub headers, paragraphs, an unordered list (bullet points) a factsheet and two short media clips in reference to Autism. The information you will find on this page is about my family's personal journey with Autism, the websites goals, next steps, subscribe button to click on and useful external links at the bottom and just above the footer. The factsheet has contrasting colours with a light grey background and dark blue font colour. This is done purposely to stand out from the page. At the bottom of the factsheet there is small text confirming the source of the fact in red. This is also a link to click on which takes the user straight to the relevant website of where the fact came from. When hovering over this small text the font colour will change to orange to show it is clickable.
-
There are two external media clips for users to watch. The first media clip is about two and half minutes long and titled "What is Autism" The second is about five and half minutes long and is titled "Amazing Things Happen!". This media clips are credited at the bottom of this README in the credits section. Within the bullet points inside the Website Goals section, there is a couple of additional links to the resource and subscribe pages to encourage users to click on. These link words are in a light blue colour to stand out from the rest of the text. When hovering over these text links the font colour will change to orange to show they are clickable.
-
The factsheet and media clips are wrapped in bootstraps row and column containers for responsiveness across all screen sizes.
-
The 'SUBSCRIBE FOR FREE' button wording is in capital letters and when hovering over this, the background colour changes to orange.
-
There are also horizontal line breaks between each section within this page to make it easy to navigate through. The layout is identical on all screen sizes with little changes made using media queries to adjust the size and positioning of the factsheet, subscribe button and useful links section.
-
The resources page has a dark blue background colour within the main body just like the about page. The Ubuntu font is used for all content with a light grey colour finish.
-
The main purpose for this page is to provide users with clear to read advice and ideas. I decided to keep this page simple with the option to read and much or as little as the user wanted. There are also horizontal breaks between each information paragraph to make it easy to navigate throughout the page.
-
Below the information advice and ideas section there is some additional content encouraging the user to visit the subscribe page to register. Underneath this content there is a 'SUBSCRIBE FOR FREE' button which is linked to the subscribe page. This button is light blue with the wording in light grey. The wording is in capital letters and when hovering over this button the background colour changes to a orange. Below there is a useful links section which includes three charity organisation logos for users to click on. These links are external to the websites of the charities. When clicked, the user will see that the external website will open in a new tab on their browser. This is to make sure that if the user wants to return to Embrace Autism, the site is still open to easily go back to. The layout is identical on all screen sizes with changes made using media queries to adjust the size and positioning of the factsheet, subscribe button and useful links section.
-
For the about and resources pages, I used bootstrap containers, rows and columns to structure the layout of this page which made it easier to manage with regards to responsive design.
-
The subscribe page has a dark blue background colour just like the about and resource pages. The Ubuntu font is used for all content with a light grey colour.
-
The main purpose for this page is the form. I used Bootstrap5 to format the form for responsive design. The form is at the top of this page and sits in a contrasting background colour of light grey with dark blue text. There is five parts of the form for users to complete. Name, email address, weekly subscription or monthly subscription (only one to be selected) and submit button for the user to click when ready to subscribe. The submit button has a light grey font colour and has a dark blue background colour that's turns orange when hovered over. The wording 'SUBSCRIBE' is in capital letters. The form cannot be sent until all details are completed with a name, email address and the weekly or monthly radio button selected. If the form is submitted without any of this information included, a message 'please fill in this field' will appear to inform the user.
-
Above the form there is a central sub header to confirm what the form is for. Below the form there is another sub header with a short paragraph to explain to the user what they can expect once they've subscribed.
-
Below this there is a 'Autism is my Superpower' image. This was found on Amazon and a front cover to a book called Autism Is My Super Power: Notebook for Autism Awareness: 14 (Meaningful Quote Journals with College-Ruled Lines).
-
Below this image there’s the useful links section which includes three charity organisation logos for users to click on. These links are external to the websites of the charities. When any one of the logo links is clicked, the user will see that the external website will open in a new tab page on their browser. This is to make sure that if the user wants to return to Embrace Autism, the site is still open to easily go back to.
-
The layout is identical on all screen sizes with minimal changes made using media queries to adjust the form, image and useful links section.
-
I made sure that the design of this page has minimal content so the user can focus on completing the form. There are also horizontal breaks within the section to make it easy to navigate throughout the page.
-
For this page I used bootstrap to help with the form setup which made it easier to manage with regards to responsive design.
(index.html, about.html, resources.html and subscribe.html)
-
The navigation bar is created using Bootstrap5 and therefore mobile first responsive. From small mobiles up to and including tablets the navigation bar is formatted as a hamburger menu (3 horizontal bars, one on top of the other) I checked all screen sizes and it was the largest screen (2560px) that needed media queries adding to change the positioning of the logo text and navigation bar. The logo text has been moved to the left and the navigation bar to the right on the very large screen sizes.
-
I then checked the smallest possible screen size (Galaxy Fold mobile: 280px) and noticed that I needed to apply some styling using media queries to adjust the images, text and media clips.
-
The footer has minimum content with icons and a very short paragraph included. For good UX I centred the footer and therefore on any device this will appear central and easy to view and click any particular social media or email icon.
(index.html)
- The Hero-image, h1 header, cover text and subscribe button has been adjusted and repositioned to fit within all screen sizes. The header, cover text and subscribe button is all positioned below the hero image for small mobiles up to and including tablets. This I believe offers better overall UX.
(about.html)
-
The font size, height and width has been adjusted to fit on smaller screens for the factsheet and media clips.
-
The 'useful links' logos needed to be reduced in size and re-positioned to fit on smaller screens. A long with this the sub header above these logos also had to be adjusted in size to keep in proportion with the logos.
-
The Subscribe button needed to be adjusted in size for both small screens and large screens. Again, this was to keep in proportion with everything else on the page.
-
The media clips have been repositioned side by side the factsheet for devices from laptop size screens upwards. On tablet one media clip is next to the factsheet and the second media clip is below the factsheet. One of the last adjustments made was to centre the media clip sitting below the factsheet for better UX. On mobile screen sizes the media clips sit below each other and below the factsheet to give the best UX possible.
(resources.html)
- The subscribe button needed to be adjusted on most screen sizes to look in proportion with the rest of the web page.
- The useful links section has been adjusted slightly to fit within any screen size.
(subscribe.html)
- The subscribe form stays central and at the top of this page. As the screen sizes getting bigger the form adjusted in size according to the screen size.
- The 'Autism is my Superpower' image is central and re-sized on every screen size to keep in proportion.
- The useful links section had been adjusted slightly to fit within any screen size.
My project has four web pages all found by using the menu navigation bar at the top of all pages.
- Text logo link at the top left header.
- Navigation bar at the top right header.
- Four icons and copyright text centred at the bottom of the footer.
- The main feature of this page is a large hero image.
- A header stating what the website is about.
- A small list of website benefits (cover text).
- A 'SUBSCRIBE FOR FREE' button which is a link to the subscribe page.
- This page has a dark blue background colour with a light grey text colour.
- A sub header 'Our Autism Journey' with three short paragraphs below.
- A sub header 'Website Goals' with 3 bullet points of text. Within the bullet point text there is a couple of links to the 'resources' and 'subscribe' pages.
- A factsheet with relevant source information.
- Two media clips to watch on screen or full screen if preferred.
- There is another sub header 'The next step' with a short paragraph.
- A 'SUBSCRIBE FOR FREE' button linked to the subscribe page.
- External link logos to three charities.
- Sub header 'Advice and Ideas'.
- Sub header 'Don't stop going out' with a paragraph.
- Sub header 'Routines and good habits' with a paragraph.
- Sub header 'Tips for Parenting a Child on the Autism Spectrum' with a paragraph.
- Sub header 'Encouraging a Non-Verbal Child to Communicate' with a paragraph.
- All above sub headers and corresponding paragraphs have been placed in a text box. All paragraphs are collapsed by default giving the user the option to pick which one to read. Each text box header has a widget next to it and when a header is hovered over it changes colour to show the user this is clickable.
- A sub header 'The next step' with a short paragraph.
- A 'SUBSCRIBE FOR FREE' button linked to the subscribe page.
- External link logos to three charities.
- A sub header 'Subscribe to Embrace Autism' at the top.
- A form for subscribing to the Embrace Autism mailing list.
- The form includes a name and email section to complete along with the choice of either a weekly or monthly subscription by selecting the relevant radio buttons.
- The error message 'please fill in this field' will appear if the form isn't completed fully.
- A sub header 'What to expect now' and paragraph to read after completing the form.
- A 'Autism is my Superpower' image below the paragraph which I feel is a nice touch to finish the users experience on the site as they subscribe.
- External link logos to three charities.
- A dedicated page for media clips would be good to implement. Adding the page would be quick, however, it would take time researching appropriate clips to include.
- Further advice and ideas on the resources page would be good to have, however, this would take some time to complete as the content would need be relevant to the website aims and structure layout.
- I considered a blog page however, I felt that at this stage the website would need to be running for a while with plenty of subscribers before a blog can be added.
- I also considered a live chat option for parents to talk to each other and share ideas. However, the website would need to more established first and at this stage in the course I feel that I don't have the skillset to implement this yet.
- To lead on from the live chat idea, I would like to make sure that there is some level of security and understand the responsibilities of offering a secure website with a live chat feature.
- The idea of offering a user login/password option would be good to have in the future as the website gains more traffic.
-
HTML5 - The markup language used for all site content, many images and media clips. Used in line with the HTML essentials module completed.
-
CSS3 - Styling HTML5 coding with declarations. Used in line with the CSS essentials module completed
-
Code Institute - I reverted back to lessons to help with some coding.
-
Slack - One of the most useful tools when looking for assistance, quickly
-
Chrome DevTools - Used to help amend coding to achieve the best results for each page. Used to examine the overall performance of the site with Lighthouse.
-
Bootstrap 5.0 - Used for the navigation menu, containers and form. The grid system was used in the best way I could to keep the site mobile first responsive.
-
Balsamiq - Used to create my wireframes. This tool was used six times as adjustments were made during the design process of my website.
-
Fontawesome - I used four 'free of charge' icons across all pages of the website footer.
-
Pexels - I used one "free' image from this site for the subscribe page
-
istockphoto - I used one "chargeable" image from this site for my homepage hero image. It cost £8.40 and was worth every penny as the quality of this image was perfect for what I wanted on my homepage.
-
Google Fonts - I used two font families on my website. The Ubuntu - Sans-serif for most of the website content and the Kalam - Cursive for the text logo and for most of the 'Autism' wording throughout the site.
-
Lipsum - Used to copy and paste Lorem Ipsum text at the beginning of my project to assist in the structure and layout.
-
Gitpod - Used to complete my HTML and CSS coding for my MS1 project
-
Github - GitHub is used to store the projects code after being pushed from Git.
-
Git - Git was used for version control by using the Gitpod terminal to commit to Git and Push to GitHub.
-
W3C Markup Validation Service - Used to test all HTML coding for all four pages.
-
W3C CSS Validation Service - Used to test all CSS coding.
Testing information can be found in a separate testing document
(Date this project was deployed: 1st April 2021)
The project was deployed to GitHub Pages doing the following: -
-
At the top of the Repository I clicked the settings option on the menu.
-
I scrolled down the settings page to the GitHub Pages Section.
-
Under Source, I clicked the dropdown option called none and selected Master Branch.
-
The page automatically refreshed with a URL for me to use to show my live site.
-
I Scrolled down the page to obtain the published site link to enable me to share with others.
For a more in-depth guide about Configuring a publishing source from Github pages please click here.
By forking the GitHub Repository you can make a copy of my original repository on your GitHub account to view and/or make changes without affecting the original repository by doing the following: -
- Log in to GitHub and locate the GitHub Repository
- At the top of the Repository click the settings option on the menu, locate and click the "Fork" Button which is at the top right of the page.
- You should now have a copy of the original repository in your GitHub account.
For a more in-depth guide about how to Fork a repo please click here.
- Log in to GitHub and locate the GitHub Repository
- Next to the the green Gitpod button you will see the dropdown button "code". Click this to open up the option to clone.
- To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
- 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 you copied in Step 3.
- $ git clone Click here
- Press Enter. Your local clone will be created.
-
I obtained content and adapted it for the resources page paragraph titled - Don't stop going out. The content was taken from Autism Speaks - (10) Take your kid out everywhere.
-
I obtained content for the resources page paragraph titled - Routines and good habits. The content was taken from Marcus Autism Center - Establishing routines at home (Why children with autism need routines at home)
-
I obtained content for the resources page paragraph titled - Tips for Parenting a Child on the Autism Spectrum. The content was taken from Web MD - Tips for Parenting a Child on the Autism Spectrum
-
I obtained content for the resources page paragraph titled - Encouraging a Non-Verbal Child to Communicate. The content was taken from Applied Behaviour Analysis Edu - 6 Strategies for Encouraging a Non-Verbal Child to Communicate.
-
Bootstrap 5.0 Library used throughout the project mainly to make the site responsive using the Bootstrap Grid System.
-
Coding for the link to my email icon supplied by my mentor - Seun Owonikoko using w3schools.
- I obtained factual information to support my about page factsheet. The information was taken from the British Medical Association (BMA).
-
I received inspiration for this project by using an image supplied by the Photography - Vejaa. - Image sourced from istockphoto.com and purchased for £8.40
-
Chosen homepage Hero image by photography - Vejaa
Useful links on the about, resources and subscribe pages (about.html, resources.html and subsribe.html)
-
I sourced the Autism NI logo using DevTools. I saw the logo on the official website in an image element and used this on my site.
-
I sourced the National Autistic Society logo using DevTools. I saw the logo on the official website in an image element. It only worked when I used the coding from the point of the 'src' attribute as there was some inline styling which I didn't need as my own CSS was applied afterwards.
-
I sourced the Hidden Disabilities logo using DevTools. I saw the logo on the official website in an image element and used this on my site.
- I found a great image on Amazon as part of a frontcover for a book.
-
The media clips used for my website both came from YouTube. The first clip comes from National Autism Society - What is Autism. The second clip comes from CW Mind - Amazing Things Happen! Both websites for these organisations can be found below.
- w3schools - At certain times throughout this project I needed some reminders of how to write certain code i.e., iframes element to embed the media clips in the about page. Instead of going back to previous lessons i often googled and came across this website.
- My Mentor - Seun Owonikoko
- Other students and Code Institute tutors on the Slack community
- My family for being so supportive, honest and patient with me
This website is for educational purposes only and created for my Code Institute User Centric Frontend Development Milestone Project (MS1)