
Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
Maybe Next time I wanna make it more accessible. I don't know much about accessibility yet.
What challenges did you encounter, and how did you overcome them?- I got stuck in setting the quotes behind the content in the first box. I used pseudo elements such as
::before
and::after
but couldn't do it then saw some solutions of others. It was easy, I was just making it difficult. At the end I used background-image without pseudo element. Next time, first I will try to do these types of things without::before
and::after
. - One more there was some extra space in the bottom div but i was able to overcome it by asking in the discord. (Setting
grid-template-rows
to auto)
- I always get confused what to name the classes which are same like multiple boxes or items. For this project I have written item-one, item-two, .... Is it alright to use these class names.
- Next there's this
box-shadow
I never get it right same as the design. If anyone have some tips on this please do share.
Community feedback
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