Design comparison
Solution retrospective
This was a much more challenging task than I initially anticipated. Each card had slight differences in size, and the first card was completely different. I'm extremely proud that I didn't give up and managed to complete it to the end. Grid is truly amazing, but I think it will take more time to get used to than flexbox. That's why I plan to continue using grid and practice with it in the future.
I've created a separate view for tablets to ensure a natural responsive design, even though it wasn't in the original design specifications. Please come and take a look!
What challenges did you encounter, and how did you overcome them?First, handling the transition from desktop to mobile was incredibly difficult. Since the desktop layout was challenging, I started working on the desktop view first, but I struggled with how to easily handle the responsive layout. The solution was to use the max-sm, max-lg, etc., classes provided by tailwindcss. These classes allow developers using a desktop-first approach to perfectly apply responsive design.
Second, there were too many conditional renderings, which made the code increasingly difficult to read. I was able to solve this using the clsx module. By handling complex logic with functions using clsx, the component became much cleaner.
What specific areas of your project would you like help with?I welcome any tips that you might have gained while working on this project. 😄
Community feedback
- @haquanqPosted 4 months ago
Hello @jaceleedev 💅
Nice work on the solution!! It looks good and similar to the design.
Here is my opinion on what can be improved
- When ever using
section
orarticle
, you need to provide a title/heading (h2-h6
) otherwise you can usediv
instead to wrap it's content. Or, you can provide a visibility hidden heading insidesection
, in your case should beh1
since page must have oneh1
(improve SEO & accessibility). - As i said above, each or your
article
card need a title, you should consider using person name and status as a title/headingh2
(short and concise). The first paragraph of bold text can be considered to be the next headingh3
(more descriptive) instead of being insideblockquote
(important: never skip heading level). - About using
blockquote
, you should use custom quotation marks as such (delete these quotation marks inside text) to achieve more accurate looking marks.
blockquote { quotes: "“" "”" "‘" "’"; }
Have a nice day and enjoy coding!!! 🕺🔮
Marked as helpful1 - When ever using
- @jaceleedevPosted 4 months ago
Thank you for your feedback. Initially, I did include headings, but I was hesitant in this challenge because I didn't see an appropriate place for an h1 in the sections. However, as you suggested, using a hidden h1 is a great solution. I've updated the project to include h1 through h3.
I didn't remove the first paragraph from the blockquote because it requires some restyling, and it is actually a quote. Since it's not a simple title, I decided to leave it as is. Regarding the quotation marks, I copied them directly from the Figma design to match the style. If this were a professional project, I would request the designer to update the quotation marks.
Thank you for your valuable feedback!
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