@mofadaSubmitted 8 months ago
What are you most proud of, and what would you do differently next time?
use object-position change img position
Latest solutions
Article Preview
#tailwind-cssPSubmitted 6 months agoGiven a single button, how can I trigger separate JavaScript functions (or the same function, but with different arguments) based on device type / screen size?
For example, I would like the button to have
onclick="togglePanel(event)"for mobile butonclick="toggleMenu(event)"for desktop.Or is it better to just use two separate buttons (like I did) — one for mobile and one for desktop — each calling their own function?
Meet Landing Page
#tailwind-cssPSubmitted 6 months agoIs there anything I could improve in terms of performance optimisations (e.g. image lazy loading), or better use of Tailwind classes?
Testimonial Grid Section
#tailwind-cssPSubmitted 7 months agoIn my grid system, cards with less content will stretch to match adjacent card sizes. If they stretch too much, the card looks a little empty. Any tips on how to prevent "over stretching" or how to make empty cards look less out of place?
Four Card Feature Section
#tailwind-cssPSubmitted 7 months agoI’d love feedback on how I used Tailwind utility classes to achieve the design. I’m particularly curious to know if there’s a simpler or more efficient way I could have structured things, particularly around layout, spacing, and responsiveness.
Product Preview Card
#tailwind-cssPSubmitted 7 months agoMainly relating to my use of Tailwind:
- Is my use of utility classes appropriate and efficient?
- Are there any unnecessary or redundant classes that could be cleaned up?
Recipe Page
#tailwind-cssPSubmitted 7 months agoA couple of areas felt a little "hacky", like the table. If anyone has a better/cleaner solution, I'd love to know what you did!
Also, if there are any suggestions for improving my use of Tailwind classes, especially any simplification / removing any redundancies or "best practices" that I should follow.
Latest comments
- P@jboysPosted 6 months ago
Really nice solution, mofada!
Your solution's responsive design is a very close match to the target design. The only suggestion I have here is to constrain the width of the card on the mobile layout (i.e. maybe set a max width to something like 500px for this stacked layout).
Your panel and menu work well. I would allow the menu to be closed by clicking on the share icon again, otherwise the user might think it is stuck open.
I like how you dismiss the panel/menu by clicking outside of them — nice touch! Though, this only works within the card.
Overall, great job!
0 - @tatasadiSubmitted over 1 year agoP@jboysPosted 6 months ago
Great solution Ehsan! It matches the design closely and the responsiveness is on point. Code is neat. Good use of components. Well done.
Only a few minor improvements/suggestions:
- Perhaps make further use of semantic tags (like: section, header, nav)
- Alt text could have been more descriptive in places
- Consider simplifying component variations (e.g. buttons with different colours) by accepting props for these variants
But these are rather minor things.
Marked as helpful1 - P@KaczupinkoSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
I will put more effort on responsiveness.
What challenges did you encounter, and how did you overcome them?I had a lot of trouble transitioning from mobile to tablet responsiveness and i think is better to gain some knowledge about it.
What specific areas of your project would you like help with?Any feedback is welcome.
P@jboysPosted 7 months agoHey Kaczupinko,
Nice job with your solution! I love how well it works on both mobile and desktop.
One thing I noticed though: on screens less than 1280px (Tailwind’s
xlbreakpoint), it might look even better if the cards didn’t stretch across the full width. Maybe you could try using something likemax-w-80 w-fullto constrain them a bit.Also, adding one or two intermediary layouts (like grids with 2 or 3 columns) between mobile and desktop would give it a smoother transition across different screen sizes, but it’s not required for this challenge.
Great work overall 👍
Marked as helpful0 - @Rahmonbek-0001Submitted 7 months agoP@jboysPosted 7 months ago
Hey Rahmonbek,
I really like your solution! It looks clean, responsive and closely matches the design — but I noticed you've written a lot of custom CSS in your input.css file. Since you're using Tailwind, you could simplify things by relying more on its utility classes.
For example, instead of writing custom margins, paddings, or flex layouts, you can use Tailwind's built-in utilities like
p-6,mt-4,md:flex-row, andshadow-lg. Also, Tailwind can handle screen size breakpoints with prefixessm:md:etc, which saves you from writing custom media queries. Making better use of Tailwind will reduce the amount of CSS you write and should make future adjustments easier.1 - @Rahmonbek-0001Submitted 7 months agoP@jboysPosted 7 months ago
Hey Rahmonbek,
I've gone through your code and viewed the product preview card. Your layout for desktop looks really good. Here's a few things that could improve your solution:
Responsiveness:
- The card doesn't adapt to smaller screens and causes horizontal scrolling. The fixed width on the container (
w-[640px]) is the main issue. - For the image and content layout, you can switch to
flex-colon mobile screens and keepflex-rowon larger screens usingsm:flex-row.
Semantics and accessibility:
- The heading structure could be improved for better hierarchy. Using
<h1>,<h3>, and<h5>feels inconsistent. - The
alttext for the images should be more descriptive. Instead of"image-product-desktop", try something like"Gabrielle Essence Eau De Parfum bottle from Chanel". - Adding more focus styles and features like
aria-labelwould improve accessibilty.
Overall, your layout is good and codebase is clean. The main area to focus on is responsiveness, so the card looks good on all screen sizes.
Cheers!
1 - The card doesn't adapt to smaller screens and causes horizontal scrolling. The fixed width on the container (
- @sipanahmadSubmitted about 1 year agoWhat are you most proud of, and what would you do differently next time?
I'm proud of work with this framework and did it so good.
What challenges did you encounter, and how did you overcome them?The challenge i see it in this project is how to make the image in mobile screen.
What specific areas of your project would you like help with?I really want to give this advice for every one solve this challenge watch the other project and improve you code also.
P@jboysPosted 7 months agoHey Sipan,
I had a look through your code, and it looks good overall! Just a few thoughts on how you could refine it a bit:
Design
- The Young Serif font isn't displayed, despite it being defined in your code
- The top margin is far too large and pushing your content below the fold on Desktop; Mobile shouldn't have any margin.
HTML5 Semantics and accessibility
- Good use of main, footer, and headings (hierarchy)
<article>should wrap the whole recipe and each recipe section should be wrapped in a<section>rather than an<article>- Perhaps use a more descriptive alt text for the omelette image. Something like "Image of a cooked omelette served on a plate" would be more helpful for users with screen readers / limited vision.
Code and best practices
- I noticed you're using tabs for indentation. It's consistent and well-structured, but consider using spaces: it's easier to read — have a look how GitHub renders it. The extra space makes it harder to scan.
- It would be cleaner to move your Tailwind setup/config out of the HTML.
- You’re adding
role="article"androle="main"in a few spots, which is unnecessary since those tags already have those roles by default.
All in all, minor things. Good job!
0
