Project Reflection – Mint Coffee Bar

Project Link

What was the goal?

The goal of this project was to create a responsive, static webpage for a fictional business using the bootstrap framework with minimal javascript code. The focus was to deliver respectable load times and keep the website lite. I purposely limited the project to a single page to challenge myself with keeping all necessary information on one page but displaying it in a design that works.

What did I learn?

Although I did not learn any new technologies, I solidified my knowledge of the bootstrap framework. I was able to add new snippets of useful code to my library and follow new ideas on how to handle certain design techniques.  Since the focus was on reducing load time I was able to optimize the web page to load as fast as 575 milliseconds according to Pingdom. I learned the importance of minimizing file sizes when possible which includes removing comments for production, combining multiple .css files into one, and compressing lines of text into a single line. In general, the smaller the file size the less of a burden the server must carry.

What did I enjoy?

Mostly I enjoyed taking a different approach to my design. Normally I would like to add functionality wherever I can and abuse javascript but in this project’s case, all combined code is less than 5% of all content file size. I let my choice of images and placement of content do the talking for me. My design is aimed to be much more modern than my previous work – which is part of the challenge, to step outside my comfort zone.

The content piece for this project was the coffee cup hero image. Having a strong, stunning hero image brings life to the webpage and adds a default color scheme to work off of. Choosing a color scheme that works has always been a struggle for me, but I learned that color schemes can play off of content.

What did I dislike?

I really dislike that this is a fictional web page. I feel like this is one of my strongest projects thus far and I would like to see this being used in a live environment. This project still seems very expandable. The design was meant to be a single page, but I could definitely work off this more had I chose to.

What could I do better next time?

  • Time management is a definite area of potential improvement for me. I spent maybe a week’s time working on this page, and maybe 10 hours total. A good portion of the time working on it is remember where I left off or picking it up again. If I were to dedicate a longer segment of time to develop a project I believe my results and efficiency would be better.
  • I would like to expand my font library. I feel comfortable with a few fonts and I mainly reuse them over and over. Becoming acquainted with different font faces could benefit me in the future.
  • Bootstrap framework has always been a favorite of mine and it is where I do a majority of my work. Maybe I should expand my horizons and learn a new framework or better yet challenge myself to not use a framework and make everything with pure HTML5, CSS3, and javascript.

Technologies and Tools used?

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.