HTML5, CSS, SASS, GSAP, JAVASCRIPT

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. The animation is really nice, the layout in desktop is great but it is not responsive at the moment. Like what Carlos said, the content are not being seen properly at those breakpoint that he mentioned. Mobile state though looks great.

  Some suggestions would be:

  • Always have a main element to wrap the main content of your page. On this one, the .dashboard-container should be using the main instead of section.
  • Also, it would be a better markup if the person profile on the left along with the selection below is isolated from the rest of the cards, because they are a section of their own as well those 6 cards. By grouping them, you are making the markup more clearer.
  • When wrapping a text-content do not just use small, span to wrap it, use meaningful element like a p tag if it just a regular text or heading tag if it is an heading.
  • Using li as the toggle is not great. Interactive components uses interactive elements. By using li you are making it not-accessible. Instead, use a list of button on this one. If you were to use button you would need to have an aria-live element that will announce the certain button has been pressed or selected, because button alone is not informative.
  • Another approach as well is to use a radio buttons for those selection. This will be nested inside a fieldset along with a screen-reader only legend element to which the text-content of this legend will describe what is the purpose of those sets of radios. I haven't tackled this challenge yet so I can't give a reference though :>. But it is great for you to be informed about this.
  • You are missing the hr or hrs word on the number.
  • Each card title like the work should be using h2 and not h3. Don't skip a level.
  • Those bold-numbers-text are not suited to be a heading tag. By making it one, it doesn't convey any information on what the section contains. Use p tag on it.
  • Lastly, making the site responsive as you can^^

  Aside from those, great job again on this one.

  0
• 

  Carlos•1,110

  @Carlos-A-PPosted about 3 years ago

  That was a nice intro!

  • I noticed that between 750px and 1260px I'm not able to view a few of the cards.
  • I see that you used similar id's a couple of times. To my understanding, id's are single-use and are only applied to one element. Each element is attributed as a unique identifier to (only) one single element so I think that's one reason why the report shows multiple errors

  0