Responsiveness with Bootstrap, Sematic HTML5, Styling with CSS

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hi Silver Idahosa,

  Congratulation on finishing your first frontend mentor challenge. Your solution looks great. I have some suggestions regarding your solution if you don’t mind:

  • The <footer> should live outside the <main>.

  • Page should contain <h1>. In this challenge , as it’s supposed to be a part of a whole page, you can have <h1> visually hidden with sr-only.

  • Images must have alt attribute. In my opinion, the alternate text should indicate where the Qr code navigate the user : like QR code to frontend mentor. (not describes the image).

  • 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.

  • There are some unnecessary have to be removed.

  Again great job on this one.Hopefully this feedback helps. Happy coding!

  Marked as helpful

  0

  ---

  

  Silver Idahosa•170

  @SilverBeingPosted over 2 years ago

  @PhoenixDev22 Thank you so much for taking out time to help improve my solution. This was really helpful.

  1

  

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  @SilverBeing Glad to help. Happy coding!

  0
• 

  David•8,000

  @DavidMorgadePosted over 2 years ago

  Hello Silver, congrats on completing the solution for this challenge, you did a pretty good job!

  I would like to give you a little suggestion.

  If you want your component to stay on the middle of the screen, you can use flex on the parent element ( the body) and align the component in the center, you can try using something like this in your code:

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

  With this code your body will center your component in the middle of the screen with flexbox, if you want to keep your background on the main same as the body, just add the background color to your main tag too!

  Hope my feedback helps you, welcome to the community and I hope you have fun here, keep coding!

  Marked as helpful

  0

  ---

  

  Silver Idahosa•170

  @SilverBeingPosted over 2 years ago

  @DavidMorgade thank you so much for this, I did struggle with centering the component. I would try out your suggestions and give feedback.

  1