All solutions

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

I'm proud of experimenting with React and Tailwind CSS for the first time, along with integrating the Formik library for form validation. Moving forward, I aim to adhere to best practices more consistently and continue practicing to apply them effectively in my future projects.

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

I encountered challenges initially while trying to render images conditionally in React based on screen size. To overcome this, I used Tailwind CSS to handle the responsiveness by hiding the mobile image at medium breakpoints and displaying the desktop image as a block

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

How can I render the images using React in different screen sizes?

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

I am most proud of trying out Tailwind CSS for the first time, and I find it incredibly handy. I am glad that I decided to give it a try. If I were to do something differently next time, I would probably explore more advanced features within Tailwind CSS to further enhance my projects.

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

When I first started using Tailwind CSS, I faced some challenges. Figuring out how it works, organizing my folders, extending styles with custom colors, and adding custom fonts were all new to me. To overcome these, I searched for better tutorials and resources. I followed the official Tailwind CSS documentation and also watched the crash course on JS Mastery YouTube channel. This experience not only helped me understand Tailwind CSS better but also improved how I organize my projects and style them.

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

I need help organizing my code for better readability and following best practices. I'm looking for guidance on how to structure my project effectively with Tailwind CSS or recommendations for the best resources to follow.

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

• I used relative units such as percentages and rem to create a responsive and adaptable layout that adjusts well to various screen sizes.
• I would consider incorporating media queries in design which styles more precisely for different screen sizes.

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

• One challenge I encountered was aligning buttons within an unordered list. I used the grid system to align list items (li) within the unordered list (ul), allowing for precise control over the layout of the buttons.

.social-links {
  display: grid;
  gap: 0.75rem;
  list-style-type: none;
  margin-top: 2rem;
}

• I added box-sizing: border-box globally using the universal selector *. This prevented unexpected variations in button sizes caused by padding and borders.

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

• I would appreciate hearing about my approach to solving the challenge. Was the method I used the right approach for the challenge I faced? Additionally, is there a simpler way I could have implemented it more effectively?

Hi everyone,

I just completed my first challenge on Frontend Mentor, focusing on the QR code component. As a newbie to the challenge, it was an exciting learning experience.

Before I move forward, I'd love to hear your thoughts and suggestions on my first approach to mobile-first design. Any insights or best practices you can share would be incredibly valuable for my growth. Feel free to check out my work, and I'm open to learning from the community.

Thank you all in advance for taking the time to review my work and share your knowledge!

Best regards,

Rora