Design comparison
Solution retrospective
finally I have done it, I think for next time I will see deeply about measurement units and there effect on d/t screen resolution
Community feedback
- @TedJenklerPosted 3 months ago
Hi @CodeCrafter-kal,
Nice project! Here are a few suggestions for improvement:
ARIA Labels: When using div elements where semantic HTML isn’t possible, add aria-label="" to describe the content. This will improve accessibility for screen readers.
OG Meta Tags: Practice using Open Graph (OG) meta tags to enhance SEO and improve how your site appears when shared on social media.
Extra Challenge: Try creating a custom QR code as a fun exercise. You could include a secret message or a link to your socials, which is a great way to play with new skills and learn.
Hope these suggestions help!
Best, Teodor
Marked as helpful0 - @Mar1362Posted 3 months ago
hi friend this is an awesome work, i really like it, in the render as well as in the code. there is not much to say. i was not so good like that at my begenning you're a genius. here are just some adjustment to think about hope it'll help you improve:
In the HTML code you must know that the
img
tag is an "inline" element so you must always put it in a "block" element like, in this case,figure
tag which is more suitable in my opinion. Moreover, you don't really need to wrap your heading and paragraph into adiv
element you can put them directly without thediv
. If there is something to wrap, it will be card itself into anarticle
element. you can learn more about semantic HTML here. In order to see what i really mean take look at the code below:<body> <main> <article class="card"> <figure><img class="qr-code" src="./images/image-qr-code.png" alt="A QR code"></figure> <h1 class="text-heading">Improve your front-end skills by building projects</h1> <p class="text-para">Scan the QR code to visit Frontend Mentor and take your coding skills to the <span>next level</span></p> <article> </main> </body>
here you go. It is just a suggestion and always remember there is not one best way to do stuff in coding. Hope you learned something from this friend.
At your CSS, you must know that
:root{}
is the same thathtml{}
. you might think that:root{}
is just for declaring css-variable but you must know that:root{}
is just a pseudo-class that refers tohtml{}
so there is no need to use both you can use only one: read this. we use to declare css variables at the:root{}
so that it can be inherited by all the document since variable are inherited. read this quickly for a better understanding.And that's all for me friend. Great continuation genius. Happy codin (:0)
Marked as helpful0@CodeCrafter-kalPosted 3 months agoeverything what you say is correct tank you for your support !! to follow HTML5 semantic best practices, making the content more accessible, meaningful, and maintainable but i thought for :root{} and html{} Use html { font-size: 62.5%; } because it's the proper way to set the base font size across your website. b/c approach ensures consistency and easy to remember. I am also beginner Thank you for your time and support b/c you i have seen my mistake !!
0@Mar1362Posted 3 months agohello @CodeCrafter-kal, you're welcome friend we are just trying to improve together it's normal. I see what you mean but :root{} and html{} are literally the same thing. In fact, i always set the base font size inside the :root{} and it works well otherwise you can declare the variables and the font size inside the html{}. But it doesn't really matter you can use both it was just for explaining some concept for better understanding. Good continuation genius
0
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