dkaffes• 140
@dkaffes
Posted
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
altattribute for the image. - Giving an
h2to the title is correct, since the whole card is possibly part of a webpage with its ownh1title. However, there is no meaning in setting anh4for 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 includeflex-direction: column;to thebody. Along with somegapto make some space beetweenmainandfooter. 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:100vhto make sure we have a minimum height. - Since you are using
display:flexfor the.personal-infoyou could usegapto 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
paddingdirectly in the body declaration so that the card does not touch the edges of small screens.
I hope this is helpful!
0
