Design comparison
Community feedback
- @JT1974Posted over 2 years ago
Hey Queen-codes 👑👋
Great work, congratulations! The website looks stunning! 👏 Nice SASS with module imports and easy-to-read semantic HTML! I like that a lot.
If you would like to further improve the site, I would suggest a few things, that may help you.
The main navigation links aren't clickable when hovering over the bottom of the area (because hyperlinks are not covering the list items fully). Tip: it works for the submenus, maybe the same logic could be implemented in the main nav too?
The alignment of the different items is quite important in this design. For instance the header horizontal line (your <div class="border"...) is aligned with the page title and in some cases the content too. Tip: the simplest fix is using css-grid e.g., that aligns your items properly.
White space is also lacking in some cases, and some images are a bit too large, which pushes the content out of the viewport in some of the required screen sizes. The typography is not always inline with the design either. Tip: Figma provides easy-to-use tools to check alignment and measure whitespace, and provides the css properties of the elements in the Inspect tab. 👍 Makes the coding a lot easier. To learn about that, look for Gary Simon's videos, but I guess you can find tutorials on freeCodeCamp.org too.
The horizontal line is sliding off in desktop view. Tip: this could be fixed by adding a :before pseudo-class to the main navigation, instead of using a separate container just for the border.
The submenu link jumps up a bit when I hover over it, due to the border-bottom. Tip: it can be fixed by setting a border by default, but making it transparent and during hover you just change the border-color. Nice little trick to make it look even better. 😉
Overall, I like you site, I think it's beautifully created, so well done! 👏🙂
0@Queen-codesPosted over 2 years ago@JT1974 Thank you very much. I would work on it. I appreciate this.
1
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