Result Summary Component by HTML and CSS

Community feedback

• 

  Rohit Deshpande•870

  @rohitd99Posted over 1 year ago

  Hi Phyu Sin Lin

  Congrats on completing the challenge.

  I think you've forgotten to change the border-radius property on mobile view for the container-one and you also need to remove the box-shadow property from the container class for mobile view. Also instead of having a section you can just have the main in this case since that is the only content on the page. As for the headings I think you've used the h2 and h3 for it's font sizes but headings have a meaning and shouldn't be used that way. Also for every page we need a single h1 element and all pages must have headings only from h1 through h6 that is first h1 then h2 and so on ,not any other way for semantics and SEO. So I'd use the h1 for the Result and h2 for others such as 'Great' and 'Summary'.

  Also instead of having a bunch of media queries with width in percentages , have a max-width : 52rem; or some size and add a padding so as to not cover entire width on tablet sizes. Those media queries made your container-2 collapse and become very small for tablet sizes.

  Hope it helped

  Marked as helpful

  0

  ---

  

  Phyu Sin Lin•60

  @oliviaphyuPosted over 1 year ago

  @rohitd99 Thanks for pointing out my mistakes. I have no idea how to make container-two collapse until you mention max-width.

  0
• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  POINTING CURSOR ↗️:

  • Looks like the component's button element has not a pointer, this property plays a major-role in terms of both UI & UX

  ---

  • The cursor: pointer CSS property is important for button-like elements because it changes the cursor from the default arrow to a pointer when hovering over the element. This provides a visual cue to the user that the element is clickable and encourages interaction.

  ---

  • In terms of UI/UX, using cursor: pointer helps to improve the usability of the interface by making it easier for users to identify interactive elements. It also helps to provide feedback to the user by indicating which elements are clickable and which are not.

  ---

  • So we want to add this property to the following button element

  .inner-two button {
  cursor: pointer;
  }
  

  • Now your component's button has got the pointer & you learned about this property as well

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  0

  ---

  

  Phyu Sin Lin•60

  @oliviaphyuPosted over 1 year ago

  @0xAbdulKhalid Thank you for telling me to write "cursor: pointer;". Your feedback is really helpful to me.

  0