Product Page- Feedback is needed

Hi, this is my third project. I’m just a beginner, and i like applying what I see on codepen samples. I hope anyone or everyone especially the experienced developers can give their feedback to correct, or clean the code. This is just HTML and CSS. Thank you all

This Looks Amazing!! keep Going:)

1 Like

Hi @rosebahan .
Amit here.

Good Work! Here are the few things that can be improved for this/future web projects:

Desktop - Ultra Large Screen | Medium sized Screen | Small Screens:

  • Space between your top Navigation bar and hero section (first section of page).
  • As we can see from below images , your page have 2 kind of sections -
  • To Handle bigger screen, you can have max-width (say 1280px) set for content and hero section in way that when someone views it in a larger screen, It centres every section and it does not look stretched out. (Note: It is one way to handle looks of website in a bigger screen)
  • Too much space added to the footer, can be reduced.
  • Add backdrop shadow to Top navigation bar when user starts scrolling.
  • Card hover: When User hover overs the card -
    1. It transitions the card
    2. and if user hovers over the clickable part it changes the background colour.

**these are 2 things happening at once , can be distracting for users. (Note: It is more of a UX call. )

  • Card Section:
    **Hover does not exist inside of small screen devices, also the clickable Area is too small (You’d be using fingers to click it and pointer Area is small for devices < 420px)

  • Small Device Navigation panel can be improved.

  • Typographic value used on the page:
    **There are standards about what should be your font-size, font-weight etc for small | medium | big screens. You’d want your website to be easily accessible to everyone to consume the content. (Note: Again this is a UX call but as a dev you should think about these)
    ** A good resource: Font Size Guidelines for Responsive Websites (2021 Update)

I can add few many points like

  • Things to ponder: How you consider media query breakpoints?
  • Lazy load images and iframe video (Javascript needed)
  • Use proper naming convention for Css selectors (Example: BEM)
  • Use css variables for repeated css values (colour, font size)

But you’d soon start identifying and add these for future projects.
You’ve done great work so far and hope more cool projects from you in future.

Please let me know if you need more info on any of these points here.

Good Luck.

Hi Amit, thank you for your feedback. I really appreciate it. I will apply make some changes on things you mentioned except the part that is needed JS. I haven’t learned JS yet. But once I learned JS, i will go back to my projects, and apply needed corrections to make it more functional. Again, thank you.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.