Skip to content
OverviewSolutions
4
Comments
4
Pritam Panda
@imxeon

All comments

  • Iyanu Arowosola•40
    @Sevenwings26
    What are you most proud of, and what would you do differently next time?

    I was able to plan the project layout in time.

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

    The small screen

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

    Layout planning

    Simple Omelette Recipe page

    #accessibility#airtable#backbone#contentful#ember
    1
    Pritam Panda•60
    @imxeon

    You have achived the design with slightly different code, great work 👏 but here are some minor improvements that you can make from my perspective.

    1. The design of the card in desktop view is quite broad which does not looks familiar to the reference design quickly fix it.
    2. You can use section element with an id to name it, to wrap related div elements.
    3. Use less div elements.
    4. The fifth div element is using the wrong class name rectify it for acessibility.
    5. Write the full name for sixth div class - nutrition instead of nutri
    6. Remove the margin from the main element for the mobile view.
    7. The body type selector is repeated in the stylesheet twice. Move the property values from the second body type selector to the first one or vice versa.
    8. Your design is lacking the spacing after the unordered lists and ordered lists, Add the padding-left property to add the space.
    .prep-time ul li, .ingredients ul li, .ordered li {
    margin-top: 0.7rem;
    color: hsl(30, 10%, 34%);
    padding-left: 20px;
}
  • Pritam Panda•60
    @imxeon

    Hey @FAK01 good work but here are some things you can improve and change -

    1. Replace the div with class=card with the section element.
    2. It would be much better if we had more spacing above the p element.
    3. The colour-transition on the button should be quicker.
    4. Use the cursor pointer when hovering over the buttons.
    Marked as helpful
  • Pritam Panda•60
    @imxeon

    You have done a great job👍

    1. Your solution includes semantic HTML.
    2. The webpage is acessible too.
    3. The layout is fitting in a range of screen sizes.
    4. The code is well-structured, readable, and reusable.
    5. The solution is very similar to the reference design.

    I didn't find any flaws, maybe you have forgotten to add the favicon.

  • Pritam Panda•60
    @imxeon

    First thing - remove the attribution from the bottom of the card, the goal is to make similar or exact design to the reference. The reference design does not contains it.

    1. The solution does not include semantic elements. Include elements like main, section instead of using div everywhere for better accessibility.

    2. It is recommended to use lowercase for CSS selector names. Replace the capital H in this line <div class="Heading"> with lowercase h.

    3. You should use the type selector h2 directly in the stylesheet to target the element instead of using inline styling - <h2 style="padding:0;margin:0;display:flex;">Improve your front-end skills by building projects</h2> this will result is better readability of the code.