Skip to content
OverviewSolutions
6
Comments
4
P

Caitlin Donahue

@DonahuecMinneapolis, MN120 points

I'm a front-end developer here to practice and polish my basic skills outside of what I get to do at my job :) I'm enjoying treating these as micro-challenges to work on in my free time.

I’m currently learning...

- polishing and deepening my core web skills

Latest solutions

Latest comments

  • Arthur•100
    @arthur-schevey
    What are you most proud of, and what would you do differently next time?

    This was a tougher one and things are starting to get more complicated, overall I think it is more accurate than I had hoped.

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

    I got to learn about a few new properties for elements I don't use much. Notably the table and (un)ordered lists and list items. For example table-layout and border-collapse.

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

    I'm really struggling with the recipe image for the mobile layout. I'm not sure how to make it take up the full width because the padding is in the way, but I can't reasonably get rid of the padding without restructuring the HTML, so I suspect I didn't structure the HTML adequately. I would appreciate advice on this.

    Recipe page with mobile layout

    2
    P
    Caitlin Donahue•120
    @Donahuec

    I didn't look into the whole solution, because I am tired and just saw this in passing. But I thought I would pop in and give you a hint for the image: you can give the image a negative margin equal to the container padding on small screens, which allows it to expand outside of it's container :)

  • P
    Caitlin Donahue•120
    @Donahuec

    Colors and Text Styling look good.

    Potential Areas for Improvement:

    • you'll have better luck with the full page layout if you put the flex styling on an element like main instead of the body. Generally body styles should be limited to things that affect the whole page, such as fonts and background color.
    • instead of setting explicit height and width, it is better to rely on flexible widths like 'fit-content' and allow the element to adapt it's own height. this will help with adapting to smaller screens. For instance, my laptop has a shorter screen, which caused the card to overflow off of the screen due to the explicit height and margins.
    • you can avoid some repeated styling by moving the base font styles (i.e. font family) onto the body tag
    • semantically you should use an h1 rather than h2 since it is the primary header on the page.
    Marked as helpful
  • P
    Caitlin Donahue•120
    @Donahuec

    The github link resolves to a 404 so I cannot properly review the code.

    Colors and typography all look good.

    From the site, it looks like more work needs to be done to match the design:

    • still needs box shadow and border on the card, as well as border radius on the image.
    • spacing and layout could use updates. Remember to keep in mind padding on individual elements and how those interact with the layout.
    • the content on the card overflows on smaller screens, consider using fluid margins and flexbox to position the card instead of setting a fixed height and width.
  • P
    Caitlin Donahue•120
    @Donahuec
    • you'll want to put flex on an element instead of body. Trying to do layout work on body gets weird and doesn't always work. I'd recommend putting the display: flex on a main element. Also, setting it to column will make it easier to center objects both vertically and horizontally.
    • jumping to using all rem units for spacing seems nice but will likely cause layout issues for users who change their base font size, since the layout/spacing size will also grow and make it harder to to fit the content on the page. It is better to use units like px or percentages for layout, and keep rems to text related layout.
    • you can use the semantic html <main> element instead of a div with role=main
    Marked as helpful