Skip to content
OverviewSolutions
12
Comments
14
P
thibault.deverge
@thibault-deverge

All comments

  • thibault.deverge•290
    @thibault-devergePosted 9 days 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! 😊

    0
  • thibault.deverge•290
    @thibault-devergePosted 17 days 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
  • thibault.deverge•290
    @thibault-devergePosted 27 days 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 helpful
    1
  • clickglue•460
    @clickglueSubmitted about 1 month ago
    What 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

    Newsletter subscrition

    1
    thibault.deverge•290
    @thibault-devergePosted 29 days ago

    Hey, 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 helpful
    0
  • thibault.deverge•290
    @thibault-devergePosted about 1 month 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
  • thibault.deverge•290
    @thibault-devergePosted about 1 month 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: cover and object-position: left to 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 rem or em for 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 helpful
    0
  • Francisco•210
    @antoniomontoiaSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of achieving this solution within a tight deadline. I set a short timeframe for myself and successfully completed the project without feeling overwhelmed.

    However, next time I would like to take a bit more time to address some minor fixes and improvements. Instead of relying solely on a trial-and-error approach, I plan to allocate time for careful testing and refinement.

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

    I faced a challenge when trying to align the four cards horizontally for the desktop version of the layout. Initially, I struggled with ensuring that the cards displayed correctly without overlapping or misaligning.

    To overcome this, I created a separate group for the two center cards, which allowed me to align them horizontally. By utilizing Flexbox features, I was able to adjust their positioning and spacing effectively.

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

    I would appreciate guidance on alternative methods for aligning the cards in a responsive manner. If there are different techniques or best practices that could achieve a similar layout while enhancing responsiveness, I would love to learn about them.

    Additionally, I am interested in tips for writing cleaner and more maintainable code. Any advice on structuring my CSS or utilizing SASS features more effectively would be greatly appreciated.

    Responsive Four Card Feature Section

    1
    thibault.deverge•290
    @thibault-devergePosted about 1 month ago

    Hi Francisco,

    Congratulations on completing your project! Overall, it's really well done and closely matches the original design. It's evident that you've put a lot of effort into this, especially if you were working under a tight deadline. Bravo! 👏

    Here are some specific points as I'm still here to feedback and found some improvements:

    Visual Feedback:

    • The cards are missing the full white background. Currently, they have a grayish tint, but the original design specifies a completely white background.

    • The content within the cards is centered both vertically and horizontally. However, the design only centers it horizontally with a larger margin at the top. Maybe adjust the vertical alignment to have more top margin instead of centering vertically.

    • The cards appear slightly wider and less tall than the original design.

    Overall Visual Impression:
    I'm quite peaky because your design is already really close to the original. So that's no deal breaker things to fix.

    About code & SCSS Organization:

    1. SCSS File Structure

      • Organizing SCSS files helps in maintaining and scaling your styles. Maybe in the future structure your SCSS with separate partials and import them into a main file. There should be one main file generally 'main.scss' which would import all the other one. 
        /scss
│
├── abstracts/ 
│   ├── _variables.scss
│   ├── _mixins.scss
│   
│
├── base/
│   ├── _reset.scss
│   └── _base.scss
│
├── components/
│   ├── _card.scss
│ 
│
└── main.scss         // Main file importing all partials

    2. BEM Naming Convention

      • Using multiple classes like feature__card feature__card--blue enhances clarity and follows BEM methodology. Apply BEM consistently to maintain a clear and scalable structure. In your code for example, you use differents class for all the article even if most style will be applied for all. 
        <article class="feature__card feature__card--1">
  <!-- Card content -->
</article>

    3. Unit Usage

      • I found thare an excessive use of px for padding and other properties. Use rem or em for padding and margins to ensure scalability across different screen sizes. Keep 'px' for really close mesure like border-radius, box shadow and for all the rest -> em/rem. I could suggest to use an online converter to convert from px to rem or better, a vs code extension ! :)

    4. CSS Grid

      • You've effectively used Flexbox for the desktop layout, which is impressive to realize this layout with only Flexbox! For future projects, consider exploring CSS Grid as it offers powerful capabilities for complex layouts and might simplify some aspects of grid management. For this kind of design, it can really simplify your life you'll see. Just need a 12 layout column grid and align based on that

    Overall Code Impression:
    Your code is clean and functional. That's really good work and really impressive for the desktop design with only flexbox !

    Happy coding and best of luck with your next project! 🚀

    Marked as helpful
    2
  • thibault.deverge•290
    @thibault-devergePosted about 1 month ago

    Project Feedback

    Hi rajaab,

    Great job on your project! I enjoyed reviewing your code and the overall design. Here are a few suggestions that might help enhance your work. Overall that's really good with use of flexbox, relative unit and not too long css. Well done !

    About the visual, I would say:

    1. Card Width and Centering vertically

      • The card feels a bit too wide and isn't fully centered vertically. You can maybe use Flexbox on the <body> to center the card both horizontally and vertically. Additionally, applying max-width and min-width instead of a fixed width allows the content to scale more naturally across different screen sizes. You can see on mobile devices like the iPhone 12 Pro, the card isn't centered vertically.

    2. Equal Distribution Between Image and Content

      • The image and content sections should each take up 50% of the card, but currently, the content appears slightly larger. Ensure both .product-card__image and .product-card__content have equal flex properties to maintain a balanced layout.

    3. Breakpoint Adjustment for Responsive Layout The breakpoint for switching to the desktop layout might be set too high, potentially causing issues on devices like the iPad Mini in landscape mode. Consider lowering the breakpoint to ensure a smoother transition from column to row layouts across various devices.

    About the code :

    1. Reducing Unnecessary <div> Elements

      • There are multiple <div> elements wrapping around <p> and <h1> tags.Since <p> and <h1> are block-level elements by default, you can style them directly without additional <div> wrappers. This simplifies your HTML and makes it more semantic.

    2. Optimizing Image Loading with <picture> Element Having two <img> elements for different viewport sizes can lead to both images being loaded, affecting performance. Use the <picture> element to allow the browser to choose the appropriate image based on the viewport size. This ensures only the necessary image is loaded, improving load times. It also improve your life as you don't need to display: none in your css, it is handled automatically.

      • Example: 
        <picture class="product-card__image">
  <source media="(min-width: 800px)" srcset="./images/image-product-desktop.jpg">
  <img src="./images/image-product-mobile.jpg" alt="Product's photo">
</picture>

    Here, the browser will choose the desktop image if the min-width is more than 800px but fallback to the mobile image if it not the case for example.

    1. Implementing CSS Reset and Naming Conventions Incorporate a CSS reset to ensure consistency across different browsers. Additionally, adopting a naming convention like BEM can improve the readability and maintainability of your CSS. BEM Methodology This advice is quite personal, but could be nice to research about it and see if you want to implement in future project.

    Keep up the great work, and feel free to reach out if you need any more tips or assistance! Happy coding :)

    0
  • Himanshish08•60
    @Himanshish08Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    During this project I learnt some new methods which was not taught by my teacher from whom i learn HTML and CSS Next time i make more attractive project in less time.

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

    During this project i can not figure that how to change the color of list bullets or numbers but from open sources in google i learnt that it can be done by using marker property of lists.

    Responsive Recipe page using HTML and CSS

    2
    thibault.deverge•290
    @thibault-devergePosted about 2 months ago

    Overall Feedback: First off, great work! You've created a design that is very close to the original, and it's clear you've put a lot of effort into making it as accurate as possible. Your attention to detail really shows, and you've done an excellent job. While it's almost pixel-perfect in many ways, there are a few minor inconsistencies that could be refined.

    Visual Feedback:

    • Typography: The font weight for the headings could be bolder, and the font family for the main <h1> heading is not quite the same as in the design. Fixing this will make your design even closer to the original.
    • Image Responsiveness: On mobile devices, the image should be full width. It currently looks a bit constrained, so ensuring it expands to the full width will improve the layout on smaller screens.
    • Layout Shrinkage: The design feels a bit too "shrinked" on smaller screens. You might want to look into using max-width for better fluid responsiveness across different screen sizes.

    Overall, your design is really solid and close to the original. Just a few tweaks can make it perfect!

    Code Feedback:

    • External Styles: It’s a good practice to extract your CSS into a separate .css file. While keeping styles inline is fine for a small project, it's best to get into the habit of separating HTML and CSS as projects grow in complexity.

    • Use of id vs class: Using id for styling works, but it’s generally better to use class attributes. class allows for reusability and has lower specificity, making your CSS easier to maintain and more scalable. It also opens the door to utility classes (like in Tailwind CSS) and reusing the same styling across multiple elements. Also for the naming convention, here is a good one I personnaly use if it can be helpfull Link BEM Method Explained

    • Semantic HTML: You could enhance your HTML structure by using more semantic elements. For example:

      • Wrap the entire recipe inside a <main> tag.
      • Use <section> elements for distinct parts of the recipe, such as Ingredients, Instructions, and Nutrition.
      • Encapsulate the entire recipe inside an <article> tag to make it clear that it's a self-contained piece of content.
      • Consider using a <table> for the Nutrition section, as it’s tabular data.

      These changes will improve accessibility (especially for screen readers) and help with SEO. Semantic HTML - Kevin Powell

    • Relative Units: It's important to avoid using px for font sizes, padding, and margin, as it can hurt responsiveness. Using relative units like rem and em will make your design more adaptable to different screen sizes. Pixels should generally be reserved for fixed values like border-radius or other small details that don’t need to scale. Kevin Powell - CSS em and rem explained Kevin Powell - Are you using the right CSS units

    Conclusion: You’re really close to nailing this project, and it’s clear that you’re on the right path. There are a few improvements to consider, but overall, your work is excellent. Keep it up, and I’m excited to see what you do next!

    Best of luck, and happy coding! 🚀

    Marked as helpful
    2
  • auniraden•10
    @auniradenSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I’m most proud of successfully translating the design into clean, responsive code while maintaining the layout’s accuracy and simplicity. If I were to approach this project again, I would focus on optimizing my workflow by planning out the structure and styles more thoroughly before coding to reduce the time spent on adjustments. Additionally, I would explore using CSS Grid for more complex layouts to expand my skills further.

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

    One challenge I encountered was ensuring the QR code component was perfectly centered on the page across different screen sizes. To overcome this, I utilized flexbox for its flexibility and ease in centering elements both vertically and horizontally. I also referred to MDN Web Docs for guidance on flexbox properties and tested the layout across various devices to ensure responsiveness.

    Responsive QR Code Component using CSS

    2
    thibault.deverge•290
    @thibault-devergePosted about 2 months ago

    Overall Feedback: First of all, excellent work! You've done a great job and the design is really close to the original. The layout works well across devices, especially on phone screens, which is a big win for responsiveness!

    Visual Feedback:

    • Border Radius: The border radius on the container is slightly off compared to the original design. It’s a small detail, but achieving pixel-perfect precision is a valuable skill. Paying attention to these details will bring your design even closer to the original.
    • Typography: The heading could be a bit bolder to match the design more closely, and the font size of the text could be slightly smaller. As part of the learning path, the igma file is available for free for the first two projects—it's a great tool to refine your pixel-perfect integration skills.
    • Font Family: I noticed that the font family isn't displaying correctly because of a small typo. In the CSS, you have "Outift" instead of "Outfit". Fixing this should resolve the issue.

    Code Feedback:

    • Naming Conventions: The naming structure in your code is fine, especially for a small project like this. However, as projects grow larger, it might be helpful to adopt a more consistent naming convention like BEM (Block, Element, Modifier). It’s a good habit that will make your code more scalable and easier to manage.
    • Semantic HTML: Great job using semantic elements like <main>, <section>, and <article> instead of relying solely on <div>! This improves both accessibility and SEO. Keep this up!
    • File Organization: It's a best practice to store your CSS files in a styles directory instead of placing them in assets. This will keep your project structure clean and organized. Adding a CSS reset file would also be beneficial to remove browser inconsistencies and ensure your design renders more consistently across different browsers.
    • Relative Units: It’s great to see you using rem and em for font sizes, which is excellent for accessibility and scalability. Try applying the same approach to padding and margin values as well. Pixels should generally be reserved for small, unchanging elements like border-radius.

    Conclusion: Overall, this is a fantastic effort, and you’re definitely on the right track! There are a few areas to refine, but that's really good already! Keep pushing forward, and I’m excited to see how your future projects turn out. Best of luck, and happy coding! :)

    1
  • Afeez Bolaji•300
    @Afeez-OlaSubmitted 2 months ago
    What challenges did you encounter, and how did you overcome them?

    Making the page responsive

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

    Responsiveness, but I'll get the hang of it.

    Responsive Recipe Main Page

    1
    thibault.deverge•290
    @thibault-devergePosted about 2 months ago

    Visual Feedback:

    • The inner content is overall well-executed and quite close to the design, but there are a few areas where it could be improved to achieve pixel-perfect precision. Some examples include insufficient margins and approximate spacing. Result is too shrink compared to design. Additionally, certain typography elements are slightly off, especially in terms of color.
    • The text in the list items is not aligned properly compared to the design. Adding some padding-left to the <li> elements could help align the text more accurately.
    • The table doesn't fill the container as expected, and the final row shouldn't have a border at the bottom. Adjusting the width and removing the last border would help improve the layout.
    • The design appears too "shrinked" on tablet viewports. It doesn't feel balanced and spacious, likely due to inadequate responsiveness, making it appear too narrow. Could have use flexbox on the body and use of a 'max-width' on your segment class to make it fluid on the responsiveness to tablet.

    Code Feedback:

    • Semantic HTML: One of the goals of this project is to practice semantic HTML. While your structure is clean, there are many <div> elements where more appropriate semantic tags could be used. For example:

      • The nutrition table could be improved by using a <table> element with <tr>, <th>, and <td>, which is semantically appropriate for tabular data.
      • For sections like "Instructions" and "Nutrition," using <section> elements would improve accessibility, and the overall recipe could be wrapped in an <article> inside a <main> tag. This would benefit both SEO and screen reader accessibility. Kevin Powell - How to write semantic elements

    • BEM Naming Convention: Your class names are well-structured and inspired by the BEM method, which is great. That said, using a double underscore (__) for block-element separation would make your code fully adhere to BEM. It's a minor detail but worth considering for consistency.

    • CSS Reset: Including a CSS reset would help standardize browser styling, ensuring that your design renders more consistently across different browsers. This could save time when dealing with cross-browser issues. A modern CSS reset - Josh Comeau

    • Relative Units: It's great to see you using rem for font sizes, which is a best practice. However, switching entirely to relative units for spacing (e.g., padding and margins) would improve scalability. Try to avoid using px for font sizes and layout spacing. Pixels can still be used for small details like border radius, but for responsiveness and flexibility, relative units like rem or em should be favored. Kevin Powell - CSS em and rem explained

    Overall Feedback:

    This is a really solid effort! The code is well-organized and clean, making it easy to read and understand. You're definitely on the right track, with a lot of good practices already in place. There’s always room for improvement, and the feedback above should help you refine your project further I hope. Keep up the great work !

    Happy Coding ! :)

    0
  • thibault.deverge•290
    @thibault-devergePosted about 2 months ago

    Hello,

    You've put in a commendable effort on this project, but I do have some suggestions that could improve both the design and code quality, making your work more polished and aligned with best practices.

    Visual Feedback:

    • Card Positioning: The card currently sits at the top of the screen. Centering it vertically would enhance the overall appearance. A common approach is to use min-height: 100vh on the body and apply flexbox to ensure the card is centered both horizontally and vertically. Kevin Powell - Learn Flexbox

    • Font Selection: The design calls for the Inter font, which is currently not implemented correctly. It should be imported via Google Fonts. I recommend reviewing the process for importing and applying web fonts. Google Fonts is a helpful resource for this.

    • Spacing: The spacing, particularly between the links, feels too constrained. Adjusting the vertical spacing would give the design a more balanced and professional look. Once you know flexbox it will be super easy. ;)

    Code Feedback:

    • Use of IDs: While not incorrect, using classes instead of IDs for styling is a more scalable approach. Classes have lower specificity, making them better suited for larger projects or components. It will also allow you to make reusable css components and improve your productivity.

    • CSS reset : Using a CSS reset is a recommended best practice as it helps to normalize browser default styles, ensuring that your design behaves consistently across different browsers. Each browser has its own default styling for elements like margins, padding, and font sizes, which can lead to unexpected layout issues if not properly addressed. A CSS reset strips away these inconsistencies, giving you more control over your design and allowing you to apply styles uniformly. I would recommend exploring popular resets like Normalize.css or Josh Comeau’s CSS reset as they provide a solid foundation for modern web development. Implementing this in your project will help avoid unpredictable spacing and alignment issues, especially when working with different browsers.

    • Naming Convention: The class naming could be improved. I recommend adopting a methodology like BEM (Block, Element, Modifier) for clearer, more maintainable CSS. This will be particularly useful as your projects grow in complexity. Here is a nice ressource about BEM : Kevin Powell - Why I use the BEM naming

    • Button Semantics: For the links that lead to external social media profiles, it’s better to use <a> elements styled as buttons rather than <button>. This improves both semantics and accessibility, especially for users relying on assistive technologies.

    • Units: Avoid using px for font sizes, padding, and margins. Instead, use rem or em, which scale more fluidly with the user's settings, providing a more responsive design. Pixels are better suited for smaller elements like border-radius or box-shadow. Here is another another link

    • Layout: Rather than relying on margin and padding for layout and spacing, I suggest again using flexbox. Flexbox offers a more efficient way to handle alignment and distribution of space, particularly for responsive designs.

    This project demonstrates a good starting point, but addressing the above points will significantly improve both the visual quality and maintainability of your code. Keep up the good work, and don’t hesitate to reach out for further guidance. Best of luck on your next project.

    Happy coding ! :)

    0