Submitted almost 4 years ago

Responsive background using SCSS

ravenloue•40

@ravenloue

A solution to the Profile card component challenge

Preview Code

Solution retrospective

I struggled the most with the background elements on this one. But once I figured it out, the rest was smooth.

Something I'm not certain about is how to fix the accessibility issues that the solutions page shows. The documentation provided when I visit the error is confusing to me. I've tried to fix it on other projects but just end up with more errors.

Code

Please log in to post a comment

Community feedback

Davide•1,705
@Da-vi-de
Posted almost 4 years ago
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 after body and 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

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord