Design comparison
Solution retrospective
Actually, I'm thrilled to be able to re-design such a template and it makes me believe that I am on the right path and with patience and more practice, I can gain more and more and more and more experience!!!!!!
What challenges did you encounter, and how did you overcome them?I had some challenges with the overflows. I mean when I wanted to see the template in smaller sizes, I had this "scroll" problem that I fortunately could manage to solve and to see the template in all available sizes.
What specific areas of your project would you like help with?The project was easy and what I've just re-designed is complete and without any technical issues. So I guess there would not be an appropriate answer for this question now.
Community feedback
- @0xabdulkhaliqPosted 7 months ago
Hello there π. Congratulations on successfully completing the challenge! π
- I have a suggestion regarding your code that I believe will be of great interest to you.
QR iMAGE ALT TEXT πΈ:
- The QR Code Component involves scanning the QR code, the image is not a decoration, so it must have an
alt
attribute which should explain the purpose of theimage
.
- The
alt
withQR Code
is not even explaining for what the QR image need to be used.
- So update the
alt
with meaningful text which explains likeQR code to frontendmentor.io
- Example:
<img src="/images/image-qr-code.png" alt="QR code to frontendmentor.io" class="qr__img">
.
I hope you find this helpful π Above all, the solution you submitted is great !
Happy coding!
1@AminXatiaPosted 7 months agoTnx for your kind words and the point you made bro π€ @0xabdulkhalid
0 - @danielmrz-devPosted 7 months ago
Hello @AminXatia!
Your solution looks great!
I have a suggestion for improvement:
π Think about using
<main>
to wrap your main content instead of<div>
.Imagine
<div>
and<span>
in HTML as basic containers. They're good for holding stuff, but they don't tell us much about what's inside or its purpose on the webpage.This change might not have impact on how your page looks, but it'll make your HTML code clearer and help with SEO and accessibility.
Hope that's helpful!
Keep up the great work!
0@AminXatiaPosted 7 months agoHey, Daniel π. Thank you for leaving this comment and giving your advice. I try to keep them in mind@danielmrz-dev
0 - @jguleserianPosted 7 months ago
Greetings, Amin,
Congradulations on your solution to the QR Code challenge! Very well done! I was impressed with the similitud to the prototype.
Other comments:
- Your HTML and CSS is easy to read and follow. It looks like you used BEM for organizing your CSS. While this is not my personal favorite, it is a system widely used by a lot of teams and instructors - so cudos to you for implementing it so early in your submissions. I do agree with Bernardo (above) however, that you could use more semantic HTML.
- Your solution technically correct and also uses at least one accessibility practices. One practice you might want to add is a
<meta>
tag in the head that contains description of the page, something like this: `<meta name="description" content="[description of page]">. I recommend this because it is also a good practice for search engine optimization (SEO). There are a lot of other practices that I'm sure you will want to investigate later if you have not already done so. - I noticed that you did not have any @media statements for the smaller screen size. If I remember correctly, there did exist some minor adjustments for the smaller screen size (like width/height), thought it's so forgiveable in this case since the directions do not specify anything and the changes are so subtle.
- I would like to encourage you to complete the README.md file and keep it with the code. This will help future reviewers understand your intention and workflows. It also may help them provide you with better feedback. If you need help writing markdown (though you can probably guess it from just using the template), I recommend the Markdown Guide. They have a nifty cheat sheet that covers all the basics and more.
Anyway, Amin, I want to tell you again that I liked your solution and think you did an outstanding job. I hope you find something in my comments helpful. I also wish you all the best as you continue your professional development.
Happy coding!
Jeff Guleserian
0@AminXatiaPosted 7 months agoI try to pay more attention to what you said and try to apply them in future projects and files. Thank you for helping me with your useful tips sir πΉ@jguleserian
0 - @R3ygoskiPosted 7 months ago
Hello @AminXatia, I would like to congratulate you on completing your first challenge from Frontend Mentor, and you started off very well because the solution looks identical to the proposed design, congratulations.
I would like to give you some tips about your HTML, it is well structured, but it is not semantic, and being semantic is extremely important for the accessibility of a page. I will show you a section that you could make semantic.
<div class="container">
instead of using a<div>
here, you could use a<main>
because this is where the main content is.
Another suggestion regarding HTML, I noticed that you used something similar to BEM, right? About this, I noticed that there are many
wrappers
in your HTML, a suggestion would be to change them to other names. And we usually usewrapper
for just one element.For example:
div class="wrapper">
it would make more sense if it were acontainer
instead ofwrapper
.And again, congratulations on your project, it is very well done, keep practicing and improving, you are doing great. If anything I said is confusing, please comment below and I will try to help as best as possible.
0@AminXatiaPosted 7 months agoThank you for leaving this great comment. I found it really useful and I try to keep them in mind from now on. Tnx π€@R3ygoski
0@R3ygoskiPosted 7 months agoHi @AminXatia, no problem, always happy in help others devs, if you found my comment valuable and it helped you, I kindly ask that you please mark it as helpful, as it helps me a lot. Thank you in advance!
Marked as helpful0
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