Design comparison
Solution retrospective
My first FEM project - YAY! Any feedback is welcome! This was my first time using variables, I found it really helpful! I also need to become more aware of Accessibility and keeping things mobile responsive
Community feedback
- @correlucasPosted about 2 years ago
πΎHi Corey, congratulations on your first solution!π Welcome to the Frontend Mentor Coding Community!
Great solution and a great start! From what I saw youβre on the right track. Iβve few suggestions for you that you can consider adding to your code:
Something I've noticed in your code is that on many occasions you've added some
<div>
to wrap contents that don't really need to be inside of a div block. Note that for this challenge all you need is a single block to hold all the content, which can be<div>
or<main>
if you want to use a semantic tag to wrap the content, the cleanest structure for this challenge is made by a block of content with div/main and all the content inside of it (img, h1 and p) without need of any other div or something. See the structure below:<body> <main> <img src="./images/image-qr-code.png" alt="QR Code Frontend Mentor" > <h1>Improve your front-end skills by building projects</h1> <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p> </main> </body>
βοΈ I hope this helps you and happy coding!
Marked as helpful1@cjay44Posted about 2 years ago@correlucas Thank you! I appreciate the feedback - I will try to keep this in mind when doing my next challenge! π
1 - @faha1999Posted about 2 years ago
Hello, Corey Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:
- You might want to use semantic tags like the
<main>
to wrap your code, instead ofdiv
. like
<main> <div class="card"></div> <div class="attribution"></div> </main>
You could also make use of
<section>
and/or<article>
semantic tags. This would help improve accessibility.-
do not leaver
srcset
value empty. It's bad practice. -
- read more developer.mozilla.org
-
- use
srcset
like this
- use
<img srcset="mage-qr-code.png, mage-qr-code.png 1.5x, mage-qr-code.png 2x" src="images/image-qr-code.png" alt="qr code" />
-
- add alt="QR code" attribute in
img
. This would help improve accessibility.
- add alt="QR code" attribute in
I hope it will work. Happy coding.
Marked as helpful0@cjay44Posted about 2 years ago@faha1999 Thank you, for the tips! I will be sure to incorporate these suggestions in my next challenge! π
0 - You might want to use semantic tags like the
- @joehaddad1000Posted about 2 years ago
Hello @cjay44, Your webpage is great and well done π
You could add the <main> tag for accessibility:
<main> <div class="card"> ...... </div> </main>
And attribution in the <footer> tag:
<footer> <div class="attribution" style="bottom:0px; position:absolute"> ... </div> </footer>
And with the <img> tag, you can remove the srcset. That's it, hope you're having a great time always!
Marked as helpful0@cjay44Posted about 2 years ago@joehaddad1000 Thank you for the advice, I honestly just completely forgot about semantics.
I appreciate the comment! π
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