Design comparison
Solution retrospective
Placing the quotation marks was difficult, as i used the relative absolute feature. I think there is a better way. The quotation (which has the tag '#design' in the CSS file) moves in a weird way but works. Also I used flexbox as I have not done CSS grid yet, so is a solution in Grid more easier and smaller in comparison to my FlexBox solution?
Community feedback
- @correlucasPosted about 2 years ago
👾Hello @SyedMIrtazaHyder, congratulations on completing this challenge!
Nice code and nice solution! You did a good job here putting everything together. I’ve some suggestions for you:
1.You've missed the color for the background, in this case is
background-color: #EDF2F8
and add it to the body.2.You’re in the right track I can see that you’ve used the majority semantic tags possible for this challenge, the only block you’ve missed is the paragraph containing the
quote text
you can improve the accessibility there using<blockquote>
to indicate to screen readers that the content inside that paragraph is a quote.3.Prefer
CLASS
instead ofID
to give style to your elements, choosingid
is not a good idea because it’s a too specific selector and it's better to use it forforms
or Javascript code. It is not advisable to use IDs as CSS selectors because if another element in the page uses the same/similar style, you would have to write the same CSS again.✌️ I hope this helps you and happy coding!
Marked as helpful1 - @tltd0807Posted about 2 years ago
hi IRTAZA HYDER’S. First of all, congratulation on your challenge, you did it very nice and i have learned from it a lot And here is my thought: -Grid will be easier for 2 dimensions layout you can watch here -The quotation you can set it as background with the position top left etc... link Also you can check my solution if you want And have a nice day 😁😁
1
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