Frontend Mentor | Yonerfy's profile

T23harms•170

@T23harmsSubmitted 5 days ago

I used grid

1

P

Yonerfy•100

@YonerfyPosted 5 days ago

Hey T23harms, great job on this one! It looks really good.

There are a few things you need to fix to make it even better:

Your text is overlapping because you set a fixed height in your card content. Try removing the height or setting it to auto.
You did well with the width by using percentages, but it's better to use relative units instead of pixels. This will help the layout adapt better to mobile and tablet screens.
Adding a border to the image will make it match the design more closely.
Don't forget to remove the template README.

Great job, mate! Keep going—you’re doing really well. 🙂

0

P

tasosbeast•80

@tasosbeastSubmitted 8 days ago

What are you most proud of, and what would you do differently next time?

What I am most proud of

I am proud of starting to learn React and successfully applying it to this project. It has been a great learning experience, and I am happy with how I managed to create interactive components and manage state effectively.

What I would do differently next time

Next time, I will try to make the project simpler and not overcomplicate things. While using React for this project was a valuable learning experience, I will consider the scale and complexity of the project before deciding on the tools and technologies to use. This approach will help me focus on the core requirements and deliver more efficient solutions.

What challenges did you encounter, and how did you overcome them?

Challenges I encountered

At some point, the project kind of overwhelmed me, and I felt like I was spending too much time on it. The complexity of managing state and ensuring all components interacted correctly in React was a bit challenging. However, I overcame these challenges by breaking down the tasks into smaller, manageable pieces and focusing on one issue at a time. I also relied on resources like the React documentation and interactive tutorials on Scrimba to help me understand and implement the necessary concepts. This approach helped me stay organized and gradually complete the project.

What specific areas of your project would you like help with?

Areas where I would like help

State Management: I would appreciate feedback on how I managed state in this project. Are there more efficient ways to handle state for this type of application?
Component Structure: I would like input on the structure of my components. Are there any best practices I should follow to make my components more reusable and maintainable?
Performance Optimization: Any tips on optimizing the performance of my React application would be helpful. Are there specific techniques I should consider for improving load times and responsiveness?
Styling with Tailwind CSS: Feedback on my use of Tailwind CSS for styling would be great. Are there any improvements I can make to my class structure or usage of utility classes?

Thank you in advance for any feedback and suggestions!

Four Card Feature Section - Built with React and Tailwind CSS

#react#tailwind-css

1

P

Yonerfy•100

@YonerfyPosted 6 days ago

Very good work, I liked the effect you added to the cards.

Marked as helpful

1

P

David Ruiz•190

@DavichobitsSubmitted 11 days ago

Preview Card Component using TAILWIND

#tailwind-css

1

P

Yonerfy•100

@YonerfyPosted 11 days ago

Very good solution, Nice!!

1

JanJohn PulPaul•60

@popol09Submitted 13 days ago

What are you most proud of, and what would you do differently next time?

Probably the closest to the design i created

What challenges did you encounter, and how did you overcome them?

Spacing between paragraph elements

What specific areas of your project would you like help with?

Nothing

React and tailwind with minimal supervison

#react#tailwind-css

1

P

Yonerfy•100

@YonerfyPosted 13 days ago

Very good solution! You just missed the lines that divide the sections—you can use an <hr /> for those. For the table, you can use border-bottom. But other than that, great job! Keep it up.

0

Ingrid Rauany Dias Soares•10

@ingridrauanySubmitted about 1 year ago

What are you most proud of, and what would you do differently next time?

A list of things that a learned or remembered when I made this first project of Frontend Mentor:

Setup a project with: vite, eslint, prettier, styled-components, vitest, testing-library.
Difference between default exports and named exports;
Create a barrel to export components;