QR Component | Mobile First solution with CSS Flexbox

Community feedback

• 

  Lukáš Říha•225

  @lukasrihaPosted about 1 year ago

  Hi Mayank,

  I just saw you liking a comment of mine on another project so i decided to check out one of your projects.

  1. I'm not an expert on a11y (accesibility), but using semantic html is always a good start. From my experience, accessibility starts getting complicated once controls are involved. You know, buttons with handlers, opening / closing menus etc. If you want a quick check you can use google lighthouse - that's built in with google chrome, it will generate a report for you and let you know where your problems are. In your case, the only it detected was that the background is too similar to the font colour - that's not your fault though, you implmeneted the design. :) if you want to be super sure, just download a plugin/extension for chrome :)

  2. Your website looks good on mobile and desktop - so it's responsive enough i'd say. In my opinion, a responsive website is a combination of fluid and adaptive. Look up those terms and see if you can make sense of that. Just my opinion though ;) I'm my opinion, a good practice is to make use of width and max-width. If you look at something like bootstrap, container widths are set to 100%, but they do have a max width set. You don't want containers with 100% on an ultra wide monitor

  3. Don't have pro either. ;)

  4. Didn't check sorry :)

  5. Refactoring wise - The code base is small, so your code works well. Look into something called BEM - it's a way of writing html and css.

  Otherwise two remarks:

  1. Import your fonts in your html in the head elements. It is better for performance because of caching and parallel downloads.
  2. When you have <a> tags to external links, make sure to add noopener, noreferrer. It's a security best practice.

  Overall, great job and happy hacking :)

  Marked as helpful

  1

  ---

  

  Mayank Arora•470

  @mayankdrvrPosted about 1 year ago

  @onenKokos Thank you Lukas for the code review. I was hoping some generous community member would spend some time to evaluate my work and help me improve it. You and people like you make beginners like me feel welcome and inspired with your guidance. I will surely refactor the source code as per your suggestions.

  UPDATE: I have implemented the following code refactoring suggestions in my source code as per the feedback that i have received-

  1. Block Element Modifier(BEM) methodology in CSS.
  2. Noopener & noreferrer security best practice in <a> tags.
  3. Imported fonts in HTML file instead of CSS.
  4. Used width and max-width in container CSS to make it more responsive.
  5. Generated google lighthouse report and all parameters were satisfactory.

  1