Design comparison
SolutionDesign
Solution retrospective
Constructive feedback please :)
I am aware I put the text at the bottom of the page, which might not have been needed.
Community feedback
- @Dani237Posted over 2 years ago
Hi Paulina, first of all, great job.
Some considerations about your report.
For the HTML Validations:
- Make sure that you are declaring the styles in your css file. So don't write styles code in your html file. In your specific case, '100%' is not an allowed value for 'width'.
For the Accessibility:
- Make sure that you are using a main tag in all your html projects. That is for the main content of your site and is very important for the browser.
- You can put your main tag arround this piece of code.
<main> <div class="card"> <img class="background-user" alt="user background pattern" src="images/bg-pattern-card.svg" width="100%"> <div class="profile"> <img class="imgpf" src="images/image-victor.jpg" alt="profilepic" width="100" height="100"> <h1 class="name">Victor Crest <span class="age">26</span></h1> <p class="london">London</p> </div> <div class="smallerinfo"> <ul> <li> <span>80K</span> <span>Followers</span> </li> <li> <span>803K</span> <span>Likes</span> </li> <li> <span>1.4K</span> <span>Photos</span> </li> </ul> </div> </div> </main>
- You can do the same with the footer tag
<footer> <div class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. <br> Coded by <a href="https://github.com/paulinahs" target="_blank">Paulina Hesselius</a>. </div> </footer>
I hope this can be helpful to you! :D
Marked as helpful1 - @dnksebastianPosted over 2 years ago
Hi Paulina,
overall you did well! There's only a couple of small things which you might want to tweak up:
- it's generally a good practice to name your classes or ID's in a way that explains what the given element does; for example you could use 'user-location' here: <p class="london">,
- you could easily get rid of the accessibility issues by using semantic elements, such as <section> or <footer> instead of plain <div>'s,
- it's recommended to avoid using HTML when it comes to the visual aspect of your site - that's why if you want to keep the line break in your footer, you can use CSS or just wrap your sentences in a block element, instead of using the <br> tag. Anyway, these are really minor points :)
Hope that helps, keep it up!
0@paulinahsPosted over 2 years ago@dnksebastian
hello, thank you for the feedback, I will definitely check it out and do the changes :)
1
Please log in to post a comment
Log in with GitHubJoin 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