Mobile First Approach with css flex box.

Community feedback

• 

  Ebere Ndukwu•180

  @eby-coderPosted about 2 years ago

  Congrats on completing this challenge. As for your question, I think one way of reducing the code and making it effective is to use the universal selector(*) instead of listing out all your html elements.

  html,
  body,
  div,
  span,
  applet,
  object,
  iframe,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  ...
  mark,
  audio,
  video {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline;
  }
  

  The universal selector selects any and all types of elements in an HTML page. It is useful when we want to select all the elements on the page. So, instead of this⬆️, you can use this⬇️

  *  {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline;
  }
  

  I hope this is helpful. Congrats once more on your solution.

  Marked as helpful

  1
• 

  Ahmed•150

  @Ahmed-Elsayed-projectsPosted about 2 years ago

  Hello Oishik Biswas I've a few suggestion for you:

  1. Instead of mentioning every selector like html, body, div and etc. you could use the wildcard * which represents every single selector e.g

  * {
           /*code goes in here*/
  }
  

  2. when styling photos try to declare either height or width and not both(unless you are making it on purpose) to keep the photo's ratio correct. I think that you can already notice the difference between your QR image and design image
  3. Try use HTML headers(h1,h2, ...) for headings instead of paragraphs so you don't have to completely style <p> to look like a header. An example in your code:

        <p id="qr-tip">
          Improve your front-end skills by building projects
        </p>
  

  Hope it helps

  Marked as helpful

  1
• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  Hi Oishik Biswas,

  Congratulation on completing this challenge. Great job on this one. I have some suggestions regarding your solution if you don’t mind:

  • You should use <main> to wrap the card and <footer> for the attribution . HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.

  • Page should contain one level heading. To tackle the accessibility issue in this challenge, you may use<h1> for id="qr-tip".

  • In my opinion, the alternate text should indicate where the Qr code navigate the user : like QR code to frontend mentor .

  • Adding rel="noopener" or rel="noreferrer" to target="_blank" links. When you link to a page on another site using target=”_blank” attribute, you can expose your site to performance and security issues.

  • Really important to keep css specificity as low/flat as possible. It’s not recommended to use the ids to target the DOM elements for styling purposes, better to use classes so that it could be more manageable and reusable.IDs have a much higher specificity than classes) IDs have many uses in a webpage aside from being a CSS selector. For example as page anchors, fragment identifiers or to link labels to form fields.

  Hopefully this feedback helps.

  Marked as helpful

  1