@BotSabin
Latest solutions
Responsive recipe page built with tailwindcss
#tailwind-cssSubmitted 5 months agoHow to get it to match the design more closely
Latest comments
- @ArtemGolovko
Your solution over all is OK. There are two big problems tho.
The first is your site's design is very different from the original. Also, it doesn't look good on large screen. I think you should focus more on how your solution looks.
The second problem is with your heading hierarchy. That might course problems for some groups of users. You can learn more about that here: https://dequeuniversity.com/rules/axe/4.6/heading-order. Pay attention to warnings next time.
I have checked on your other solutions. And I noticed that all of them are built with exactly same stack in similar way. It's good to break out of your comfort zone and try something different.
I hope this helps you.
- P@Aaron-DeimundWhat are you most proud of, and what would you do differently next time?
This was my first experience with Vite and TypeScript. It was also my first time setting up a deployment pipeline with Git. I really enjoyed this one.
What challenges did you encounter, and how did you overcome them?It seems easy now, but finding the documentation for deploying a Vite solution in Git was kind of challenging.
@ArtemGolovkoLet's start with what I like about your solution. I like how you set up Git pipeline. And I also like that you replace original text and link with your own. You did a good job organising your project.
Now, about things I didn't like. Spacing of elements in your solution is very different from the design. I think you should match the design more closely.
Here is a tip from me. If you're low on screenshots, you can use dev tools emulation feature to set screen size 1440x960 (same as in design), then take the screenshot of the hole page with your browser. Now you got yourself a screenshot that you can compare with design using any free image comparing software. I hope this helps you.
Marked as helpful - P@janikjczczWhat are you most proud of, and what would you do differently next time?
Added focus styles on top of the required hover style.
Used "clickable parent" technique for the card.
What challenges did you encounter, and how did you overcome them?I wasn't sure on the responsive image with fixed height. I've looked online and asked ChatGPT for help, in the end only thing I missed was width and height set to 100% on the image itself.
What specific areas of your project would you like help with?The screenshot comparison here on Frondend Mentor shows the fonts differently. When tested in Safari, Chrome, Edge, Firefox and Brave the fonts show up same as in the design file.
@ArtemGolovkoThe solution has no visual defects, which is good.
This might be a nitpick, I think that the solution is overengineered. And I think it could be made simpler.
Marked as helpful - @TiagoF84@ArtemGolovko
This solution looks almost like in the design, but there are several things that could be improved.
- Your card is not centred vertically, unlike in the design.
- The size of your solution is different. You got the proportions right, but your card is bigger. This resulted in the bottom text looking bad from a typographical perspective. You should not have one in last line. You should adjust the size of your card in a way to have two lines of text or have at least three words in the last line.
