So I have been coding for around 6 months and I am about to start looking for jobs. So, I have started building a project that I can showcase to employers.
I decided to start this e-commerce website because I thought it was a good combination between React, Firebase & Tailwind CSS.
It would be great if you can provide me any feedback or things you would improve. I tried to be as thoughtful as possible regarding responsiveness, but if you see anything weird please let me know.
Hi aburto22,
I agree with the above, I find the layout and coloring clean and effective.
and also I figured I remain logged in after closing browser, which is quiet handy
Some things to improve could be:
Make the headers pop out a bit more by increasing font weight, size or whatever. It is definitely readable but not too clear for me, especially the Welcome page and Cart page.
If possible add the number of items that are added to the cart within brackets at the cart navigation menu on top of the page. Maybe this is already one of the things of what you meant by already looking for to improve to give more input to users.
I think its a common way to give feedback to shoppers and was the thing I was looking for instantly after I added something to the cart.
A very minor thing: when hovering over the shop items, the border on the right side is wider than the image. I failed to see the CSS or styling (I am still busy with the RWD course on FCC) so I do not see what it is exactly. Probably it does not occur to many people, but for me it would be a slight sign of less professional design, which I could generalize on the product quality and maybe even payment security (subconsciously I guess).
Contact. Where is the contact page/section ? Would be nice to see how that worked.
I didn’t look much at the code but it looks well organized and clean. I didn’t test the auth but knowing Firebase a bit it looks as expected so I’m guessing it works.
It is a nice clean design. I will say it doesn’t really scream online store to me. Although, that might be a plus and not a minus really.
As said, there should be an indicator on the cart icon when there are items in the cart. Usually, it comes in the form of a quantity counter.
You should be able to change the quantity of the item in the cart. Right now you can only delete them.
One challenge you might try taking on is creating an admin interface to manage the store items. You can start simple and work your way up.
For someone that has only been at it for 6 months, color me impressed. Great job, keep it up.
I’ll agree with everyone else here that this looks very nice, especially for the amount of time you have been at it. My area of emphasis is accessibility, so I’m going to give you a little feedback regarding that.
I can barely read most of the text on the page at the default font size. Normally the black text color on the white background would be dark enough but you are setting the font weight to 300 which is making the font skinnier and lighter to the point that it is hard to read. I would recommend you not lower the font weight and instead use font color to lighten the text but only go as far as accessibility allows (use a color contrast checker to make sure your font color is dark enough).
The light blue text you are using for the active link in the menu at the top is definitely not dark enough.
Speaking of the menu at the top, it should be wrapped in a <nav> (all five items should be in the same <nav>). Best practices dictate the use an <ul> for the items. Using a <nav> creates a landmark for screen reader users which is important for easier navigation of the page.
As landmarks are important for navigation, you also need to wrap the main content on each page in a <main>.
I agree with @code-carrot, your headings are not easily seen on the page because they are skinny small text over background images. Definitely need to make those stand out.
Speaking of headings, you need to add some on the shop page. Each of those product cards should have an <h2> heading (which would be the name of the product).
And speaking of cards, wrapping everything in an <a> is an accessibility anti-pattern because it is a pain in the ass for screen reader users. Here’s a few articles on how to make accessible cards:
Nice work including alt text on all of your images. I do think that some alt text could be a little more descriptive though. For example, the alt text for each of the hats on the shop page is just the name of the hat, so it doesn’t provide any more information. I think you would want to describe the hat in much more detail in the alt text so people who can’t see the hat would still be able to have a good idea of what type of hat it is. Or you could describe the hat in detail in plain text on the card (style, material, size, etc…) I know this is just a demo web site and so I understand if you didn’t think you needed to go into this much detail. I’m just pointing out accessibility issues as if it were a real website.
And the best for last, I want to give you a huge thumbs up for responsiveness. Not only is it very responsive to changes in view port width but it also very responsive to changes in font size. If I have my browser open wide enough on the Shop page so that three hats are on the first row and then start increasing the font size the layout transitions very smoothly to two hats per row and then ultimately one hat per row, without any awkward text squishing or overflow. Unfortunately, most people do not take font size responsive into account so I am always pleasantly surprised when I see it.
Having said that, your menu at the top is not quite as responsive to font size changes because you are using px units for the break point. Convert that 640px to rem units (640/16 = 40rem) and then your menu will be responsive to font size changes (you may need to adjust the rem value a little, dividing px by 16 is just a way to get you close). There might be some other px to rem changes you need to make as well in the menu elements (I haven’t looked that closely) but if you aren’t using a lot of px in the first place then you are off to a good start.
Thanks a lot for your very thoughtful responses. I will definitely work on them next week.
@bbsmooth Thanks for your comments on accessibility. I was trying to follow advices from lighthouse but it seems they were not enough. Thanks also for the thumbs up regarding responsiveness with regards to font-size. To be honest it was a bit of luck. Tailwind css uses mostly measurements in rem, so that helped a lot! I will now try to make the nav bar better.
Regarding font-size, do you have any suggestion regarding how much “allowance” should I make for font-sizing? Should I ensure it upsizes correctly to 150%, 200% or more?
200% is the minimum standard. I like to challenge myself though so I’ll usually crank it up to at least 300%. I usually find that if you have built font size responsiveness into your product from the beginning then you can usually handle large increases, so the difference between 200% and 300% (or more) is not usually an issue. The time it does come into play is with narrower view ports. Obviously if you don’t have as much horizontal real estate then the bigger you make the text the more likely you are to run into issues if you have long words on your page. There are a variety of ways to handle breaking long words onto separate lines. If I have a super long word on the page then I’ll make sure to do something for it. And sometimes it’s not an option to break up something and you just have to live with a scroll bar for large text on a narrow view port. But I’m guessing people who need really large text are either not on a narrow view port or are used to horizontal scroll bars
I have also updated the website to include most of your comments. Feel free to take a look and let me know if you believe it is getting better or not, or if there are more things to fix.
That was the idea behind the design.