Tea Cozy
Create a fictional tea shop according to spec provided in vanilla HTML and CSS.
Getting Started
Simply clone the project and right click the index.html file and select open in browser.
Brief Discussion
A few considerations taken and issues found are noted below.
- I noticed the spec showed the donut image twice in the Tea of the Month section. Once for the Seasonal Donuts line and again for the Myrtle Ave Tea line. I replaced the donut image for Myrtle Ave Tea with the corresponding image provided in the S3 bucket despite it technically not being to spec as I felt that may of been an error.
- The height pixels provided for the images were often slightly off in relation to what the spec image actually showed. I did the pixel heights according to spec, however I do think in real life I would of consulted with the designer and let him/her know and potentially adjust accordingly. For example, notice the locations picture is listed as 500 pixels in height, however that is not really enough in order to space things in accordence with the spec (with the boxes above the tea cup and plenty of room above the locations header).
- I took a few liberties with the
<h>elements margin (in some cases adjusted it inline) to get as close as possilbe to the visual spacing seen in the spec. Again, if this were a situation where I was working with a real life designer I would touch base with him/her prior to adjusting and get their feedback if they want the default margin for the variety of<h>elements requested in the spec or perhaps adjust it. - Mobile friendly was not taken into account as I didn't see anything mentioning it, however there are a few changes I would make if that was of concern. Outside of the obvious media-queries I would not place the teas of the month into row divs but rather just have them in one div and wrap it. In order to achieve it exactly to spec however and mobile-friendly not being mentioned I did it via row divs.
Brief Discussion
I had an awesome time completing this exercise as sometimes going back to basics (vanilla HTML and CSS) when you've been coding in React or another front-end framework for a while is very nostalgic and joyful. Any feedback would be greatly appreciated.