Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
21
Comments
9
P
David Ruiz
@Davichobits

All comments

  • Branimir•280
    @brane10
    Submitted 30 days ago

    Testimonials grid section

    1
    P
    David Ruiz•320
    @Davichobits
    Posted 30 days ago

    Jod job! I only have one suggestions:

    • There are two box-shadow declarations:
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    box-shadow: 30px 50px 40px 0px hsl(0, 0%, 81%);
    

    Only the second one is applied. Consider combining them or removing the redundant one.

    Marked as helpful
  • D_Codeartisan•140
    @DCodeartisan
    Submitted about 1 month ago

    A nice layout-based challenge using flex box

    #react#vite#tailwind-css
    2
    P
    David Ruiz•320
    @Davichobits
    Posted 30 days ago

    God Job! Here some suggestions: The component could benefit from breaking the card elements into reusable subcomponents. For example:

    function Card({ title, description, imageSrc, borderColor }) {
      //...
    }
    

    This would:

    • Improve readability.
    • Make the component more scalable.
    • Avoid repetition.

    And color values like #555 and #77c8ca are repeated and hardcoded. Consider using Tailwind’s theme system or custom classes to make your styles more maintainable.

  • P
    Erik S. Carlsten•290
    @ecarlste
    Submitted 4 months ago
    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•320
    @Davichobits
    Posted 4 months ago

    Great job!

    Your result closely matches the challenge design.

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

  • Md. Abdul Aziz•170
    @mintleaves
    Submitted 5 months ago

    Responsive Recipe Landing Page

    1
    P
    David Ruiz•320
    @Davichobits
    Posted 5 months ago

    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
  • lakshmanan1205•90
    @lakshmanan1205
    Submitted 5 months ago

    making profile card

    1
    P
    David Ruiz•320
    @Davichobits
    Posted 5 months ago

    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
    Submitted 5 months ago
    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•320
    @Davichobits
    Posted 5 months ago

    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
    Submitted 5 months ago
    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•320
    @Davichobits
    Posted 5 months ago

    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
  • Assyke•10
    @asylbekduldiev
    Submitted 5 months ago

    tailwind.css

    #react#tailwind-css
    2
    P
    David Ruiz•320
    @Davichobits
    Posted 5 months ago

    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! 😊

  • Yaroslav Sventsitskiy•160
    @yarsvent
    Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    Proud that two previous projects helped me make this one much faster. Would try to rely less on margins in the future.

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

    Figuring out the dimensions without Figma. I ended up using photoshop.

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

    Any feedback is appreciated :)

    Social links profile (responsive)

    #accessibility
    1
    P
    David Ruiz•320
    @Davichobits
    Posted 5 months ago

    Hi, great job! I have a suggestion for you:

    You could make the alt attribute of the img tag more specific. For example, alt="Profile picture of Unknown Person".

    Marked as helpful
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub