Fly for Miles

Vital Signs

Fly for Miles was the final project I created for the General Assembly Front End Web Design course. It was a 10-week evening class to learn the basics of HTML, CSS, and JavaScript/jQuery.

Goal of project

The task was to create a website that exhibited skill in HTML, CSS, and jQuery/JavaScript. I considered creating a portfolio site, but made the decision that it was beyond the scope of the course and I wouldn't be able to create the best showcase for my work. And so, I turned to one of my hobbies: traveling using miles/point redemptions.

I find travel points and miles to be an engaging hobby because it's enabled me to travel to some amazing places. While I'm not necessarily in the market to help others maximize their acquisition, I saw a potential gap between knowledge of point values vs. redemptions. An example being a friend who used points to fly from Boston to Rochester when the points he used were worth much more than the price paid.

Screenshots of the final site

My experience (my insights)

For what might look like a very simple calculator site, it required a lot of work and refinement. I had purposefully created a project that I knew I could complete in the time allocated. I also knew that there were refinements that I could add after the class had ended. I treated this much as I would any other UX assignment. I started by creating a site map with what the expected content and interactions would be for each part of the user journey. Next I began writing the HTML for the site. When I initially created the wireframes, I had a multi-page flow in mind, which I quickly abandoned in favor of a single page with sections that dynamicallly displayed. This ended up simplifying the project immensely. I began writing the CSS after that and I applied some colors I'd settled on as well as the font I'd picked from Google Fonts (selected because of the free CDN service). After that it was down to writing all the jQuery and JavaScript to create the interactivity of the page. The information required to hook everything up came in the final few classes, so there was a rush at the end to apply as much of that learning into the project as quickly as possible.

The outcome

I finished the project on time and was able to demo it to the class. The calculator works! I even had enough time left at the end to add a nifty (albeit still work in progress/buggy) animation of an airplane before the results display. It's the kind of thing that will add a little bit of that meaningful UX wait time, but perhaps spark a little joy in the process. And the most interesting part (to me) is it was created with only CSS.

I can now say that I know enough to create a very basic HTML based website. I have confidence in my ability to use a browser Inspect Element to figure out what might be going wrong and am able to work with a development team to correct it.

Copyright 2021
Eric Hansen

Privacy