Coding a kids learning interactive website ABC123
ABC123 is an educational engaging website for kids. The main idea was to code a responsive website from scratch using HTML, CSS and JavaScript that provides exercises to practice the basics of math, the alphabet and grammar using words and letters, while strengthening their digital literacy.
PROJECT
Team project to code a educational website.
DURATION
3 weeks, 2021
GOAL
Using HTML, CSS and JavaScript code an interactive website
TEAM
Vanshika Shah
Shubhangi Singh
Aria Spalding
Ellis Mikelic
Learning has changed amidst the pandemic, such as intermittent daycare and school closures; arguably it could be said that it has stunted the educational development of our youngest generation and has increased prevalence of at-home and virtual learning.
Depending on a child’s age and abilities a more guided aid in learning may be required but is not available to all, thus we thought it would be useful to create an engaging website for kids to practice skills and learn new skills with simplistic interactive exercises.
Designing for children.
WHO
Children aged between 4 to 7 yrs.
WHAT
Interactive educational website.
WHY
To help kids learn and become comfortable with virtual learning.
Process
Deciding the palette.
COLOR
Using primary colors with a few contrasting pastels colors that makes the website look vibrant and attractive. This helps draw the attention of the kids
TYPOGRAPHY
Two types of fonts used,
Cabin Sketch: As the name suggests its a sketchy font that looks informal and like scribbling.
Work Sans: Mainly used for explanations and to convey basic data.
ILLUSTRATIONS
The website revolves around monsters. Each monster has a task to complete with the help of the kid. This helps the kid associate each exercise with a monster.
Experimenting with JavaScript.
Teammates experimenting with different JavaScripts to get the same results.
METHOD 1
Coding process of the Math exercise page
METHOD 2
Coding process of the Letters exercise page.
Figma -> Glitch -> Desktop -> Class Server
We first designed each page on Figma. After that with permutation and combination each element and interaction was coded. First only the HTML and CSS of each page was written and then the JavaScript was incorporated within.
HOMEPAGE
The idea for the homepage was to keep the navigation clear for kids to understand and not to have too many elements together because that could be confusing for the kids. A hover-flip card interaction was added using simple CSS code to make kids curious to explore more.
EXERCISE PAGES
Every monster has a task to accomplish, the kids are invited to be a part of their journey and help the monster with its task. To make it more captivating each exercise is has a story. This helps the children to increase the vocabulary, learn to read full sentences and develop a skill to understand what they are expected to do from it and act accordingly.
Math Page
Letters Page
Testing the website on children aged group 4-7ys.
The ownership of this video belongs to Ellis Mikelic.