Design comparison
Community feedback
- @law973Posted about 2 months ago
Hey there! From what I've seen, the solution looks presentable on most desktop and mobile displays (in landscape orientation as well), which is great. I'm not at all familiar with Tailwind, and there's a lot to CSS Grid, so the class naming convention and the overall styling implementation seems both daunting and impressive to me. I haven't tackled this challenge myself, but there are a couple of things I can point out that I think are worth mentioning.
The paragraph in the main grid item (Section 2 on Desktop and Section 1 on Mobile) doesn't have "text-align: center". This is unnoticeable on most displays, but the challenges that I've tried always mention testing down to 320px in width, at which point this aspect becomes apparent. Since the h1 is centered, I believe it would be more visually appealing if that was the case for the p element as well.
Another grid item (Section 4 on Desktop and Section 2 on Mobile) could use an adjustment of some kind in regards to its sizing, as there are certain displays where the full text can't be read, and the final word appears to be too close to the bottom at full size.
The grid item on the upper right (Section 3 on Desktop and Section 4 on Mobile) could use a larger maximum size for its image in order to match the requested design.
There's a span inside an h2 (Section 7 on Desktop and Section 6 on Mobile) that pokes out of the grid item box on certain display sizes.
Lastly, the words "quicker" and "faster" could use i or em tags in order to give them the appropriate styling.
I find it easier to point out flaws than I do to give credit where credit's due, so I imagine that up to this point my feedback may seem unduly harsh. Assuming that's the case, I would like to reiterate that overall the solution looks fantastic, and to say that I think you have the potential to be even better.
Keep up the good work!
Marked as helpful1@xStephxPosted about 2 months ago@law973 thank you so much for your feedback! I read all your suggestions, and noticed that I really missed all that parts to check in detail to looks as in design and to be everything good without cracking somewhere. Thank you so much again for detailed analyze on project. I will fix everything what you mentioned in your feedback. If you have any other suggestions feel free to text me. :)
2 - @adamwhitehouse95Posted 2 months ago
Your CSS Grid here is fire! Well done...
3 - @FaojulazimPosted 2 months ago
Hi Steph, I am Faojul from frontend mentor. I just thought to give you friend request cause I thought having guideline is important. I would appreciate if you accept my friend request in discord id: faojul.azim
2@xStephxPosted 2 months ago@Faojulazim nice to meet you. I accepted your friend request.
1 - @manuel360Posted about 1 month ago
Are you only good at tailwind or you can also do Bootstrap too?
1@xStephxPosted about 1 month ago@manuel360 I can also use Bootstrap too, but I prefer Tailwind.
0@manuel360Posted about 1 month ago@xStephx the only problem am having with tailwind is their setup i.e. Need to install node.js before applying but bootstrap I just copy the link and just apply it.
0@xStephxPosted about 1 month ago@manuel360 Tailwind CSS also has CDN, you can see in my projects till now I am using only CDN aka (link as you say).
0@manuel360Posted about 1 month ago@manuel360 am now trying to learn the tailwind css framework I will be using it in my next project
0 - @codersam108Posted 2 months ago
Hey Steph! Nice Work, I sent u friend request on Discord,it would be gr8 if u would accept it.. I have also dm u on Discord , could u pls also see that?
1@xStephxPosted 2 months ago@codersam108 thank you so much for you feedback! I accepted your friend request on Discord, and answered in dm. :)
1 - @JawadM2002Posted 2 months ago
The code is able to utilise semantic HTML elements such as main, section, article, img, p, h1, h2 and span, which makes the code more meaningful. The code is well-structured and easy to read. It utilizes semantic HTML, CSS classes, and is organized into sections, which promotes readability. Reusability can be further enhanced by considering CSS classes for repetitive styling elements. Whilst it is accessible, you could consider descriptive and meaningful text on the 'alt' attributes for the images. Furthermore, the solution and its elements are able to match that of the design. Overall, the provided code incorporates semantic HTML and Tailwind CSS for the style and shows a great demonstration of learning, so keep it up! :)
1@xStephxPosted 2 months ago@JawadM2002 thank you so much for the detailed feedback!
1
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