Clean, simple & responsive QR component (Vanilla)

Community feedback

• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted almost 3 years ago

  Hi there,

  It looks very close to the original, there are only some corrections to be made in your HTML. ^^

  1. You have no landmarks. Adding a main would do the trick. You either add it inside the body or you replace the card div with it, both should be fine solutions.

  2. There's no reason to use width: 100% on the elements you used it on. Remove them, everything will stay the same.

  3. There's only one heading on this page so that should be an <h1> instead of <h2>. If you think about this design as part of a bigger website, you could still hide a <h1> somewhere, that gets rid of the issue in the accessibility report.

  4. Your attribution could go in a footer.

  Apart from these, good job! ^^

  Marked as helpful

  1

  ---

  

  Rafal•1,395

  @grizhlieCodesPosted almost 3 years ago

  @FluffyKas Hiya, thanks for the feedback! Let me share my thoughts on it though, see what you think about it?

  I don't have landmarks because I don't really consider this to be a website. I know what you mean but to me this is just about the .card component (sort of how you'd write it in a framework essentially). Have you perhaps used a framework or perhaps tried injecting a bit a code with JS into your HTML? That's pretty much what I mean. 'That' particular piece of code.

  I need to keep the width in there as I only submitted this solution to explain some stuff in a video (and I mentioned in it that you don't need to use the width in it hehe 😆 ).

  h2 is used because, again, to me this is a component, not a website. So realistically this would be a h2/h3 or even a span in a real component since the website/page would already have a H1 in a hero (probably) 😅.

  I think you have higher/stricter HTML standards than me when it comes to these component challenges! 😁👍

  0

  

  P

  Fluffy Kas•7,715

  @FluffyKasPosted almost 3 years ago

  @grizhlieCodes Nah, none of the things are mentioned would be strictly necessary, since as you said it's just a component. I guess I'm just so bothered by the accessibility report, I always try to get rid of them :D

  Marked as helpful

  1

  

  Rafal•1,395

  @grizhlieCodesPosted almost 3 years ago

  @FluffyKas Well Kas, I love when people are bothered, means they care haha. Thanks for keeping me on my toes :), I appreciate you.

  0
• 

  Duyen Nguyen•950

  @Duyen-codesPosted almost 3 years ago

  Great solution! I'm thinking of doing this challenge using React. I'm starting to learn React so I would like to start small. How have you been?

  Marked as helpful

  0

  ---

  

  Rafal•1,395

  @grizhlieCodesPosted almost 3 years ago

  @Duyen-codes I HATE JANUARY. It's so busy with finance-related-work. But it always calms down in Feb 😌.

  I fixed my sleeping pattern! I wake up around 04:00-05:00. Haven't had this for over 10 years, feels amazing.

  Learn React!! I personally learned Svelte and may have to pick up React for work. If you want the BEST resource for learning it I'd recommend this source. I went through a few of their courses and they are 11/10 imo.

  Make sure to buy it when it's on sale. Roughly £15/$20. It'll be worth every single penny. They are very thorough though so it's a large course (as if that was a bad thing).

  How have you been :)

  0

  

  Duyen Nguyen•950

  @Duyen-codesPosted almost 3 years ago

  @grizhlieCodes Hey! I'm glad to hear about your life updates. I bought that course you recommended and followed for a while back then until I realized that I needed to understand JS better so I stopped. Now I'm also following that React course. I got into a full-stack program which lasts for 17 months. It started last week. I feel much better to have other peers. We all are adults and come from many different backgrounds. I have school Mon-Fri 9.30-15. I study on my own after school sometimes and weekends by building small projects and learning from Udemy courses also. Are you still doing web dev as a freelancer?

  Marked as helpful

  0

  

  Rafal•1,395

  @grizhlieCodesPosted almost 3 years ago

  @Duyen-codes That's amazing! It must be nice to have other peers tbh. I'm somewhat of a lonewolf lol. I like the 'different backgrounds' bit, that must make it more interesting.

  It's good you realised you needed to polish up on JS tbh, most people sort of skip many steps whilst gunning for frameworks without really understanding the core technology (which is massive in and of itself).

  :) finished designing and started building my client's website. It's going great tbh. It feels like I can finally use the stuff I learned over the last 10 years whilst doing something useful + something I want to do. Told my boss I'll leave this year to switch careers too, just want to prep the team, handle handover carefully etc.

  0

  

  Duyen Nguyen•950

  @Duyen-codesPosted almost 3 years ago

  @grizhlieCodes Thank you! It's nice to have other peers. Tbh I really admire lonewolf like you. I am not that mentally strong I think. Your journey has been really long with the full time job and still you have been doing great and finally get to completely switch to what you really wanna do. I'm really happy for you. Great to hear that your client project is going well too. Take care and best of luck!

  1

  

  Rafal•1,395

  @grizhlieCodesPosted almost 3 years ago

  @Duyen-codes Thanks, you too :)

  0