Responsive Tracking Dashboard with TailwindCSS

Community feedback

• 

  P

  Jaylen Baxter•340

  @JYLN

  Posted 9 months ago

  This looks great! Here are a few things I noticed that you might improve on:

  1. In some portions of your code, you have some sizes that are in static pixels rather than a intrinsic size. For example, max-w-[500px] on the dashboard container element and text-[18px] for the heading of the cards. These static pixel sizes will cause the layout to be inconsistent if a user zooms in on your page or uses a different default font size in their browser. Consider converting these to rems.
  2. In Firefox (at least), the background that is set for the icons is creeping around the corners of the background of portion of the card that has text. You may consider reducing the height of the element that contains the icons to keep this from happening.
  3. You're selecting the dashboard container element using a class, while the class isn't being used for any styling. I would think that this generally isn't best practice. Consider changing this to an ID for the element instead to use within the query selector of your JavaScript.
  4. While you have breakpoints for most of your container elements, you don't have any for the text so there is a lot of unnecessary white space due to the fact that your font sizes aren't scaling with the layout. You may consider going back through your code and adjusting font sizes at some of the same breakpoints you have within your code.
  5. The icon SVGs within the headers of the cards are decorative. You may consider setting the alts of the SVGs to an empty string due to this.
  6. Within your JavaScript code at line 43, you can accomplish saving the data from the fetch without creating a separate empty variable. To accomplish this, you can simply return dataJson in the last .then chain, and then set the variable to the whole fetch operation. Just something that might help consolidate your code a little bit.

  Overall, great work!

  00

  Marked as helpful