Design comparison
Solution retrospective
I am open to all your suggestions to improve myself. Please share your comments with me. :)
Community feedback
- @AbderrahmaneGuerinikPosted about 1 year ago
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 !
Marked as helpful1 - @NehalSahu8055Posted about 1 year ago
Hello Coder 👋.
Congratulations on successfully completing the challenge! 🎉
Few suggestions regarding design.
- Remove
commented code
below as this will not dynamically center the card useflex 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 ofwidth
to make your design responsive.
I hope you find this helpful.
Happy coding😄
Marked as helpful0 - Remove
- @DivineUgorjiPosted about 1 year ago
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 asctgry
,ctgry-name
,panel1
, andpanel2
, 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 thecontext
of the project you're building. Use more creative names for your text areas instead oftext1
, andtext2
. 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!
Marked as helpful0@burcinalimPosted about 1 year agoThank you for your suggestions. I'll take your suggestions into account in the next projects.! @DivineUgorji
0
Please log in to post a comment
Log in with GitHubJoin 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