@humarroquin
Posted
Great job! Your solution is really close to the original design.
Have you read about Semantic HTML? Someone recommended the following reading, and it helped me better understand when to use specific HTML tags. I hope you also find it useful: https://www.codecademy.com/resources/blog/semantic-html/
Have you read about relative units? For instance, using rems for font sizes helps with accessibility when users resize the font size in their browsers. Here’s a freeCodeCamp article and a YouTube video explaining this further. I hope you find it useful: https://www.freecodecamp.org/news/why-use-rem-to-set-font-size-in-css/ https://www.youtube.com/watch?v=dHbYcAncAgQ
Lastly, <a> tags are inline elements, so they only occupy the space they need. By adding the display: block; property to these elements, they can expand to cover the entire button section, making them clickable no matter where the user clicks. Also, adding a transition on the parent element will allow the hover effect to transition smoothly from one color to another. Here is an MDN link that expands further on this topic. I hope it helps: https://developer.mozilla.org/en-US/docs/Web/CSS/transition
Marked as helpful
@ursgol
Posted
@humarroquin Thank you so much for the very helpful feedback. I will try to read about it and improve my project. Many thanks one more time.
