David Ruiz
@DavichobitsAll comments
- @brane10P@Davichobits
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 - @DCodeartisanP@Davichobits
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@ecarlsteWhat 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 CSSline-height
andtracking-[XXpx]
to set the CSSletter-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
What challenges did you encounter, and how did you overcome them?Image
type rather than using the image as a background in CSS.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#typescriptP@DavichobitsGreat job!
Your result closely matches the challenge design.
I have no suggestions—keep up the great work and keep coding!
- @mintleavesP@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 - Use the
- @lakshmanan1205P@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? 😊
- @Vardhanb07What 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?.
P@DavichobitsHi! Great job on your solution. Here are a couple of recommendations to improve it:
-
The correct Tailwind class is
text-gray-950
. Instead oftext-grey-950
, usetext-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 -
- @Sandaruwan7056What 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
P@DavichobitsHey, great job!
Here are some tips I can suggest:
- Consider using a library like
Yup
orReact 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 - Consider using a library like
- @asylbekduldievP@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! 😊
- @yarsventWhat 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 :)
P@DavichobitsHi, 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