Skip to content
OverviewSolutions
4
Comments
4
vitchet
@vitchet

All comments

  • Jeisson Andres Cardenas Verdugo•20
    @Jeissoncar97Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud that I finished it in 4 hours and it looked very similar, the organization of the html would be improved.

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

    The most difficult were the list markers, thanks to several forums I did it in a very comfortable wa

    responsive landing of recipe page usinghtml and css

    1
    vitchet•80
    @vitchetPosted 5 months ago

    Hello, Jeisson!

    Very nice work, looks very close to design!

    But there are a few moments I want to mention:

    1. If you take a closer look to the mobile design you could notice that it's a little bit different from the one for desktop. In the mobile version there is no padding around the component, also there is no padding around the image. Your padding seems static, so the whole component is shrinking on mobile but the padding doesnt and it looks relatively bigger.
    2. Try using flex-box, it makes code cleaner and easier to maintain. It's really easy to get lost in all the margins and paddings. It may seem scary to use that technique, to be honest, I hesitated to use it myself, but this little game helps a lot. Try it out: https://flexboxfroggy.com
    3. In the nutrition table there is no line after the last line, using ":nth-child" pseudo-selector can help fix it.
    4. In ingredients section the markers are squares not disks. Yes, markers bring pain, but I believe after all the work you've done, you will easily deal with that problem.
    5. As you mentioned your self the html needs improvement. Semantic html is mandatory
      now days.

    Hope I didn't overwhelm you with all those notes. They are actually small, but can help you improve. For the rest, you did really great job, at the moment it's the best solution I've seen on the site.

    Keep going!

    Marked as helpful
    1
  • vitchet•80
    @vitchetPosted 5 months ago

    Good job, Karim! It's looking good.

    I want to give you some advice. Try using flex-box instead of margins, it would make things easier to develop and change if needed, and it makes code easier to read. When you add hover styling for links don't forget to add them for focus too, it's needed for screen readers and mobile users(you can't hover on phone). It's also good to use css variables for repeatedly used values, so you can easily change them all in future.

    For everything else, very solid and clean work. Keep going!

    0
  • vitchet•80
    @vitchetPosted 5 months ago

    I see there is no code on github for this solution. On the preview I see that it is not responsive, also is too small for desktop(in my opinion). Hope, you come with some solution so people can observe the code in future.

    0
  • vitchet•80
    @vitchetPosted 5 months ago

    No semantic HTML, but I guess this isn't crucial for a project being that small. Not responsive, this solution covers only the smallest mobile version. Also used smaller font-size, the design suggests 15 pixels. CSS code should not be inside html, it's easier to read and maintain CSS code when it is separated inside a .css file. QR code image is missing on the screenshot.

    In conclusion: very raw solution that needs a lot of improvement.

    Marked as helpful
    0