Design comparison
Solution retrospective
I am proud of how everything fits together, and how I overcame each challenge. One thing I want to do differently is look at the best way to order elements in a grid. My way works, but it involved adding classes to two cards, when I would rather adjust the order by changing the class of only one card.
What challenges did you encounter, and how did you overcome them?One challenge I had was getting the background image to not overlap the text. I solved this by learning about background-image properties using tailwind. I adjusted both the position, prevented background repeating, and adjusted the size using tailwind documentation. Another challenge was positioning the grid elements correctly. I solved this by adding 'order' class to the two last elements to get them in the correct order.
What specific areas of your project would you like help with?Any feedback is appreciated
Community feedback
- @Alex-Archer-IPosted 4 months ago
Hi!
A couple suggestions about semantic tags.
- It's a list, so it's better to use
ul
tag here. - It should be only one
h1
tag on the page. Guess since this project is out of context it's fine to skiph1
tag at all. - And I'm not get quite familiar with this topic, so I can't tell for sure, but seems that when text is a quote it should be inside
blockquote
tag. Here the web.dev article about it.
I guess you could make a mobile version a bit easier =) You can change the grid template to
grid-template-column: 1fr
instead of changing every item inside it.Oh, and you could also make the quote image with
before
orafter
. It'll spare from fiddling with background properties, but you have to fiddle with positioning and z-index, so I don't really know what is better =)It's very cool work, keep doing =)
Marked as helpful1 - It's a list, so it's better to use
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