QR Code Component

Community feedback

• 

  P

  Arthur•290

  @ArthurPogPosted over 2 years ago

  First off, my good man, it's great to see you tried. You came so close! Don't give up and keep up the hustle. You'll get there! I am a beginner myself, so I know how frustrating it can get sometimes. I spent a good 4 hours on my first QR code challenge before I got the results I wanted. So now that I took a look at your code here are some tips:

  Use the * selector only when absolutely necessary. Most of the time you either need to use :root or html. That's also where you should declare your main font-family, in your case Outfit, and font-size, in your case 15px, as per the style-guide.md. That is where your browser will look when you tell it different measurements like margin and padding sizes in rem (1rem, in your example, is 1 font-size set in :root or html, which in your case would be 15px, so 2rem would be 2x that, i.e. 30px, and so on).

  A good example is, when you set background-color: hsl(212, 45%, 89%) while using the * selector you basically set the background colour to everything, even your heading and paragraph elements. That forced you to manually override that later using your h4 selectors. But had you applied the background-color property to your body or html that complication would not have occured.

  Congratulations on finding the @media screen and () conditional CSS :) I came across it two weeks ago and my mind exploded :D Anyway, if you want it to work change the min to max like so - `@media screen and (max-width: 375px). But you don't need it. Because this component is so narrow that it fits everywhere and doesn't need to be resized.

  As per @Samadeen you ought to change that div with the attribution class to a footer like so - <footer class="attribution"> the reason is ARIA Landmarks. Go read about it or watch some videos. Basically, it's for people that use assistive technologies like screen text to speech readers and by using the correct HTML elements for each section, you make it possible for these people to quickly and easily navigate your website. So, instead of using <div class="attribution"> it should be <footer class="attribution">. This would also work if you added a role attribute like so - <div class="attribution" role="footer">, but from what I've been constantly told, it is recommended to use the native tags instead of roles, if possible.

  Put all of your text into either <p> or <span>. Try not to leave it naked in an element. It helps with a lot of things, like SEO and assistive technologies and also makes it easier to style. Use <span> if you want your text to be inline, or <p> if you want your text to behave like a block.

  Understanding what the difference between block and inline elements is is essential, dig into it a little, it's not complicated.

  Always style your body like this - body {margin:0;}. Not having this always put my content off center or gave me needless scrollbars until I figured it out :D

  Maybe you've misundestood how selectors work. Instead of selecting your h4 element inside your box div by writing .box h4 you can simply select it by writing h4. Also, as @Samadeen pointed out before - use headings on your pages in ascending order always starting with h1 if possible. But for components like this, you can theoretically start with h2 or something like that in case the page you are going to be putting the component into already has an h1.

  You styled your picture inline inside the html - try not to do that and rather style it in the CSS. Otherwise you are gonna get yourself confused in the future. Also, you set both width and height for that QR code image (width="200px" height="50px"). Try to do one or the other for images, not both. Just by giving it a width of let's say 200px you are basically telling the browser to always maintain the original aspect ratio of the picture, thus not deforming it. Delete your inline style in your img element, nothing will break, you already have some nice settings in .box img.

  If you want to vertically center your content, there are many ways to do it. One very simple trick would be by using display:flex. Basically, you give your body the display:flex; property like so body {display:flex;} then you set the browser to use the full height of your screen like so min-height: 100vh; then align your text horizontally and vertically like so - justify-content: center; align-items: center; and then if your footer text appears on the right of your card just change the flex direction with flex-direction: column; because flex by default usually centres everything horizontally. And don't forget the margin:0; :) So, if you want it to work on your component, do the following:

  1. Delete the * {} at the top of your CSS with all of its properties.
  2. Delete the inline style of your QR code image inside of the <img> tag from your HTML.
  3. Go to the VERY BOTTOM of your CSS and add what I said before body { display: flex; justify-content: center; align-items: center; flex-direction: column; min-height: 100vh; margin:0; }

  Alright, I think that's all :D Good luck, my friend!

  Marked as helpful

  1

  ---

  

  Olaniran Oluwatobifunmi•40

  @TobifunmiPosted over 2 years ago

  @ArthurPog Thanks for taking time out to make suggestions, I'll work on them immediately! Are you sure you're a beginner?😅

  1

  

  P

  Arthur•290

  @ArthurPogPosted over 2 years ago

  @Tobifunmi No problem at all. I find that by taking the time to explain things in written form to others really makes me remember it better myself. So I am doing this for selfish reasons as well, amongst other things XD I am most definitely a beginner, my man. I had no prior knowledge of CSS or HTML when I started nor any other programming language. This QR challenge took me almost 4.5 hours to complete. The latter projects were a bit easier but still around the 4-ish hour mark just because I go in-depth into every little thing (the very last project I did today took me about an hour, so I was like - YAAAY!). I am sure that in about a month or so I'll be fast enough to take on real paying projects. I'd like to save my clients money by being able to work efficiently so 5 hours spent on a single component is definitely beginner level stuff :D

  0

  

  Olaniran Oluwatobifunmi•40

  @TobifunmiPosted over 2 years ago

  @ArthurPog I've updated my screenshot! Thanks, so much! On to the next one!

  1

  

  P

  Arthur•290

  @ArthurPogPosted over 2 years ago

  @Tobifunmi Yeah man, that's much better :) Good luck, dude!

  0
• 

  Abdul•8,540

  @SamadeenPosted over 2 years ago

  Hey Omo Iya mi!! Cheers 🥂 on completing this challenge.. .

  Here are my suggestions..

  • You should use <main class="box"> instead of <div class="box">.
  • Go down orderly when you are using the headings h1 down to h2 down to h3 and so on.
  • You can wrapper your attribution section in a footer tag to avoid accessibility issues.
  • You can use flexbox to center your card or can set the card margin to ** 10rem auto** this will place the card at the center of the page

  This should fix most of your accessibility issues

  . Regardless you did amazing... Hope you find this helpful... Happy coding!!!

  Marked as helpful

  1

  ---

  

  Olaniran Oluwatobifunmi•40

  @TobifunmiPosted over 2 years ago

  @Samadeen Thank you so much for your help, I'll check them immediately!!

  0

  

  Olaniran Oluwatobifunmi•40

  @TobifunmiPosted over 2 years ago

  @Samadeen I've updated my screenshot! Thanks, so much! On to the next one!

  0