Skip to content
Submitted 7 months ago

Always center-align element using flex

Cynthia•50
@tina4449
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I can quickly finish the HTML part and move on to the styling part. Next time, I will create a set of variables to help me learn how to build the style library.

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

I kept trying to center the div element on the webpage because I couldn't get my element to move to the center along the y-axis. So I googled it and finally realized that I need to set the vh if I want to center stuff along the y-axis by asking ChatGPT.

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

I want to know whether my code is correct and well-organized. Are there any redundancies that can be improved?

Community feedback

  • Bryan Li•3,530
    @Zy8712Posted 7 months ago

    Hi there! Your site looks great and follows the original design very closely. Nice Work!

    Some changes I recommend:

    • you should use a <h1> tag instead of a <h3> tag as headings are meant to be used in order from h1 to h6 without skips. The headings all come with default fontsizes which can be modified using font-size (like you already have done)
    • for improved accessibility you should use a <main> tag around your page's main content
    • for your <body> you should use min-height instead of height

    Aside from that your scss and html code looks clean and is easy to follow. Great work 👍

    Marked as helpful
    0
    Cynthia•50
    @tina4449Posted 7 months ago

    Thank you so much for commenting. I have fixed my code according to your suggestion and will keep it in mind as I continue. It really helped me a lot.

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord