Frontend Mentor | dkaffes's profile

@jeffgicharu

Submitted 4 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

@dkaffes

Posted 4 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!

All comments