HTML and CSS solution with Flexbox

Solution retrospective
My first challenge! I would love some feedback on my code structure and content. Also for the svg images in the background, is there a way to make them stay fixed in responsive layouts? I had to re-arrange them for the mobile version. Thank you!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @grace-snow
Hi Maya,
Overall this looks really good 👍
I'd recommend you just take another look at the semantics of your html.
-
You've tried to use headings in order, which is great, but try to really think about what makes sense as a heading.. . Eg what would you expect content to be under a heading of "803k"? Would that make sense on a contents page? Probably not. So it shouldn't be a heading. I think you only need one heading max on this, and the stats should be combined into a single meaningful tag like a paragraph or list item (using spans inside to style the number and word respectively)
-
At a push this could be an article. But remove the header main and footer from it. Header and footer are allowed technically inside an article, but they actually make for a really poor screenreader experience. Assistive tech users would find it much easier to navigate when those are only used for main page/site content, like one header per page just like you have one h1 per page .
Have a look at my solution if youd like to see how I approached it.
Hope all that is helpful
-
- @RenszCamacho
Hello. Nice job!. You got a few issues,
-
One of them is the
main
tag, which must be involving yourarticle
tag. -
It's a 'Good Practice' use a class instead of an Html tag. Like
<header class="header">
. There's something called 'specificity'. You could have more than one footer and don't want the same style. -
Image tag should have an alternative text
<img src="images/image-victor.jpg" alt="user image - victor" />
-
About the images in the background, you can play with the viewport width and viewport height. Something like this:
background-position: right 52vw bottom 38vh, left 49vw top 51vh;
Hopefully, it helps.
-
- @ApplePieGiraffe
Greetings, Maya Buser De! 👋
I just wanted to say, congratulations on completing your first Frontend Mentor challenge! 🎉 Good work on this one! 👍
Simply follow the helpful suggestions given above, and I think you'll be good to go! 😀
Keep coding (and happy coding, too)! 😁
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