Replicate QR code responsive web page for both desktop and mobile.

Community feedback

• 

  raionus•310

  @sinjin25Posted about 2 years ago

  Q. Should I have used Id's instead of classes??

  No I think classes are best in this case. Ids should only be used once per page, so they reduce the reusability of anything you make.

  I mostly just use them to target things easily in javascript. They can be used for styling but I think using BEM naming is more flexible.

  Q. Should I have used a section tag in my html file instead of main??

  I think main is fine. <section> is part of semantic html. Sections should usually have a h1/h2/h3 inside of it or I believe it's considered an accessibility error. Since you don't have headers, it would be inappropriate I believe.

  Q. How do you link fonts directly into the Css file using import??

  If you're using google fonts (which is best for these challenges), you can copy and paste their code directly into your css file. The @import should be by itself. The font-family should be inside a rule (probably body). I attached a screenshot of where it is on google

  https://gyazo.com/e2334adb17e22469a81d058149245a06

  Q. Any other general tips would be much appreciated.

  I like using this rule for this website:

  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  

  I add this right before I submit. It should center whatever you put it on (the container, card, etc.). This helps line up your work for the design comparison.

  I would 100% avoid putting styling directly on elements (ex: your main main img etc.). There aren't any issues here, directly styled tags are a nightmare. Any styling you do in the future has to specifically override the default tag styling you've added.

  I'd also recommend using a reset.css file (you can find some on google). This helps reduce the variability between how your work looks on different browsers by removing most/all the styling from all tags.

  Marked as helpful

  0

  ---

  

  Teemu Viikeri•50

  @paatrePosted about 2 years ago

  @sinjin25 I've thought about using a reset file also but because there are so many I've just defaulted to using *, *::after, *::before { margin: 0; box-sizing: border-box; }

  Do you happen to know if there is a reset file which is kinda industry standard?

  Marked as helpful

  0

  

  Leke Adeloye•60

  @LekeadeloyePosted about 2 years ago

  @sinjin25 Thanks so much, your feedback very helpful

  0

  

  Leke Adeloye•60

  @LekeadeloyePosted about 2 years ago

  @paatre Dont you need to put 0 on padding too for the reset or is it just margin??

  0

  

  Teemu Viikeri•50

  @paatrePosted about 2 years ago

  @Beezy100 Well, it depends. If we, for example, take a look CSS defaults for Blink (Chrome's rendering engine), we can see that default paddings are only added to list elements (ul, menu, dir, ol) and form elements (legend, fieldset, input textarea). Usually I don't mind having default paddings for those elements -- if I do, I do add padding reset to the mix.

  Whereas default margins are also added to body, p, blockquote, figure, hr and all headings, which I do mind and I want them gone.

  Here's the link to Blink's source code: https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css

  0

  

  Leke Adeloye•60

  @LekeadeloyePosted about 2 years ago

  @paatre thanks for the link. Which do you prefer? This one or meyers reset?

  0
• 

  Leke Adeloye•60

  @LekeadeloyePosted about 2 years ago

  How annoying!!!. Why is it not centered??? It doesn't look like that on my Github pages.

  0
• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  Hello Leke, congratulations for your solution!

  Answering your question:

  Try to use only classes for styling elements and id only for forms and Javascript. Using ID to style elements isn't a best practice at all.

  Since the card is the main thing in this page you can use main, but if was the case or a more complex page you have used article or section.

  Hope it helps, happy coding!

  0

  ---

  

  Leke Adeloye•60

  @LekeadeloyePosted about 2 years ago

  @correlucas Thank you for your feedback. Much apprecited.

  I'm having trouble centering the card vertically, based off my code do you have any suggestions on what I've done wrong??

  0