@bammytech1
Posted
@hozayves Nice work mate. i will suggest you use rem for font sizes and em for padding and the likes.
Hi there, I'm Yves and this is my solution for this challenge.
This challenge looks simple. yet still challenging! Especially when making it accessible.
A things that I learned in CSS
Build with
Anyway, feel free to give me any suggestions or feedback. Thanks!
@bammytech1
Posted
@hozayves Nice work mate. i will suggest you use rem for font sizes and em for padding and the likes.
@CodePapa360
Posted
Hi Yves MUHOZA👋 Great job on completing this challenge! 🥳
I would like to share a few suggestions on this solution if you don't mind.
HTML
Instead of using a div
element with a class of ether-img-container
to wrap the image and the div
with a class of ether-img-view
, it might be more semantically meaningful to use an a
element to wrap the image and set the div
with a class of ether-img-view
as a child element. This would allow the entire image to be clickable and provide a visual indication that the image is a link when the user hovers over it. Learn more
Instead of using a p
element with a class of ether-creator-name
to wrap the creator's name and a link, it might be more semantically meaningful to use a cite
element to wrap the creator's name and a a
element to wrap the link. This would provide more context to the content and help search engines and screen readers understand the content better. Learn more
CSS
Instead of using the color
property to style the text color of different elements, it might be more useful to use the color
property in conjunction with custom color variables defined in the "BASE" section. This would make it easier to maintain the color scheme of the site and avoid the need to change the color of multiple elements separately. Learn more
Instead of using the display
property to toggle the visibility of the ether-img-view
element, it might be more useful to use the opacity
property in conjunction with a transition to create a smooth fade in and fade out effect. This would provide a more seamless experience for the user and avoid the need to recalculate the layout of the page when the element is shown or hidden. Learn more
Instead of using the border-radius
property to round the corners of the ether-main
element, it might be more useful to use the border-radius
property in conjunction with the overflow
property to create a "card" effect. This would allow the content inside the ether-main
element to overflow the rounded corners and create a more visually appealing design. Learn more
Instead of using the max-width
property to set the width of the ether-main
element, it might be more useful to use the max-width
property in conjunction with the width
property and a media query to create a responsive layout. This would allow the ether-main
element to adjust its width based on the size of the viewport and provide a better user experience on different devices. [Learn more](https://developer.mozilla.org/en-US/docs/Web/CSS/
Overall, this is a very well done solution to the challenge. Great job!
I hope this feedback was helpful. 😊 Keep up the good work!👍
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