Skip to content
Submitted 10 months ago

Html and Css

Mevindu-Devā€¢10
@Mevindu-Dev
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

Whats a easier way to get positioning of elements rather than messing around with px?

Community feedback

  • Md Abid Hussainā€¢400
    @md-abid-hussainPosted 10 months ago

    There are many ways to position an element. If you want tp add space between the content you can use padding or margin. Both have different use cases.

    I think you are asking for the way to center the content on screen.

    Easier way is to use either flex box or grid as display property.

    Resource 1 - docs

    Resource 2 - videos

    These resources helped me in learning css. I hove this can help you as well.

    Marked as helpful
    2
  • Marcos Travagliniā€¢4,840
    @BlackpachamamePosted 10 months ago

    šŸ“Œ Some accessibility and semantics recommendations for your HTML

    • To improve the semantics of your HTML, you can change your <div> to a <main class="container">
    • I can only mention an accessibility issue, you can add a short description to your image with the alt attribute. In case it is just a decorative image, such as an icon or logo, you can leave it empty: alt="". More info
    • You placed the favicon image in the head, however, it is not found in your repository. The same thing happens with the font-family

    šŸ“Œ Some suggestions

    • I recommend doing a small reset to the styles that come by default in the browsers. To do this, you can apply a couple of properties to the universal selector *, with this you will make your site look the same in all browsers
    • I leave you the task of researching the reset CSS and the box-sizing: border-box
    • If you didn't apply the reset, you can add margin: 0 to your body, this will remove annoying scrolling on large screens. If you want to maintain separation on very small screens, you can apply the margin again using media querys
    • Instead of using margin to center your content in the center of the screen, you can use the flexbox properties in the body:
    body {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
}

    Here I leave my solution for you to take a look at

    Marked as helpful
    1
    Mevindu-Devā€¢10
    @Mevindu-DevPosted 10 months ago

    @Blackpachamame box-sizing: border-box makes the border box take the width property set in the css so the heights and widths are more straight forward so padding and border can't affect the box size. The CSS reset can make it so that every component has this box-sizing : border-box property and set every property to 0. This is what i have learnt so far. If there are any mistakes in what i have said please let me know, Marcos Travaglini thanks for the detailed feedback and Md Abid Hussain thanks for the video link to web.dev .

    1
    Mevindu-Devā€¢10
    @Mevindu-DevPosted 10 months ago

    @Mevindu-Dev I'll be implementing them shortly in this project.

    1
  • Daniel šŸ›øā€¢44,250
    @danielmrz-devPosted 10 months ago

    Hello @Mevindu-Dev!

    Your solution looks great!

    I have a couple of suggestions for improvement:

    • First: For semantic reasons, use <main> to wrap the main content instead of a <div>.

    šŸ“Œ This tag change does not impact your project visually and makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.

    • Second: Import the font directly from Google fonts instead of using @font-face. It's a lot easier. Just paste this inside the <head>:
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

    I hope it helps!

    Other than that, great job!

    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