Results Summary Page Design

Great component ! you can improve your code by : -using semantic html like main instead of div.

• using rem unit instead of px. -using BEM methodology for naming classes in CSS. -using variables in CSS. -setting the margin and padding of all elements to 0 and box-sizing to border-box to avoid undesirable problems.

Enjoy coding !

Hello Coder 👋.

Congratulations on successfully completing the challenge! 🎉

Few suggestions regarding design.

• Remove commented code below as this will not dynamically center the card use flex or grid

.container {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    
    /* position: absolute; */
    /* top: 20%; */
    /* left: 35%; */
}

• You are misusing <nav> nav is used for sidebar, navigation bar, or drop-down menu for any navigation link purpose.

• In the mobile layout your card is left aligned

• Use max-width instead of width to make your design responsive.

I hope you find this helpful.

Happy coding😄

Hello, and congratulations on completing this challenge. Your implementation is nice, however, I have a little suggestion to help you in your future projects.

I observed that you used generic words for some of your class names, and short forms such as ctgry, ctgry-name, panel1, and panel2, to point out just a few. It's always a good practice to use semantic naming in your projects. This means that you need to name your classes within the context of the project you're building. Use more creative names for your text areas instead of text1, and text2. This skill helps to reduce the effort needed to read and understand your code which comes in handy when working with a team.

You can also check out BEM, which is a widely accepted naming convention out there.

I hope my suggestion helps, happy coding, and good job on this project!