Skip to content
Submitted 11 months ago

Qr Code Component with HTML and CSS

Bn-Bushra•290
@Bn-Bushra
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

Frontend Mentor - QR code component solution

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.

Table of contents

Overview

Screenshot

Links

My process

Built with

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

What I learned

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;
}

Continued development

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.

Useful resources

Author

Acknowledgments

Alhamdulillah. Wa jazakumullahu khayran Jazah.

Community feedback

  • Daniel 🛸•44,310
    @danielmrz-devPosted 11 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
    1
  • Julio Peña•50
    @JulioCode13Posted 11 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
    1

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