Frontend Mentor | qr project solution using html and css coding challenge solution

Community feedback

IryDev• 1,580

@IryDev

Posted about 1 year ago

Hey @prathna11, well done for completing this challenge

I have some advice in order to improve your solution :

You didn't use semantic HTML that can improve accessibility on your website
wrap the whole main content of your page in the main tag
Your page should have at least one h1 tag
I suggest replacing the <div class="head"> tag with the h1

HTML :

<body>
<main>
<div class="panel">
<h1>Improve your front-end skills by building projects</h2>
</div>
</main>
</body>

I hope you'll find this helpful😄

Manuel Matus• 70

@ManudeQuevedo

Posted about 1 year ago

Hi Prathna,

First of all, congrats on finishing the project!

Here is my feedback to you, I do agree with IryDev in the following:

Try to use Semantic HTML, this is mainly used for two reasons, accessibility, and readability, in my opinion using a <div> should be the last thing you should consider using, there are other tags with more meaning such as <main> <section> <article>, and so many more, please check this article to get familiarized with Semantics in HTML.
Divs are ok to define your content inside the container, but never ok to use them as the container itself, For example:

**This is not right**
<div class="container">
     <div class="left-content">
         <h1>Hello World</h1>
     </div>
     <div class="right-content">
         <p> Some example text here>
     </div>
</div>

**This is correct**
<main class="container">
    <div class="left-content">
        <h1>Hello World!</h1>
    </div>
    <div class="left-content">
         <p>Some example text here</p>
     </div>
</main>

Avoid using divs for heading text, this text should've been an H1 instead: Improve your front-end skills by building projects.
I'm not sure why your image looks pixelated, don't give hardcoded dimensions e.g. you added a width and height of 330px, a better approach is putting your image on its own container and putting a width of 100% of that parent container, it would make your image become responsive regardless of the viewport size (screen size).

I leave you these resources for you to improve your coding skills even more:

A good course to deeply understand HTML and CSS:

Understanding HTML and CSS.

Hoping this helps you improve

qr project solution using html and css

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community