Code Alive

Simplifying web grids for the designer.
The Mission

As a design student, when the need to code a basic HTML website arose, I found myself in the lurch along with my 29 other classmates. In an attempt to simplify things and make it easier to understand the logic behind grid systems like Bootstrap and Foundation, Code Alive was born. It's a simple website that relies more on visuals than math, so the more visual thinkers find the coding process appealing.

The User: John Conway, 19yo college junior

Our user is a Graphic Design student at a Universe University. He attends classes during the week and enjoys outings with his friends on the weekend. His academic interests lie majorly in graphic design, more specifically print media. He likes to be up to date on trends and technologies. Because of this habit, he considers learning some web design and what's involved in it.

The Content

The content was speci cally developed for the website. The calculators were created as per physical calculations done to develop the calculators. All images were created for this website as well.

  • Homepage: Introduces the website with a simple welcome message and a video demonstrating the web-app.
  • Get Started:Two calculators for grid development along with explanations of their importance and usage.
  • Grab The Code:Provides the 4,8 or 12 column grid CSS. Literature on using rows and columns can be found here.
  • Code Visualizer:Just a page demonstrating the 4,8 and 12 column grid CSS usage.
  • Contribute:Contact page for sending questions, comments and suggestions.

Adobe Illustrator
Adobe Photoshop
Adobe AfterEffects
Sublime Text
HTML, CSS and jQuery

Demo Video Live Website