This is a website for a community run preschool. The purpose of the site is to provide parents/caregivers with up to date news and information of their child�s preschool and increase their online presence with the aim to increase enrolment rates.

A live demo can be found [here] (https://parkslee.github.io/milestone_1/)

My goal in the design was to make it as easy as possible for parents/caregivers to access up to date information while keeping a clean and clear feel to the site. the colour scheme was chosen to be colourful, vibrant and inviting as this is a website for a preschool.

for parents/caregivers I wanted to provide a site where they could access all the relevant information that they needed in one place this was to include a term calendar in the calendar section, a map in the about me section for new starters, an easy way to contact the preschool within the means of a form, whether it be to book a visit, request a meeting with a teacher or order new uniform. I also wanted to provide an area for the term newsletter with important requests from the preschool as well as a recent updates section to show any upcoming closures, charity work or new idea sessions that are coming up.

I gathered this information by reaching out to the preschool and parent/caregivers of students who attend and documented the features that they would like to see present on the website and seeing if they matched what I envisioned.

Owner = preschool User = parent/caregiver

• As a user, I need to able to find core information about the preschool.

• As a user, I would like a section with new updates

• As a user, I want to book a visit

• as a user, I want to view images, so I can get a feel for the preschool prior to a visit

• As an owner, we need a recent update, so we can update on latest charity fund raising and improvements to the preschool separate to the newsletter

• As an owner, we need a term calendar, so that we can keep parents up to date with inset days and term times

• As an owner, we need a contact section, so that parents can ask general enquires

• As an owner, we need an about me page, so that we can show off our successes and give history to the preschool

I started to use Balsamic for my mock-up of this [project] (https://github.com/parkslee/milestone_1/tree/master/assets/Mockup)

I will build a multi-page website I will have the following features (requested by client)

• about section

• contact section

• newsletter

• term calendar

• recent updates

The following is agreed to be left to my decision

• navigation style

• layout style

• contact form

• term calendar - timeline

• social links - as the preschool does have a social media presence

The following has been decided by myself and the client to be left out due to safe guarding and parental permission in the time scale to complete project

• image section

Social links have been added so that users if they wish can view previous images of the preschool that have been pre-approved

HTML CSS BOOTSTRAP 4

The site is built on bootstrap 4 with the use of font awesome for social link icons, hover.css was going to be used in the earlier version of the site but I have opted against the use of this as it added no value to the site.

In the future I would like to add an image section to show the preschool as it is, due to safe guarding this has not been possible in the timeframe of the project. I would also like to add an animated logo to the nav-brand to bring a little personality while still maintaining the clear look and feel to the website. I would like to implement an archive of newsletters and updates. At present the form on the site is not functional and will be completed at a later date as I progress through my learning.

when the website was completed it was presented to the preschool for members of staff to test. I also shared the site to several parents for them to feedback. This website has also been tested on both emulated devices through google development tools, several browsers and several physical devices, results below:

• Google chrome - website displays with no issues
• Microsoft edge - website displays fine no issues
• Fire fox - website displays fine no issues

• Galaxy S5
• Google pixel 2
• Google pixel 2 xl
• IPhone 5,6,7,8
• IPhone 6,7,8 plus
• IPhone x
• IPad
• IPad pro

all emulated devices display with no issues, early stages of testing found issues with background images not covering the view port in landscape, but has since been rectified. galaxy S5 and all iPhone models show the nav toggler to move down a line, this does not affect functionality, for this to stay on the top line I would have to compromise the title font size which would not be very visible.

• Google pixel 2
• Samsung note 10
• IPhone se
• IPhone 4
• IPad mini
• IPhone x
• Samsung s8
• Microsoft surface pro

with physical devices website displayS and functionS with no issues, IPhone SE as with emulated model, navigation toggler moves down a line.

through testing I asked 4 parents to use the website and feedback their experience I also gave them the following scenarios:

• check to find out the dates for Christmas half term
• find out where the preschool is located
• contact the preschool to request a meeting -test form-
• tell me an article you find in the newsletter

4 parents were able to complete the scenarios with no issues, and found the website to be clear and simple to use.

The site is hosted via GitHub pages. I find this to be easy to use with no need to upload to a different host, as all my files are already pushed to GitHub.

• The text for section index.html jumbotron was copied from Maldon community preschool website home page
• The text for section about.html was copied from Maldon community preschool website about and home page(https://www.maldoncommunitypreschool.co.uk/)
• The text for section newsletter.html was copied from [Maldon community preschool newsletter email](/assets/Spring Newsletter 2019[7].docx)
• The text for section updates.html was copied from [Maldon community preschool pta email](/assets/PTA NEWSLETTER FEB.docx)
• The text for section calender.html was researched from skyparksecure.com - google search

• all images in this project were acquired from www.pexels.com

• at the start of the project i took inspiration from the disneylife.com website, as it is a friendly child themed website and i was drawn towards the parallax effect. but as i started to lay the foundations of the project and thinking of the functionality and what was wanted from the owners and the users i realised that this just needed to be an informative easy to navigate site.

pencilshave-bg.jpg - contact.html - (https://www.pexels.com/photo/blue-and-purple-color-pencils-159825/)

crayon-bg.jpeg - updates.html - (https://www.pexels.com/photo/assorted-color-crayons-2078147/)

newsletter-bg.jpeg - newsletter.html - (https://www.pexels.com/photo/art-design-palette-colors-19679/)

glass_pencil.jpg - calender.html - (https://www.pexels.com/photo/pencils-in-clear-glass-container-1699772/)

about-bg.jpg - about.html - (https://www.pexels.com/photo/multi-colored-pencils-over-white-background-286559/)

bg-image2.jpeg - index.html - (https://www.pexels.com/photo/art-art-materials-brush-color-207666/)

• tutorial for display properties bootstrap - (https://medium.com/wdstack/bootstrap-4-hidden-visible-dd969a4c5854) d-none d-md-block - used in footer to hide charity information and twitter social link to declutter mobile view.

d-none d-lg-block - used for index.html in mobile view to hide newsletter and recent updates. newsletter and recent updates will appear in desktop view

This class is also used in the navbar of index.html to display nav items for newsletter and recent updates in mobile view.

• google map embed - (https://support.google.com/maps/answer/144361?co=GENIE.Platform%3DDesktop&hl=en) google map displayed on about.html

• bootstrap time line - (https://bootsnipp.com/snippets/OzQj) timeline used on calender.html .

content has been edited to suit the need of the project

styling has been changed to suit the project

• grey indicates - past term
• green - next term
• red- upcoming term