One Step Learning Center

Powered by HTML, CSS, JavaScript and jQuery

Description:

One Step Learning Center holds after-school programs that offers academic assistance to children. Here is the official website:

I attempted to re-construct the official One Step Learning Center's website so that I can become better at front end web development. I added a simple validation form and an instance of Google Maps to give an authentic feel to this replicated site. When working on the site, I noticed that there were two major design flaws with the original main website. I attempted to avoid this when recreating the site. These were the issues that were kept in mind:

First off, I felt as though there was too much padding and spacing everywhere. As you can tell, everything looks stretched out.

Secondly, the page wasn't responsive enough. For example, at a certain width, the navigation bar and the icon image weren't centered evenly.

What I've Learned:

The most important thing that I've learned is to NEVER validate credentials on the client side - always validate forms on the server side because in regards to cyber security, validating things otherwise would be insecure and practically useless. The top answers from a few threads on Stack Overflow helped me realize my mistake. The important ones can be found here, here and here. I experienced the drawback firsthand. When I tried running the page on Internet Explorer, this alert kept on popping up:

Internet Explorer automatically restricted the JavaScript from running, rendering the entire script useless. Even if users don't use Internet Explorer, other web browsers allow users the option to manually turn JavaScript off or on for all sites. After realizing this fact, I was initially discouraged to publish the form. However, an answer from this thread convinced me otherwise. "In short - always, always validate server-side and then consider client-side validation as an added "extra" to enhance the end user experience."

So overall, the "Donations" page is completely insecure because I'm running the check on the client side and not on the server side. However, I hope that in the future I can learn how to validate forms on the server side so that I can update the form.