I am open any helpful constructive feedback that will make me a better developer.
Did I miss something? Is there anything I can do better? I am open to any constructive feedback.
I am open to any constructive feedback that can help me improve as a developer. 😊
I am always open to any constructive feedback.
I am open to any constructive feedback.
I will need support with heights but since I am not using the paid version yet, I just keep guessing.
What challenges did you encounter, and how did you overcome them?Doing a grid table with tailwind css for the first time was quite challenging, I had to google and leverage chatgpt for solution.
What specific areas of your project would you like help with?none.
Hi @omarnate1, 👋
Nice work on your solution. I also use Tailwind in my projects, and I think I have a tip for you.
I find it helpful to add the fem- prefix to your color names in your tailwind.config.js file.
colors: { "fem-moderate-violet": "#7541c8", "fem-very-dark-grayish-blue": "#48556a", "fem-very-dark-blackish-blue": "#19212e", "fem-light-gray": "#cfcfcf", "fem-light-grayish-blue": "#ecf2f8", },
This makes it easier when using Tailwind's IntelliSense to access the Frontend Mentor(fem) colors used in the design. So, for example, when you want to set a background color to moderate-violet. Type bg-fem and IntelliSense will list all of your custom fem colors to choose from.
I hope this is helpful. 😊
Got to grips with using the auto-fit value in the grid, which reorganises the cards as the viewport size increases.
Was able to figure out the layout of the cards on the large viewport sizes and implement it using grid-template-areas.
Hi @erratic-enigma, 👋
Your solution looks great! Responsive with three layouts. Very nice!
I don't think I have anything substantive to really add. I did this project in 2022 with Vite and Vanilla CSS. If I were to redo this project, I would use Tailwind CSS as I do now with all my projects. I also use the React framework, Next.js, quite a bit now and use its built-in Tailwind support. It can make your html elements look a bit weird when utilizing the additional Tailwind classes, but it makes it easier to make components with their own stylings attached to the class attribute.
I have also used SASS in other projects, but I think Tailwind is winning me over for its ease-of-use and customization.
If you haven't tried Tailwind CSS, you may want to give it a try at some point in your journey. https://tailwindcss.com
I hope this personal perspective is a little helpful. Keep up the great work! 👍
Hi @aapa1993, 👋
Nice work on this project! I've also used Tailwind CSS in mine.
My suggestion for this project is to try adding a transition on your button hover state. You can easily do this with Tailwind transition and duration classes.
For example, with your button code block:
<div class="font-montserrat bg-custom1 w-full flex items-center font-bold gap-2 justify-center text-white py-2 rounded-lg hover:bg-custom2 "> <img src="icon-cart.svg" alt="icon-cart"> <a href="#">Add to Cart</a> </div>
Simply modify your div element by adding these classes:
<div class="... transition-all duration-300"> ... </div>
This will give you a 3ms soft transition between the background color change.
I hope this is helpful. Keep up the great work! 👍
Hi @fl1pHover, 👋
Nice work on the recipe page project! I also used Tailwind in my solution.
One suggestion I could recommend is try using Tailwind's responsive class modifiers. When I viewed your page on narrower screen sizes, the page was not responsive, as in the design. You should try developing your projects at the start with a mobile first view. Then for larger screen sizes, apply Tailwind's class modifiers like sm:*, md:*, etc.
So, for example, when on the smallest screen size, the top of the page should use pt-0, but for screen sizes > 640px, you can use sm:pt-10. With this, you can then think about how you can make your image touch the top, left, & right edge of the viewport at a mobile view, but for larger views you can add padding around the image, and even add a border radius.
I hope this is helpful! 😊
Hi @JeyB88, 👋
Great job on this challenge! I also used Tailwind CSS in my solution.
I tried to look at your code, but I got a 404 error when I tried to go to your GitHub. However, my suggestion would be to add some responsiveness for mobile, tablet, and desktop like in the design. You can use the md:* prefix to increase the cards padding for tablet and desktop size.
Nice work.
Hi @karanshergill, 👋
Nice job on this challenge. I also used Tailwind CSS in my solution.
My suggestion for improving your solution would be to use responsive text sizes for mobile and desk, as is shown in the design. In Tailwind, you use the sm:* prefix on you text-* classes.
For example, on mobile view (screen width < 640px) use text-sm as you already are, but also add sm:text-base (screen width >= 640px) for desktop view.
Let me know if this was helpful.
