Design comparison
SolutionDesign
Community feedback
- @Anq92Posted over 2 years ago
Good job with your first challange!
I have few tips:
- use semantic html elements, there always has to be <main> tag and <h> tag in your code => semantic html
- use "alt" attribute for images, it's important for accessibility, learn about accessibility here
- use rem units instead of px in your CSS => CSS units
The most important thing is that your solution is not responsive, so it doesn't work properly on smaller screens, check it in your browser's dev tools. You can achieve a responsive behaviour by using max-width or max-height instead of width and height or with media queries In my case I wanted to keep the ratio of the main element in this challenge, so I used clamp() method The decision how to do it is yours :)
You can check my solution here
Good luck with the next challenges!
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