Submitted 8 months ago

A QR-code with a CSS grid

Toyyib Bayo• 30

@As-sakhowy

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Pls how can I center the div in the CSS part without deflecting to any side .
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,230

@danielmrz-dev

Posted 8 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

Toyyib Bayo• 30

@As-sakhowy

Posted 8 months ago

Thanks very much @danielmrz-dev

Marcos Travaglini• 4,920

@Blackpachamame

Posted 8 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

Toyyib Bayo• 30

@As-sakhowy

Posted 8 months ago

Thanks very much. This is really helpful@Blackpachamame

Mariusz• 120

@MariusG1991

Posted 8 months ago

Hi,

To center your div just remove max-width:1440px from body, it will solve the problem.
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

Toyyib Bayo• 30

@As-sakhowy

Posted 8 months ago

Helpful thanks you @MariusG1991

Please log in to post a comment

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