Design comparison
Solution retrospective
Hello,
I've just finished my second challenge at Frontend Mentor. It was fun for me and I really enjoyed this challenge. Firstly I tried to apply advices that I was given in the last challenge. It means to use more semantic HTML code and I also wanted to try another way to center the whole element in the page. This time I used display: flex, justify-content: center and align-items: center to do this. Then I had to find out how to display one image in the desktop version of the component and another one in the mobile version. So I just put both images in the HTML document and using display: none and display: block I made each image visible for the right design of the component. And the last thing to deal with were media queries to create correct desing of the mobile version.
Now comes my questions: Did I use semantic HTML elements right? Is the css property display: flex for centering the whole element used correctly? Are there some other ways to display one image for the desktop version of the element and another image for its mobile version without using JavaScript? Did you find anything else what's wrong in my code and what I can improve for the next time?
Thank you for your feedback!
Community feedback
- @DavidMorgadePosted over 2 years ago
Hello and congrats finishing this challenge!
Regarding the question of using display: flex to center your item, yes, there are other ways you can archive it too, but this one is actually one of the easiest way to archive it.
For the images you have diferent options to change them depending on the window size, for example, you can use
background-imageinstead of a normal img in your html, and use media queryes to render different backgrounds depending on the screen size, you can also use javascript to change the source or the entire image element depending on the screen size. In modern frameworks the trend is usually to render them conditionally depending on the screen size, but you can use the css approach too.The only obvious thing that I would change in your code, is the ´button´ tag, you shouldnt have a
pinside the button, just put the text between the two tags and style them with your button class.I hope my answer helps, and keep going on the challenges!
Marked as helpful1@Marty9406Posted over 2 years ago@DavidMorgade Thank you for your advice David! And I'll try to aviod using p tag inside the button tag next time.
0
Please log in to post a comment
Log in with GitHub
Join 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