All comments

• 

  LouisVerch•60

  @LouisVerchSubmitted 3 days ago

  What specific areas of your project would you like help with?

  I would like to center the card horizontally couldn't find the way to do it

  

  Solution QR Code Frontend Mentor

  2

  20
  

  hbeamaniii•10

  @hbeamaniiiPosted 2 days ago

  On your .box element you can add "margin: auto" for the css and that should center the design horizontally. This should work if youre not using flexbox which you are.

  This is what I can find for centering an element using flexbox. Hope this helps!

  https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Center_an_element

  0
• 

  Ebiesuwa Sarah•30

  @she-is-sarahSubmitted 8 days ago

  What are you most proud of, and what would you do differently next time?

  I'm proud of my clean approach to centering the QR component using absolute positioning and transform, which creates a perfectly centered card that works across different screen sizes. I also paid careful attention to spacing details, like the different padding for the image (8px with 0px bottom padding) and text (10px margin with 15px bottom padding) to match the design closely.

  For my next project, I would approach it differently by:

  1. Exploring CSS Grid or Flexbox for centering instead of absolute positioning, as these are more modern and flexible approaches
  2. Adding hover states or subtle animations to make the component more interactive

  What challenges did you encounter, and how did you overcome them?

  My main challenge was deploying the project to GitHub Pages. Despite having my code ready, I wasn't familiar with the deployment process and encountered difficulties getting my site live. I overcame this by:

  1. Reaching out for help - a software engineer guided me through the process, which taught me the importance of not being afraid to ask for assistance when learning new technical concepts
  2. Learning about the importance of repository settings and the correct file structure for GitHub Pages
  3. Understanding that the repository name and deployment branch settings are crucial for successful deployment

  This experience taught me valuable lessons about web deployment and the importance of community support in development. It also helped me become more comfortable with using GitHub for project hosting.

  What specific areas of your project would you like help with?

  I would appreciate feedback on:

  1. Performance - While my absolute positioning works for centering the component, I'd love to know if using CSS Grid or Flexbox would be a more modern/efficient approach
  2. Accessibility - Are there ways I could make this component more accessible to screen readers and keyboard navigation?
  3. Best Practices - I used direct color values (hsl) in my CSS; should I be using CSS custom properties instead?
  4. Responsive Design - Though the component works on different screens, I'd like to know if my use of em units is the best approach for scalability

  Additionally, I'm open to learning about any industry-standard practices I might have missed, as I'm eager to write more maintainable and professional code.

  

  QR-code-component

  1

  20
  

  hbeamaniii•10

  @hbeamaniiiPosted 3 days ago

  I like the usage of the github readme, very descriptive of the process you used to complete the challenge. Also even though its a small project the css should be separated from the html.

  0