Skip to content
OverviewSolutions
18
Comments
7
P

David Ruiz

@DavichobitsEcuador270 points

Frontend developer with experience in HTML, CSS, Tailwind, Material UI, JS, React, Typescript, Next.js

Latest solutions

View more solutions

Latest comments

  • P
    Erik S. Carlsten•290
    @ecarlste
    What are you most proud of, and what would you do differently next time?

    I think I was able to get the text more spot on than I have in the past, using both leading-[XXX%] to set the CSS line-height and tracking-[XXpx] to set the CSS letter-spacing properties.

    Many of these designs are setting these values in Figma so I figured I might as well learn how to do it and use them to get the text to be more spot on.

    Next time I think I might use an actual Next.js Image type rather than using the image as a background in CSS.

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

    The biggest challenge was getting the background image zoomed and positioned correctly.

    I originally tried just using the CSS property values that were in Figma, although things didn't look quite right since I think the image might have been different than what I was using.

    With a lot of tweaking it eventually came out pretty close.

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

    I'd like advice on any semantic html elements that I should be using which I'm not, or any different ones that are recommended.

    Responsive product preview card w/ React, Next.js, and tailwindcss.

    #next#react#tailwind-css#typescript
    1
    P
    David Ruiz•270
    @Davichobits

    Great job!

    Your result closely matches the challenge design.

    I have no suggestions—keep up the great work and keep coding!

  • P
    David Ruiz•270
    @Davichobits

    Great solution! Here are some suggestions to improve accessibility and consistency:

    • Use the <strong> tag instead of <b> for better accessibility and semantic meaning. For example:
    <li>
  <strong>Beat the eggs:</strong> In a bowl, beat the eggs with a pinch of salt...
</li>
    • You have one ingredient split into two lines:
    <li>Optional fillings: cheese, diced</li>
<li>vegetables, cooked meats, herbs</li>

    According to the design, this should be a single line:

    <li>Optional fillings: cheese, diced vegetables, cooked meats, herbs</li>

    Overall, great job! Keep up the good work. 🚀

    Marked as helpful
  • P
    David Ruiz•270
    @Davichobits

    Great job! 👏 However, I couldn't access your code.

    The link in the description points to:

    https://github.com/lakshmanan1205/frontendMentorCourse/tree/master/social_links_profile

    But when I try to visit it, I get a "Page not found" error. Could you double-check the link or make the repository public? 😊

  • Vardhan Battula•30
    @Vardhanb07
    What are you most proud of, and what would you do differently next time?

    .

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

    .

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

    .

    Built with tailwindcss

    #tailwind-css
    1
    P
    David Ruiz•270
    @Davichobits

    Hi! Great job on your solution. Here are a couple of recommendations to improve it:

    • The correct Tailwind class is text-gray-950. Instead of text-grey-950, use text-gray-950 to ensure proper styling.

    • Consider using a locally hosted font instead of loading it from Google Fonts. This can improve your page's loading performance. You can achieve this by defining the font in your input.css file using @theme. Check out the [Tailwind documentation}(https://tailwindcss.com/docs/font-family) for more details.

    Keep up the great work! 🚀

    Marked as helpful
  • Sandaruwan•510
    @Sandaruwan7056
    What are you most proud of, and what would you do differently next time?

    Practice

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

    any tips to organize my react app or any tips to improve in general will be helpful

    Mortgage Calculator

    #react#tailwind-css
    1
    P
    David Ruiz•270
    @Davichobits

    Hey, great job!

    Here are some tips I can suggest:

    • Consider using a library like Yup or React Hook Form to validate the form. This can help reduce code complexity.
    • Combine individual state variables into a single object to simplify state management. For example:
    const [formData, setFormData] = useState({
  amount: "",
  rate: "",
  term: "",
  type: "",
});

const handleInputChange = (e) => {
  const { name, value } = e.target;
  setFormData((prev) => ({ ...prev, [name]: value }));
};
    Marked as helpful
  • P
    David Ruiz•270
    @Davichobits

    Great work on this React project!

    While the challenge focuses on creating just one card, you might find it helpful to practice by building a reusable Card component. This way, instead of keeping all the code in App.js, you can encapsulate the card logic in its own component and import it into App. This will make your code cleaner and more modular, aligning with React best practices.

    Additionally, consider tidying up the project by removing any commented-out or unused code, as well as deleting unused files like App.css. This will improve the overall readability and maintainability of your codebase.

    Keep up the excellent work! 😊

View more comments