This post was written by Emily Gutierrez and Steph Laba, former HackerYou Web Development students and current HackerYou web design and development interns.
This is the first post in a three-part series where we will document our progress as we design and develop a responsive web page. We wanted to chronicle our work from the point of conception to its launch. The page itself will be one part infographic, one part brochure and it will be entirely responsive (a dynamic web page that resizes depending upon the size of the screen it is being viewed on).
Each week, we’ll post shots, thoughts and reflections about our progress. We hope this will help inspire and enlighten others curious about web technology, especially potential HackerYou students (because the HackerYou Web Development course with Wes Bos will be back in March).
This week we focused on the design and development of the first portion of the site, the desktop screen. We collected screenshots and documented some of the challenges and successes we’ve had while creating this project so far.
The Concept & The Design:
The first step in this project was to come up with the idea. In addition to showing potential students what HackerYou is like, we also felt it was important to show what we learned from our Intro to the Web Development course, giving potential students an idea of what they will learn once they’ve completed the course. After some discussion we landed on our concept. We would use a candid class photo from our Web Development class with interactive speech bubbles incorporating testimonials from HackerYou alumni. This concept would effectively capture the lively, hands-on vibe of HackerYou and would also be an interesting way to demonstrate the skills we learned. Once we had our concept pinned down we turned to Photoshop to create a fully realized mockup. Here are some of the progress shots:

We used a grid and ruler lines to keep everything aligned, giving the plus signs a scattered but neat look.
Development:
Once we completed our work with Photoshop we got started with the development side of things. We knew that the speech bubble would be the most difficult part, so we decided to tackle it first. Through our existing knowledge of CSS3 and with help from our pal, Google, we were able to effectively execute our intended concept.
Progress clip showing our use of CSS3 animation work, so far.
Be sure to check out the blog next week for the second part our series, where we will be covering our design/development process for tablet-sized screens.
- Steph and Emily







