Design comparison
Solution retrospective
I am proud that i finished this project even i struggle in making it responsive. I will try to learn different techniques such as flexbox or grid for layouting responsive design.
What challenges did you encounter, and how did you overcome them?I struggle a lot on how i will balance the picture and text within the container.
What specific areas of your project would you like help with?Responsive layouting
Community feedback
- @Artiom-DeyevPosted 6 months ago
Hello.
I wanted to mention about the picture size (which you mentioned in your challenges) - it looks like the image and the description (or article) both take 50% of the main component.
One solution could be to make a div for the image, make the image it's background-image, set to 100% height and witdh, the image block to 50% of the main parent component. And do the same to description block.
Very good use of srcset for the picture, really helps the responsiveness.
Also, a very good use of comments in styles file. It's always helpful to use comments in html files as well, as it helps its readibility for other coders who might be involved.
I'd also suugest using classes alongside semantic tags - the semantic approach is done very well, however, using classes can help scalability for a project. I suggest using BEM approach, but there are others methodologies as well (some coders use bootstrap way of naming the classes even when they don't use bootstrap).
I think once you correct the width of the image and the description blocks, it should be good.
Also, I'd suggest styling the height (as provided in the design) for the main component (<main>).
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