A live demo of the finished project can be found here.

1. Introduce basic foundation of Chemistry to kids.
2. Teach them how to read the Periodic Table.
3. Get them involved in science experiments at home.

1. Kids at the age of 10 years old who has the basic foundation of Science.
   • Primary 3 starts taking up science subject.
2. Kids as young as 6 years old can engage in fun experiments.

1. Keep the readers engage
2. User goal: make them reach to periodic table page and explore the elements

How I started.

1. Find out the age on when kids can start learning Chemistry.
   • Primary 3 starts taking up science subject.
2. Introduce the basics of Periodic Table - Primary 4 (10yrs old and above)
3. Add on easy science experiments for younger kids (6yr)

1. Refered to [Chem4Kids] (http://www.chem4kids.com/) to use as main content on Chemistry.
2. Narrowed down the key topics to the following:
   • About Chemistry
   • Matter
   • Atom
   • Elements & Reaction
     • Periodic Table

Medium-Fidelity mock up

I researched in [awwwards.com] (https://www.awwwards.com/) and [dribbble.com] (https://dribbble.com/) for kids websites

1. Fonts - I used 1 type of font that gives a readable look
2. The website consist of main page and 1 sub page.
   • Main page has the following content
     1. Chemistry (introduction)
     2. Matter
     3. Atom
     4. Elements & Reaction (Short for Chemical Reaction)
   • Periodic Table (sub page)
     1. Young Chemist (includes videos about fun experiments.)
3. Colours used are striking and images are more cartoon-like for engagement.
4. Original content from Chem4Kids website are mostly in paragraph format. I break the long-winded text and added mark on keywords and inserted images in between to keep the engagement going.
5. This is not responsive and suitable for ipad as periodic table cannot be collapsed.

1. Main page - included youtube videos and illustrations.
2. Sub page - the periodic table and fun experiements that shows videos.
3. Return to top page

• Shows more information on each element when clicked or hovered.
• Create interactive quiz on each topics

List of tools used for this project:

• Getbootstrap
  • The project uses getbootstrap to make the site responsive.
• Fontawesome
  • The project uses fontawesome to add icons for contact and footer pages.
• Powr.io
  • The project uses powr.io to get more followers in shop's instagram account.
• Bootstrap’sJavaScript
  • The project uses Bootstrap's Javascript to make animation work in carousel.
• [JQuery]
• Markdown
  • The project uses MarkdownCheatsheet as quick reference for documenting readme file.
• AdobeXD
  • The project uses AdobeXD as wireframing tool for creating medium-fidelity mock up and converting images for web.
• [HTML5] For consistent rendering in every browser.
• [LanguageAttribute] For translation tools to determine what rules to use.
• [CSS3]
• [MediaQuery] Added breakpoints for parts of the design that is different.
• [Illustrator] For designing elements and main page.

I shared this with my 10 year old son. Noticed his reaction has stopped on the part with videos. These instructions / questions where given and asked to him while browsing the website.

• What is the website about?
• Do you understand it is about?
• Which part do you like the most in the website?

I used Visual Studio Code to work on my code locally. I used Github to deploy my project. I have separated folders for images, plug ins and readme files.

1. Videos used

   • 10 Easy Science Experiments - That Will Amaze Kids by Raising da Vinci (https://www.youtube.com/watch?v=4MHn9Q5NtdY)
   • What Is An Atom? | The Dr. Binocs Show | Best Learning Videos For Kids by Peekaboo Kidz (https://www.youtube.com/watch?v=jMW_0Ro6b5c)
   • Good Thinking! — Chemical Reactions in Action by Smithsonian Science Education Center (https://www.youtube.com/watch?v=5iowJs6MryI)
   • Easy Science Experiments for kids by Mr Duck (https://www.youtube.com/watch?v=McVpXiSttnU)
   • Javascript Tutorials
     • (https://www.youtube.com/watch?v=FN_ffvw_ksE)
     • javascript search bar
     • Group by
     • Display JSON data in table
     • JSON data array value access
     • Scroll to Top by rdallaire of codepen
     • Pop up box

2. Content used - [Chem4Kids] (http://www.chem4kids.com/) The grammar used is relatable and easy to understand.

3. I referred to w3schools for text styling and table format

4. Whitespaces in div id - [https://stackoverflow.com/questions/9285451/handling-css-id-and-classes-with-spaces]

• The images used are from freepik
  • Vectors by brgfx, macrovector
  • Teacher with kids photo by gorynvd
  • Reference for parents Chemistry For Kids Doesn’t Have To Be Boring - https://www.superprof.com/blog/what-is-chemistry-for-kids/

Inspiration layouts

1. https://www.behance.net/gallery/86790109/Wonderschool-Visual-identity-Illustrations

• This website is dedicated to my son and two nephews.