Skip to content
OverviewSolutions
7
Comments
7
Simon Capillon
@simon7195

All comments

  • Simon Capillon•100
    @simon7195

    Perfect job! Closer to the original design as mine.

  • Simon Capillon•100
    @simon7195

    Looks perfect to me. Good job!

  • Simon Capillon•100
    @simon7195

    Nice job!

  • Mario Jun•60
    @japaxapa
    What are you most proud of, and what would you do differently next time?

    I started the code with mobile first in mind and used BEM to organize the code

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

    Styling list tags and setting the responsive code

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

    Any feedback on BEM usage

    Creating a recipe card using HTML and CSS

    1
    Simon Capillon•100
    @simon7195

    Well done!

  • Simon Capillon•100
    @simon7195

    Hi! 😄

    Your solution is really nice, I really like the little animation that moves when the buttons are hovered.

    May I make a few comments :

    • For the avatar, you used the background of your div to insert your image. I think using an img tag would have been more appropriate, especially in terms of accessibility, as in your case you can't display alternative text (alt="avatar of ...").
    • For geographic datas, a p tag would have been more appropriate than an h2.
    • The section tags defines important areas of a site. In the case of a linktree, a div or span would have been more appropriate.
    • Regarding fidelity to the proposed design, your dimensions differ a little from the model. It's a detail, but for some designers and customers it can be annoying.
    • Your CSS is very short, I think that's great, especially since on my side they're usually longer 😓. However, I think you should use classes because in a larger project, using tags as selectors is a dangerous gamble and makes it difficult to read your code (especially if it's uncommented as is your case).

    I hope you find my comment useful. Keep it up! ✌️

  • Satyam-Pandey677•220
    @Satyam-Pandey677
    What are you most proud of, and what would you do differently next time?

    Now I'm understand the html trees and all CSS properties

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

    None

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

    none

    Blog Card Design

    1
    Simon Capillon•100
    @simon7195

    Hi there! I think you've got the wrong project. This is the QR code project.. 😕 You should replace the link if possible, it's a shame not to be able to see your solution and give you advice if needed.

  • Simon Capillon•100
    @simon7195

    Hi! It's not bad at all, the code is clean and the CSS is commented. The card is responsive and the font sizes in em which is good. You could do this to improve :

    I'm not a pro, so take my advice with a grain of salt! Good Job!

    • Use rem instead of em so that the fonts react to the user's settings.
    • Use <h1> instead of <h2> to comply with the HTML agreement.
    • Put everything in a <main> tag like this <body><main>..content-here..</main></body>, again it's to better comply with the HTML agreement.
    • There are a few differences between the dimensions of the solutions and the original design (lengths, heights, border-radius). On Figma, you can control a specific element with CTRL (or CMD) key + LEFT MOUSE CLICK on it and view its characteristics in the right-hand panel (to check border-radius, for example). You can also check spacing by holding the ALT key + MOUSE OVER a selected element.

    Good luck!

    Marked as helpful