QR code component using HTML & CSS

Community feedback

• 

  Dan•300

  @dtp27Posted over 2 years ago

  @abdullah-nawbahar Yup you got it!

  Lucas already addressed the first one which is the background color. Since the body element represents the container for the entire visible space on the web page, you want to make sure that any properties to be applied page-wide are under the body element, which in this case includes background-color.

  Also similar to what Lucas said, using min-height: 100vh in the body will ensure that the entirety of the page is used which will allow you to use flexbox in the body to center the entire QR component.

  One more small thing but I highly recommend you break out your CSS style in a separate style .css file. This is less of an issue on smaller projects like this but it's a good habit to get into to keep a separation layer between different components of your projects.

  Also, I like how you use the * to style all the elements with the no padding and margin. It's something I haven't considered before and will definitely use in future projects!

  Dan

  Marked as helpful

  0
• 

  Lucas 👾•104,400

  @correlucasPosted over 2 years ago

  👾 Hello Abdullah, congratulations for your solution.

  Your component is almost done, but you've to apply some changes in order to match the text elements and align it.

  1.First of all, delete the background from the component and insert the background-color inside the body.

  2.To align the card first use flexbox inside the body and use min-height in order to allow the body display 100% of viewportheight and use justify-content and align-items center for the alignment.

  3.Use the file (styleguide.md) to have the correct size for the headings, the h1 is around 24px.

  Hope it helps, happy coding!

  Marked as helpful

  0
• 

  Dan•300

  @dtp27Posted over 2 years ago

  Hi Abdullah!

  I would love to help you, but I'm not able to access your GitHub repository. Make sure the link you gave for the solution is correct (should be should https://github.com/<you_user_name_here>. Once the code is up I can take a look and offer some suggestions. Thanks!

  Dan

  0

  ---

  

  Abdullah•20

  @abdullah-nawbaharPosted over 2 years ago

  @dtp27
  Hi Dan,

  Thanks for you comment , and this is the link ( https://github.com/abdullah-nawbahar/abdullah-nawbahar.github.io.git ). I would be happy if you help me.

  0