@Da-vi-de
Posted
Hi, it looks good, good result on this challenge! The root of the problem for what i see is the absence of semantic HTML, that's the reason you have those issues, i try to explain something.
- The first issue: "Document should have one main landmark". That means you always need an element that represent the navigational region such as: header, main, nav, footer. In your code after
<body>opening you have 2<img>tags, starting right away like this it's not a good practice, you should open a<main></main>element afterbodyand wrap all the code up to<footer>element, like so:
<body>
<main>
all your code
</main>
<footer>
footer code
</footer>
</body>
The main element contains the card which is the only thing in the page, so it's the main content; the footer though is not part of the main content because <footer></footer> has a specific meaning in a web page, typically contains information about the author of the section, copyright data or links to related documents. I guess by now you're starting to understand what a navigational region is.
- The second issue repeated more times: "All page content should be contained by landmarks". It's similar to first issue but in my opinion is even more serious! Unfortunately your website can't be accessed by a screen reader because it expects to find semantic elements not only
<div></div>elements which are used mostly for styling purpose! For example i saw the last part of the card is kinda messy in HTML, you wrapped all individual headings in divs whereas you could use an appropriate element like an<article></article>and group together what it needs to be together, like so:
<article>
<h3>80k</h3>
<p>followers</p>
</article>
I saw you used <h1><h1> heading, i used <h3></h3> instead because h1 can't be reused and heading have a discending order in the page.
- I strongly recommend a pragmatic approach. Practicing and reading, baby steps, there's so much to know and learn! One of the best reference is mozilla docs.
Hope it helps, keep coding :-)
Marked as helpful
@ravenloue
Posted
@Da-vi-de
Thank you for explaining the landmarks issue.
I had originally grouped the lower elements together (like you suggested with the article tag), but I couldn't figure out how to reduce the spacing between the items. When I made them separate items on the grid, it was much easier to control the spacing. Do you have any other suggestions on how to handle this?
@Da-vi-de
Posted
@ravenloue Yeah sure, it's pretty basic, you will find this kind of text in many challenges!
- I didn't look at your style yesterday i was focused only on HTML. Well, first thing first: no grid please! You don't need it, grid is better suited for multi dimensional layouts and it's hard to manage! Use flexbox instead, it's a pice of cake with it. I'll show you, try in your text editor:
<div class="container__text">
<article class= "info-text ">
<h3 class= "info-number">80k</h3>
<p class="info-name">followers</p>
</article>
the other 2 articles put the same classes as above
</div>
then in CSS
.container__text {
you might need margin-top as well
width: ...
height: ...
display: flex;
align-items: center;
justify-content: center;
border-top: 1px solid .... grey color for the line
}
.info-text {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
info-number and info-name class is just text, you style it as you need to.
- As you can see you have a parent where you apply flexbox to confirm all your items inside are flex items, then you have each single item grouped, you apply flexbox in detail. That's it! It sould be ok, i didn't try it i just wrote everything here in the comment, If it's not ok let me know :-)
Marked as helpful
@ravenloue
Posted
@Da-vi-de
Thanks for the help with using flex on this! I managed to get the same look that I had with the grid with 2 or 3 lines fewer code.
I had to use "flex-direction: row" instead of column though. Also figured out that I could adjust the margin for the <p> tag to make the articles the distance apart I was looking for!
Thank you so much ^_^
