Responsive QR Code

Community feedback

• 

  6xg0d•190

  @6xg0dPosted 8 months ago

  Hey! That's a great start. Glad you decided to start learning Web Development Adeniyi! I'm not an expert, but after review your code i'd like to give you a couple tips that help me to code and to keep in mind:

  1. Write CSS in a separate file: It's quiet common to write a few CSS styles in the HTML element while learning our first steps in HTML, but it's highly recommended to start writing your CSS rules in a separate stylesheet instead of the HTML document itself. More organize and easy to read especially in projects with a significative amount of lines of code.

  2. Get used to write semantic code: It's important to give our content a semantic meaning, not just for good practices, but for accesibility too. Try to deconstructure your projects in smaller pieces, and start to section every part you think necessary to build you solution. In this case, think about the card: It has a header? A footer? What it's the semantic structure of this card? There's no one "correct" way to define a semantic structure, but a good semantic structure has to make senses to every developer who review your code!

  3. Talking about fear: Everybody had the same feeling at the beginning, and it's ok! Trying to learn something new can be hard, stressful, but at the same time rewarding and joyful! Just keep in mind that you're not going to know everything, but you need to be willing to learn as much as you can about this world :)

  Here are some sources that i'm currently using to learn and hope it helps you too:

  • https://www.w3schools.com/
  • https://web.dev/
  • https://developer.mozilla.org/en-US/docs/Learn/Accessibility

  0
• 

  Kim•440

  @01057057kimPosted 8 months ago

  I noticed that your card is not in the middle of the page. Here's a very efficient way to center the card:

  Apply this to the body (in order to work properly, don't use position or margins):

  body {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  

  I hope it helps!

  0