Submitted 8 months ago

Qr Code Component with HTML and CSS

Bn-Bushra• 290

@Bn-Bushra

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

This is a solution to the QR code component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Solution URL: github.com/Bn-Bushra/Coding-with-Frontend-Mentor
Live Site URL: lucent-praline-4eaebd.netlify.app

Semantic HTML5 markup.
CSS custom properties
Flexbox
Desktop-first workflow

I learnt the importance of design for a web developer. Design serve as a visual aid and makes the destination achievable.

I also learnt that structuring with HTML is key. See how I utilised semantism here.

<div class="background">
  <div class="container">
    <div class="image">
      <img src="./images/image-qr-code.png" alt="qr-code" />
    </div>
    <div class="image-text">
      <div class="heading"></div>
      <div class="paragraph"></div>
    </div>
  </div>
</div>

I used css flexbox to center the qr code container.

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

I'll like to master CSS flex box and grid very well to be able to use efficiently and understand the working priciples of CSS.

Website - My website
Frontend Mentor - @Bn-Bushra
Twitter - @byteburaq

Alhamdulillah. Wa jazakumullahu khayran Jazah.

Community feedback

Daniel 🛸• 44,230

@danielmrz-dev

Posted 8 months ago

Hello @Bn-Bushra!

Your solution looks great!

I have a couple of suggestions for improvement:

In order to make your HTML code more semantic, and since that is the main title of the screen, replace the <p> with <h1>. Unlike what most people think, it's not just about the size and weight of the text.

The <h1> to <h6> tags are used to define HTML headings. <h1> defines the most important heading. <h6> defines the least important heading. Only use one <h1> per page - this should represent the main heading/subject for the whole page. Also, do not skip heading levels - start with <h1>, then use <h2>, and so on.

Also, still about semantic HTML, use only one container, and since the main content goes inside of it, use main.container.

All these tag changes may have little or no visual impact but they make your HTML code more semantic and improve SEO optimization as well as the accessibility of your project.

I hope it helps!

Other than that, great job!

Marked as helpful

Julio Peña• 50

@JulioCode13

Posted 8 months ago

Excelente, Recuerda asegurarte de borrar el pie de pagina en cada desafío✌️.

Recuerda que la metodologia flexbox es super buena has uso de los contenedores padre e hijo para lograr una mejor fijación con los elementos del contenido.

Marked as helpful

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