noobie-made QR code challenge

Community feedback

• 

  Giang Nhật Khánh (Kayden)•150

  @KaydenGiang2512Posted over 2 years ago

  Design-wise, this is a solid project for a beginner with everything looking nice and centered. However, the link to your GitHub repository isn't working Alexandra, please double-check in case it might be incorrect!

  For the code, I noticed 2 huge selector chunks you made on the css (the ones with lots of tags): html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

  /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

  which were quite confusing to me as to what you're trying to achieve because CSS can specifically target elements in your html by selecting them individually, instead of gathering them all at once. This is important for readability as well as maintaining your code going forward.

  1

  ---

  

  Alexandra Schmidt•10

  @kennysykePosted over 2 years ago

  @KaydenGiang2512 thank you for your feedback. I was told by the teacher that we need to include CSS reset part at the beginning of our CSS file.

  0

  

  Roberto Yukio Miyamoto Arita•320

  @RyukioMiyamotoPosted over 2 years ago

  @kennysyke an alternative to this would be to use the selector *, which stands for all elements W3Schools for reference. I use it myself, by setting a basic reset as

  *::before, *, *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
  }
  

  As for the result, looks really good overall, congratulations on your first challenge!

  1
• 

  Abdul•8,540

  @SamadeenPosted over 2 years ago

  Hey!! Cheers 🥂 on completing this challenge.. .

  Here are my suggestions..

  • You should use <main class="panel"> instead of <div class="panel">.

  This should fix most of your accessibility issues

  . Regardless you did amazing... hope you find this useful... Happy coding!!!

  0