Skip to content
OverviewSolutions
8
Comments
2
P

Joe Kotvas

@joekotvas140 points

Joe is a front-end developer and UX specialist who has been building client sites for over a decade. He is passionate about creating beautiful, user-friendly websites that help businesses grow.

Latest solutions

View more solutions

Latest comments

  • P
    Joe Kotvas•140
    @joekotvas

    Great work on this component!

    A few quick notes:

    Hover state for article title Don't forget about the yellow link hover state! The article title could also stand to be a heaver font-weight.

    Sizing The way you specified the component width is interesting, but you will have better results if you specify border-box sizing for all elements:

    * {
  box-sizing: border-box;
}

    And then remove the width: 50%; declaration on .card and declare max-width: 24rem; instead.

    Also, if you make your Github repo public, people can view and interact with your code.

    Marked as helpful
  • P
    Joe Kotvas•140
    @joekotvas

    Great job!

    A few things you can do to tighten up the design are to set the image to max-width: 100%;, be a little more generous with padding, and use line-height: 1.5; on the article description. Pay close attention to padding and margin overall, as that will help your design breathe better.

    It's also a great idea to center vertically as well as horizontally. You can do so by wrapping all your page content in a container and setting the following on the body tag:

    body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}