Skip to content
OverviewSolutions
3
Comments
1
Julio Peña
@JulioCode13

All comments

  • Bn-Bushra•290
    @Bn-BushraSubmitted 11 months ago

    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.

    Qr Code Component with HTML and CSS

    2
    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