QR Component using Css Flex and basic Properties

Community feedback

• 

  Gaurav Singh•440

  @Gaurav4604

  Posted almost 2 years ago

  Hi! Congratulations on completing the challenge, it looks great 🥳

  I took a look at your index.css and styles.css files, I see you've used margin: auto to try and center your content, this is good, but css provides you with better tools such as flexbox and grid for more layout customizations.

  here are some reference links on how to use them:

  CSS Flexbox

  CSS Grid

  Also, if you take a look at the design preview, you will see that the challenge expects you to have you text-align: center, on your text content, applying the same, will let your webpage be a more accurate representation of the design provided.

  Hope this was helpful 😊

  31

  Marked as helpful
• 

  

  Grace•32,130

  @grace-snow

  Posted almost 2 years ago

  Hi, I've had a look through the code and hope this is helpful

  1. always use one main landmark on every page with whatever you build. In this case the container div you have can be the main
  2. The image should ideally have a more detailed alt description. Like "QR code to FrontEndMentor.io"
  3. You don't need a text div in this. Keep it if you want if its helping in some way. In general it's good to try and keep html as simple as you can
  4. it's better for performance to link fonts in the head of the html not @import in CSS
  5. Get into the habit now of always including a modern css reset at the start of the styles in every project. Andy Bell has a good one you can look up and use. It won't make must difference in this specific project but will be super important later so is still worth getting into that habit ASAP.
  6. Font size and other font properties must never be in pixels. This is extremely important. If you use pixels the site becomes inaccessible
  7. make sure you either add a little padding on a wrapping element or a little margin on the component itself so it can never touch the screen edges
  8. the design has centre aligned text so make sure you match that in your solution. It can be set higher up in the DOM, no need to set it on the heading and paragraph individually

  Well done on this! Although it may look like I've left a lot of points, these are all common foundational issues that are good to iron out now (and actually there are less than usual - you are doing well!).

  Good luck refactoring this and on your next challenge

  12

  Marked as helpful