Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Expenses-chart (my first project on linux!)

Ved Jain 380

@vedjain773

Desktop design screenshot for the Expenses chart component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

T
Chamu 13,110

@ChamuMutezva

Posted

Hi Ved Jain

Here is my observation after going through your project:

  1. The component should have a heading element - since it is not a full page , I would expect a heading level of either h2 or h3 (usually an h1 is the first heading element of a website)
  2. alt values for images should always avoid words like image, logo, icon, graphic etc as those are implied by the fact that the element is an image. An alt value should be focused on the content of the image (the message carried in the image) . If the image is decorative then just leave it as alt=""
  3. It is important to make one project per repository, having one repository with plenty projects is a source of disaster in the near future in terms of maintainability, recruiters wanting analyse you work, a break in code in one project may cause the others to misbehave (especially when you start using frameworks and libraries)
  4. keep css specificity as low as possible. Use classes for styling not id, avoid nesting your css in most cases. It is better to apply nesting for pseudo classes
  5. The site is not responsive , check using dev tools between 451px and 820px , the bars are oveflowing from their parent
  6. The bars are not consistent, Mon has a value of $17.45 is way taller than Sun which has a value of $25.48

Marked as helpful

0

Ved Jain 380

@vedjain773

Posted

@ChamuMutezva thanks for the feedback! I'll keep these things in mind while working on my next project The 6th issue seems to have occurred from a calculation error on my side and I will fix it right away regarding your 5th issue, since i'm quite new to responsive layouts, I do not cover the entire range of device widths which i know is a bad practice I'll try to cover the entire range asap

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord