User Design Experience - Milestone Project 1

Miri After School Website

Contents

1. UX

Miri After School Website is mobile-first responsive for mobile and desktop viewing. The main set up idea of this website was to introduce contemporary idealogy of children and elderly co-living in a centre via internet broadcasting.

2. Features

There are basically four viewing pages linked on the website; namely Home, Flagship, Contact and Download.
Download is working properly where Miri After School brochure in PDF can be obtained. Contact will be further developed to enable prompting inquiries.

3. Technologies Applied

This project applied the below as the languages and tools in the web development.

• HTML5 is HyperText Markup Language.
• CSS3 is Cascading Style Sheets.
• JavaScript is a high-level, interpreted programming language.
• PyCharm is the IDE used to develop the website.
• GitHub is used:
  1. as a remote backup of code used in the project.
  2. as a remote server for another user to see the code used in the project.
  3. for users to view the deployed version of the website. The deployed version can be viewed here!.
• Bootstrap is used to create easier & cleaner responsiveness in addition with helping maintain padding and margins. It's also used to include modal features to the website to give it a professional look.
• JQuery is used to simplify DOM manipulation.

4. Testing

All pages were tested locally and on GitHub using Google Chrome, Internet Explorer or Safari developer tools. The tests were mainly checking the responsiveness of all pages in different sizes, using iPhone5/6/7/8/X, Galaxy android phones, iPad 1/2/3/Pro and desktop. All links were tested. The contact form was tested by ability to submit empty or incomplete form.

5. Deployment

The project was built using AWS Educate where the project is committed & pushed to GitHub.

• To view the deployed version of Miri After School I needed to take the following steps:
  1. Log in to GitHub.
  2. Select miri-after-school from the list of repositories.
  3. Select Settings from the navbar near the top of the page.
  4. Scroll down to where it says Github Pages, there is a subtitle labelled Source, click that and change the source to be master branch.

The page is automatically refreshed and ready for deployment, it can take up to 5-10 minutes for it to be viewable. One may add this repository to local workspace by cloning. For further information on cloning, visit How to clone from GitHub.

6. Credits

Content

• All content are original ideas of the Developer, who is also the founder of Miri After School.

Media

• The logo for the website was commercially created as Miri After School business logo in 2014.
• Other than the logo, images used on the website are for educational purposes only.

Acknowledgements and Inspiration

• This project has got its inspiration from several websites:

Elder Home Share CoLiving.com

A sincere thank you to my mentor - Spencer Barriball - for the precious times and guidances.

7. Disclaimer

All content on the website, including images, are used for educational purposes only.