Skip to content
Submitted 11 months ago

Challenge 1 - QR Site

Jay-ann Alorro•10
@jayann284
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

Starting this project was quite simple for I already have a simple knowledge in html. The challenging part is figuring out CSS and how to utilize it properly when designing the overall layout of the site. As a complete beginner, it was challenging for me to navigate and use the functions CSS and HTML has. Nonetheless, I had fun and learned new things about front-end development.

Community feedback

  • Darkstar•1,100
    @DarkstarXDDPosted 11 months ago

    Some HTML tips:

    • You need to have a <main> element in your webpage. It’s a landmark element.

    • In this project you can change your qr-code from a <div> to a <main> and remove the qr-code-container div. It’s not needed.

    • You need to have a h1 in your webpage. Source

    • In this project “Improve your front-end…” is a heading. You can use the h1 for it. “Scan the QR code…” is a <p> all right.

    • You don’t have to create a <div> for each <p>. <div> can be used to group some elements together. No need to create a <div> for each element.

    The HTML structure would look something like this:

    <body>
    <main class="qr-code-container">
      <img />

      <div class="text-content">
        <h1></h1>
        <p></p>
      </div>

    </main>
  </body>

    Regarding your centering issue:

    • Don’t set a fixed width for the body. body it self is a block element so it will have all the available width. So remove the width: 1440px you have set on the body.

    • Set the min-height: 100vh on the body. This makes sure the complete height of the screen is available for the body. vh stands for viewport height. Meaning, take 100% of the viewport height.

    • Now the body has the complete width and height of the screen available for it. And since you have used flexbox, all the content on your webpage should be centered on the screen. (Make sure you remove the position: relative and top: 80px in your .qr-code class.) Your body should look like below.

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

    Importing google fonts:

    • You have set font-family: Outfit in your text but you haven’t imported the fonts.
    • You need to import the font from https://fonts.google.com/specimen/Outfit
    • On that page scroll and select the needed font-weights you need for this project.
    • Then on the right side you will see a code snippet. Copy and paste it in your HTML <head> section.
    • Now you can use the font in your CSS.
    • Make sure to add a fallback font to it. Like this. font-family: "Outfit", sans-serif; So if the "outfit" font is not available a default sans serif font will be used.

    Couple other things:

    • Don’t use the width and height properties on the container.

    • They set fixed widths and heights on the container, removing the containers ability to dynamically resize.

    • Instead let the content inside the container decide the size of the container.

    • But specify a max-width property so the container won’t get too large on really big screens or if you simply want to control the final size of the container.

    Add these 3 lines to the top of your CSS file:

    * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
    • * means select all elements. So the properties specified in here will be applied to all the elements in your webpage. This is also called a CSS Reset. You can google more about it.
    • This will remove any default padding or margin applied by the browser. After doing this you can remove margin: 0 on your body.
    • box-sizing: border-box makes sure the width and height of your elements include the border and padding sizes too.

    Not sure how i explained things is clear or not. Please do ask if anything was unclear, ill explain if i know about it or someone with more experience can help.

    Marked as helpful
    0
    Jay-ann Alorro•10
    @jayann284Posted 11 months ago

    @DarkstarXDD Thanks for the advice!! Looking forward to implement it to future projects.

    1
  • Amir Hossein Peyvand•550
    @amirhossein-peyvandPosted 11 months ago

    Hey, well done. You can use flexbox to align your card at the center of your screen. And you can increase the width of your card for a better view. Happy coding :)

    Marked as helpful
    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