QR code using vanilla html and css

Community feedback

• 

  Eduardo Sampaio•20

  @eduu17Posted almost 2 years ago

  • You can use the flexbox and grid layout properties. Search "How to center elements with flexbox and grid layout".

  • Acess google fonts and select a font that you wanna added on your page. Copy the html embed code and paste it on your head tag. On css, use the font-family property to display your font on a text that you want.

  1
• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

  These comments are exactly the same as what @eduu17 mentioned, just with some examples.

  • There are two common methods for centering elements in flexbox and grid layout, currently in your solution you have used flexbox but the height should be the height of the screen and there are some styles that are unnecessary.

    Using flexbox layout:

    .container {
        display: flex;
        align-items: center;
        min-height: 100vh;
        /* height: 690px; */
        /* width: 270px; */
        justify-content: center;
        flex-direction: column;
        /* margin: auto; */
    }
    

    Using grid layout:

    .container {
        display: grid;
        min-height: 100vh;
        place-content: center;
    }
    

  • You have not imported the source correctly nor have you applied the corresponding source of the challenge correctly.

    To import the Outfit font using the link tag, you can update the following code to the head section of your HTML file: <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap" rel="stylesheet"/>

    After that, you can apply the font to your text by using CSS. For example:

    body {
      font-family: 'Outfit', sans-serif;
    }
    

  Other suggestions:

  • Use semantic elements such as <main> and <footer> to improve accessibility and organization of your page.

  • The text Improve Your Front-End Skills by Building Projects is considered a heading element (h1).

  I hope you find it useful! 😄

  Happy coding!

  0