P
@Towbee05Submitted 5 months ago
Hi! I’m Thibault, a passionate web developer currently honing my skills in both front-end and back-end technologies. I’ve completed the School 42, and now specialize in web development. My latest projects focus on building interactive and dynamic web applications using technologies like React.
I’m currently learning...React, NodeJS
Latest solutions
Product List - Solution [React - Typescript - CSS Modules]
#react#typescriptPSubmitted 5 months agoEverything that could be helpful, thanks :)
Result Summary Component - Solution
#react#sass/scssPSubmitted 5 months agoNothing in particular right now, but I'm open to any suggestions you might have!
Meet Landing Page - Solution
#sass/scssPSubmitted 5 months agoEverything that could be helpful. Thanks :)
Newsletter Signup Form - Solution
#sass/scssPSubmitted 5 months agoEverything that could be helpfull, thank you ! :)
Testimonial Grid - Solution
#sass/scssPSubmitted 5 months agoRegarding areas for improvement, I would appreciate any feedback that could help enhance my skills or highlight aspects where I can grow. Thank you!
Latest comments
- P@thibault-devergePosted 5 months ago
In terms of the final result, this is outstanding—well done! Everything works smoothly, and the responsiveness is well handled. Great job; I genuinely like what you’ve achieved here.
Regarding the CSS, I haven’t used Tailwind yet, so I can’t comment on that aspect. As for the code, I’d suggest organizing it with one component per file, as I noticed a few components grouped in app.jsx. Additionally, for state management, the project could benefit from a solution like the Context API to reduce prop drilling. That said, your code is really clear and well-structured overall (I prefer it to my version of this project honestly). Excellent work, and happy coding! 😊
Marked as helpful0 - @kass8mal8Submitted 11 months agoP@thibault-devergePosted 5 months ago
So, the solution has been posted few month ago. I generally review but not sure it would be really helpful here as I don't know MaterialUI and you probably move on since a long time. Wish everything is fine for you and your coding path is going well. :).
For what I see, code seems fine and easy to read tho.
0 - P@Fable54321Submitted 5 months agoP@thibault-devergePosted 5 months ago
Hi Timothe! Hope you’ve been well since the last feedback. You’ve been super active, and it shows! Your solutions are very close to perfect—great job!
Honestly, there’s not much I can suggest, as your code is clear and well-structured, the design closely matches the original, and it’s responsive across all screen sizes. Bravo! 🙌 Going through your code even taught me something new, like the color-scheme property—very cool!
A couple of minor suggestions:
- Instead of naming sections as section_a and section_b, try using descriptive names like hero and features for clarity. It’s a tiny detail, but descriptive naming can be helpful even in smaller projects.
- For purely decorative images, like the gallery of four photos, consider adding aria-hidden="true" to improve accessibility.
- I see you’re making great use of SCSS with mixins and variables, which is fantastic! It could also be helpful to use SCSS variables for breakpoint queries. This way, if you need to adjust a breakpoint from 75em to 73em, you’d only need to change it in one place.
These are very minor points, but I wanted to make sure I had some constructive feedback to offer. You’ve done a fantastic job, and I love the design with the dark background. The code is very easy to read and follow.
Just one question for my own understanding:
- Why did you choose the directory name _STYLE_? Is there any particular reason behind it?
Keep up the amazing work! You’re well on your way, and if your goal is to find a job, I’m sure you’ll be there in no time!
Marked as helpful1 - P@clickglueSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
Learned SASS
What challenges did you encounter, and how did you overcome them?Styling placeholder in input field with SCSS
P@thibault-devergePosted 5 months agoHey, you've done some really great work here, well done!
About the visual:
- Some design elements are slightly different from the Figma file, like the border-radius being smaller and the background color not matching exactly. However, I actually prefer your version to the original design. Maybe that was intentional?
- The responsiveness is broken between around 768px and 1000px. You might want to adjust the breakpoint to fix this, or avoid using a fixed width on the card in the desktop layout. Instead, you could use a percentage of the page width with a max-width, allowing the newsletter to adapt smoothly and grow with the screen up to a certain point.
About the code:
- I personally love the BEM naming convention for classes, and it's widely used professionally. It works especially well with SASS's nesting feature. It's a personal preference, but if you're unfamiliar with it, you might want to look into it and see if it suits you. :)
- Consider using more variables for colors, font sizes, font weights, etc. For a small project, it’s not critical, but if you ever want to revisit the design, using variables will allow you to change things like the primary color across the project easily. It’s also useful if a client wants to make quick adjustments.
- Also, not a big deal, but you could remove unnecessary files like the original README, template README, or HTML comments in index.html to keep things clean.
As you can see, these are just small suggestions, as the code is really clear and the project is very well done. I hope some of this is useful. Wishing you the best with your next project! :)
Marked as helpful0 - @Citizen2405Submitted 7 months agoP@thibault-devergePosted 5 months ago
Hi Wilbur,
I noticed you posted this project a while ago, but I'm happy to review it as part of my learning path tasks.
Visual Design:
Responsiveness: The website adapts excellently across all screen sizes, maintaining a high level of responsiveness.
Design Accuracy: It's very close to the original Figma design, which is impressive. The only minor observation is the absence of horizontal margins at the desktop size of frontendmentor. Overall, the visual execution is top-notch!
Code Quality:
Semantic HTML: The code could benefit from using more semantic HTML elements. Currently, there are several <div>s used. For improved SEO and accessibility, consider incorporating semantic elements like <section>, <article>, <main>, etc. Class Naming Convention: While the current naming convention works for a small project, adopting a structured naming method like BEM (Block, Element, Modifier) could enhance readability and maintainability, especially for larger projects. This is more of a personal preference, but it's a useful practice to consider.
Overall Impression: Your code is quite readable, and the design aligns closely with the original, which is commendable. Additionally, I saw that you're focusing more on Java and Python on your GitHub, which is fantastic!
Keep up the great work, and happy coding!
0 - P@KMS56135Submitted 7 months agoP@thibault-devergePosted 5 months ago
Hi,
Overall, your project is really well done and closely matches the original design for both desktop and mobile views. Great job! However, I have a few suggestions that could help improve it further:
Image Alignment
- Issue: The image doesn't show the same portion as in the design.
- Suggestion: Use
object-fit: coverandobject-position: leftto maintain the aspect ratio and align the image to the left, ensuring it matches the design.
Responsiveness
- Issue: The responsive layout breaks between 370px and approximately 800px.
- Suggestion: Ensure the design is responsive across all screen sizes. Consider using higher breakpoints and maintaining the mobile layout up to a wider screen width before switching to a horizontal flexbox layout for the card.
Share Panel Feature
- Positive: Great job implementing the feature to close the panel by clicking outside of it!
- Suggestion: It would be even better to allow users to close the panel by clicking the button again once it's opened.
Code Organization
- Suggestion: Try to use fewer pixels and prefer
remoremfor sizing. Reserve pixels for small values like borders and box shadows to enhance scalability and responsiveness.
Overall Impression
You're very close to the original design for both desktop and mobile views—well done! Addressing the responsiveness issues will make your project perfect.
Wishing you the best for your next project!
Marked as helpful0
