Skip to content
Submitted 10 months ago

A QR-code with a CSS grid

Toyyib Bayoā€¢30
@As-sakhowy
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

  1. Pls how can I center the div in the CSS part without deflecting to any side .
  2. can someone please explain to me how to link a font from the html file and add it to the CSS . These two things are the things I found most difficult to me in this project

Community feedback

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

    Hello @As-sakhowy!

    Your solution looks great!

    I have a suggestion for improvement:

    • Use <main> to wrap the main content instead of <div>.

    Tags like <div> and <span> are typical examples of non-semantic HTML elements. They serve only as content holders but give no indication as to what type of content they contain or what role that content plays on the page.

    šŸ“Œ 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.

    I hope it helps!

    Other than that, great job!

    Marked as helpful
    0
    Toyyib Bayoā€¢30
    @As-sakhowyPosted 10 months ago

    Thanks very much @danielmrz-dev

    0
  • Marcos Travagliniā€¢4,840
    @BlackpachamamePosted 10 months ago

    Okay, but there are a few things to check.

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

    • To improve the semantics of your HTML, you can change your <div class="container"> to a <main class="container">
    • Here you can learn more about the font-family from CSS
    • When you define CSS properties and then use media queries, you do not need to define the same properties again if they have exactly the same values as initially
    • The Challenge by Frontend Mentor Coded by BrainiacTech text should be in the footer and outside your main
    • When we define a container with grid it is not necessary to add width or height, you do this with grid-template-row and grid-template-column
    Marked as helpful
    0
    Toyyib Bayoā€¢30
    @As-sakhowyPosted 10 months ago

    Thanks very much. This is really helpful@Blackpachamame

    1
  • Mariuszā€¢120
    @MariusG1991Posted 10 months ago

    Hi,

    1. To center your div just remove max-width:1440px from body, it will solve the problem.
    2. So u use google fonts, select your fonts, in the right side you will see a link with your font name so "To embed a font, copy the code into the <head> of your html" and then in css just add font-family property with your font name, for example: body{ font-family: 'Outfit', sans-serif; }
    Marked as helpful
    0
    Toyyib Bayoā€¢30
    @As-sakhowyPosted 10 months ago

    Helpful thanks you @MariusG1991

    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