@zeerobit
Posted
Congrats on completing your first challenge and for being your first you've done well however there are still some things that need improvements:
- use class instead of id for styling , also I noticed you have ethClock as class and ID which is not practical and can cause issues. I suggest to read up on BEM which will help you write better class names. Here is an article you can check out https://9elements.com/bem-cheat-sheet/
- If there are multiple parts on a project that needs to be styled similarly you can always have a secondary class name so you can use that one class name to target them all at once, example: class="price icon" class="clock icon" ("icon" is the secondary class name)
- you don't necessarily have to target the eye image separately in order to position it in the middle, simply make the .overlay class flex then with justify-content/align-items: center you can position the eye image in the middle.
- switch the background-color for the overlay from hsl to rgb then add the opacity value to it so you can manipulate the transparency of the overlay color itself without affecting the opacity of the eye image , it would look something like this background-color: rgb(0, 255, 247, 0.4); then set the opacity to 1 for the overlay hovering instead of 0.5 so the eye image retains its full opacity
- use rem instead of px, especially for stuff like width, font-size, padding, margin since px is not scalable
Hope this feedback helps, Happy coding !!!
Marked as helpful
@MaianneThornton
Posted
@zeerobit Thank you so much for your advice and assistance in condensing my code! Your advice was quite helpful! In the "Acknowledgements Section" of my readme file, I included a special shoutout to you. Thank you once more; without you, I would not have been able to address the issues in my report!