Skip to content
OverviewSolutions
13
Comments
2
dkaffes
@dkaffes

All comments

  • Jeff Gicharu•80
    @jeffgicharuSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud that I was able to structure my HTML well and use a media query in my CSS. Next time I would include more CSS in the media queries.

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

    I can't really say I encountered any challenges.

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

    I would like some help with the media queries

    Social Links Profile

    2
    dkaffes•140
    @dkaffesPosted 8 months ago

    Nice work @jeffgicharu!

    I believe there is room for improvement in your code:

    HTML

    • You should use the semantic elements <main> for the main content and <footer> for the attribution part inside your <body>.
    • You could give a more descriptive alt attribute for the image.
    • Giving an h2 to the title is correct, since the whole card is possibly part of a webpage with its own h1 title. However, there is no meaning in setting an h4 for the "London, United Kingdom" text. This should be a <p>.
    • There is no point in using a <div> inside the <a> tag. You could use a class inside the <a> element in order to style the anchor links. Furthemore, hrefattribute should be set with the appropriate link or left empty (href="").

    CSS

    • If you add a footeryou need to include flex-direction: column; to the body. Along with some gap to make some space beetween main and footer. In this way the vertical centering of the card will be achieved.
    • You do not have to set height:100% to the .profile-card. The browser will decide the necessary height. However, we can set: min-height:100vh to make sure we have a minimum height.
    • Since you are using display:flex for the .personal-info you could use gap to create margin.
    • There is no need for a media query in this challenge, since there is no significant layout change. So, you could also add the padding directly in the body declaration so that the card does not touch the edges of small screens.

    I hope this is helpful!

    0
  • dkaffes•140
    @dkaffesSubmitted 9 months ago

    I used custom properties to handle two different margin-bottom values:

      --marg-bott-l: 1.5rem;

    I used these two values for many CSS declarations.

    Is there any other more efficient way to declare the same margin-bottom value to multiple elements?

    In terms of accessibility, are there any important missing bits?

    Recipe page | Custom properties

    1
    dkaffes•140
    @dkaffesPosted 9 months ago

    --marg-bott-s: 1rem; --marg-bott-l: 1.5rem;

    0