QR Code Project

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hello, there! 👋

  I would strongly recommend fixing the HTML first before the CSS. So, here are the things that you can fix.

  • It is important to specify the head and the body element. Even though the browser will automatically put the head and the body element on the site, however, I am afraid that older browsers won't be able to do that.
  • After that, put the title and the link tags inside the head tag. head tag is used to wrap metadata like meta viewport tag, charset, etc. All the tags that are lived inside the head tag are not visible to the users.
  • It is important to specify the character encoding. Not all browsers default to the UTF-8. So, it's best to specify for consistency across multiple browsers. Make sure you put it below the opening tag of the head tag. It needs to be discovered by the browser as soon as possible.
  • If you want to create a responsive website, the meta viewport tag is extremely important. I recommend putting it below the meta charset.
  • Those two meta tags are important for the browsers because they tell the browsers about how they should display the page.
  • As a side note, you actually don't need to do this since the starter files have already contained the index.html that contains those meta tags.
  • Now, let's fix the element inside the body.
    • The file path for the QR code is not the same as in your local machine. When it is uploaded to GitHub, the file path is changed. So, it is best to use a relative file path. This way, no matter where the site is hosted, the image would always show up.
    • To fix the issue, change the file path into this ./resources/images/image-qr-code.png.
    • Also, don't omit the closing tag. I notice the <header> tag has no closing tag.

  Other useful tips.

  • I recommend using Visual Studio Code as your code editor. It has Emmet which is a tool to allow you to write fast HTML. I strongly recommend using and learning those tools.
  • I also recommend using Prettier to automatically format your code.
  • Learn all the basic HTML first.

  So, I won't dive into the CSS. I recommend getting the HTML right first.

  Good luck! Happy coding! 😄

  Marked as helpful

  0

  ---

  

  taylor•10

  @taylesperPosted over 2 years ago

  @vanzasetia thank you so much for the feedback!! i did this quickly and without my notes to try and do as much from memory as possible, so i appreciate you catching the things that were missed. i’ll get the html updated per your feedback.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @taylesper I would not recommend doing any coding with your own memories. I recommend using Google to find the answer, asking questions on the Slack community, etc.

  In the professional world, this is how developers work. They use online resources to help them solve the problem.

  It is not cheating. It is just how it works. It is impossible to memorize all the things because there are so many things that need to be memorized. Again, it is an impossible thing to do.

  0