Design comparison
Solution retrospective
Frontend Mentor - QR code component
Welcome! 👋
Decided to complete this challenge. For those wanting to know how to approach this challenge, here is what I used:
Layout was created implementing mobile first approach along with display: flex to center my card.
I created seperate QR code for my Github profile with a free tool then I added into my div container to resize the image.
Then I used SASS compiler for compiling my style components and was creating CSS files in seperate folder.
I created containers to my pictures and texts to seperate them flex-direction: column; approach.
Components I used,
- HTML
- CSS
- SCSS
This is my first project so all feedback is greatly appreciated!
Community feedback
- @Mirjax2000Posted almost 2 years ago
Hi , i checked as well, what i like is that you use sass and using new @forward and @use syntaxes. I was mad, bicouse i used @import syntax and i like that and later on i discovered that this will be no more supported. By Kevin Powell by the way. I like that man.
What i dont like, is <div> for everything. Use more semantic elements. Firstly it helps with google SEO searching engine a catalogize your sites and for blind peeple, they are using readers and here its important. try to download some chrome extension for readers and try to understand how its works.
then i dont like, that you get challenge with specific goal, and you change it. My aproach for this challenges is like in the real world of front end life. Designer give you wireframe from figma, sketch or picture and you have to be pixel perfect with everything, even color value must be precise. That is what costumer wants and there is no way that you are changing this. Be pixel perfect. I hope i helped you , even that i was little bit critical.
Marked as helpful1@AwizpPosted almost 2 years ago@Mirjax2000 Yep, I noted your point as well. Thanks for valid suggestion bro.
0 - @frank-itachiPosted almost 2 years ago
Hello there 👋. Congratulation for completing the challenge👍!
I have some suggestions about your code that might interest you.
HTML 📄:
- Wrap the page's whole main content in the
<main>tag. - If your code has different sections that have a specific purpose like a navigation, article, sections or footer, it’s a good practice to enclose those parts with HTML5 landmarks. For example, you could use a
<footer>tag to wrap the<div class=”attribution”>section. - The heading order is important in the html structure so try to always start your headings with an
<h1>tag and then you can decrease by one if you need to use more heading in your html code.
I hope you find it useful! 😄 Above all, you did a good job!
Happy
<coding />😎!Marked as helpful1@AwizpPosted almost 2 years ago@frank-itachi Thanks for these suggestions, really appreciated. It'll helpful for me on next projects.
0 - Wrap the page's whole main content in the
Please log in to post a comment
Log in with GitHub
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