Overview

This project was built for eAchieve Academy, a company that provides an online learning platform for students to get an education in grades K-12. This was a complete site redesign and built from the ground up with no frameworks or libraries.

I worked on the front end of the project, building the HTML, SCSS, and JavaScript for the site. I was responsible for taking the Photoshop mockups and building the

Technical Details

Architecture

• Frontend: HTML, SCSS, JavaScript

Features

Feature 1: Animated Multi-step Form

This site had an incredibly complex multi-step form that needed to be built from the ground up. In addition to the form, each step had really fancy animations that were there to make the form more engaging and fun for the users.

It was really quite fun to build all these animations and transitions for each step of the form. Things on the desk would roll, the globe would spin, the keys on the keyboard actually typed out “eAchieve Academy” as you progressed through the form. It even created an ID card for the user as you worked through the form which was really cool to see on screen.

Development Process

Challenges

1. Completely Vanilla: The consulting company I worked at while building this site had strict policies against using frameworks or libraries. It made many things much more complicated than they needed to be in the name of “we build everything in house from scratch” and “we don’t use frameworks or libraries”.
2. CSS Animations: I had never used CSS animations to this extent before this project. There was a ton of trial and error to get the timing working correctly and all the transitions and animations working properly in each step of the form.