Responsive QR Code Component Using CSS Flex Specs

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hey Doğukan, I saw the comments here and just wanted to add my 2 cents as well. I found this little tool recently on flexbox (https://flexbox-guide.vercel.app/) that was put together by a developer who was explaining to some interns what flexbox is. I think it's a great tool for anyone really, but especially those who are learning and haven't fully grasped its concept yet. The best thing is, it even has a CSS snippet for you to copy based on the layout you want, so anyway, even if you just play around with it to learn how flexbox works and what properties there are, I think it could still be a great help.

  Here's his post if you're interested: https://dev.to/souravdey777/flexbox-guide-flexbox-layout-made-simple-with-an-interactive-tool-5g77

  Also, keep going, you're doing great 😊

  Marked as helpful

  1

  ---

  

  Doğukan•60

  @dogukan0055Posted about 2 years ago

  @elaineleung Hi there Elaine! Thanks for your comment, appreciated it! I'll try this so that I can memorize it and remember it like my name? :D And thank you for your motivation! I'll try to do my best, and with time I hope that I can help someone from this community, just like you all guys did to me :) Have a great one!

  1

  

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  @dogukan0055 Yes, I'm sure you'll get there 😊 What's great about this platform is, you can just start giving feedback and teaching others what you just learned, no need to reach a certain level. And yes, hope you'll become so good at flexbox that you might start remembering it like your name, but thankfully your name is a lot cooler than "flexbox" 😆

  Marked as helpful

  1

  

  Doğukan•60

  @dogukan0055Posted about 2 years ago

  @elaineleung Ahahaha thanks, Elaine :) Yours is also kind of a unique one, right? Trying to practice as much as I can ^^

  1
• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  Hi Doğukan,

  Congratulation on completing this challenge. Great job on this one. I have some suggestions regarding your solution if you don’t mind:

  • You should use <main> to wrap the card and <footer> for the attribution . HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.

  • Page should contain <h1>. In this challenge , as it’s supposed to be a part of a whole page, you may use<h1> visually hidden with class=”sr-only”. You can find it here

  • In my opinion, the alternate is needed on this image. It should indicate where the Qr code navigate the user : like QR code to frontend mentor .

  • Adding rel="noopener" or rel="noreferrer" to target="_blank" links. When you link to a page on another site using target=”_blank” attribute , you can expose your site to performance and security issues.

  • You have used <br> , using <br> is not only bad practice, it is problematic for people who navigate with the aid of screen reading technology. Screen readers may announce the presence of the element. This can be a confusing and frustrating experience for the person using the screen reader. You can read more in MDN.

  • It’s not recommended to use <br> to increase the gap between lines of text Or make empty space between elements, use padding / margin styling via CSS. And about using <br> in the <p> to make the paragraph break in new line, You may use max-width to <p> and remove those <br>

  Hopefully this feedback helps.

  Marked as helpful

  1

  ---

  

  Doğukan•60

  @dogukan0055Posted about 2 years ago

  @PhoenixDev22 Thanks for your suggestions m8! You're right, gotta be more careful with those tags. I thought I used the <footer> tag but seems like I didn't :D And I didn't put the h1 tag 'cause h1 looks very big to me. I know that I can style it using CSS but, don't know why I didn't do that :D Also I thought that I used alternate for the image, seems like I didn't do it :D And you're right about <br> usage. I gotta be more careful with it. I'll try to implement it to my codes. Thanks again :)

  0

  

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  @dogukan0055 You’re welcome. Happy coding!

  1
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Doğukan, congratulations for your new solution!

  Answering your question: to make the center vertical alignment first of all put min-height: 100vh to the body to make the body display 100% of the viewport height (this makes the container align to the height size thats now 100% of the screen height) size and display: flex e flex-direction: column to align the child element (the container) vertically using the body as reference.

  🐸 Use this mini game to learn FLEXBOX and all its properties by ALIGNING EVERYTHING the frog and become a FLEXBOX MASTER here's the link: https://flexboxfroggy.com/

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Doğukan•60

  @dogukan0055Posted about 2 years ago

  @correlucas Hey there Lucas! Thanks for your feedback :) Appreciate it. I've played this game before I suppose, my only problem is that, because I'm also full-time working, my practice has time gaps, and therefore can't do my best on this learning journey? :D

  Those are some good advice to write it down. Thx again ^^

  1

  

  David•8,000

  @DavidMorgadePosted about 2 years ago

  @dogukan0055 Hey man I really feel you because I was almost in the same position as you, I usually had to read some documentation and watched videos in between rest time when I was full at a full working journey, I had to manage my time if I also wanted to keep my coding progress.

  1

  

  Doğukan•60

  @dogukan0055Posted about 2 years ago

  @DavidMorgade that's right man yeah, you have to be careful with your timings, otherwise, you'll get nothing in the end. Time management is essential.

  1