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

• Screenshot
• Links
• Frontend Mentor - QR code component solution
  • Table of contents
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
    • Continued development
  • Author

Screenshot

Links

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Styled Components - For styles

What I learned

The css part of using semantic tags instead of normal divs gave me an awakening. I've used main, article.

Styling the footer with top and position absolute was a new part I learnt in this challenge. I honestly feel it was quite easy except for styling which took longer than I imagined.

.attribution {
    /* font-size: 11px;
    text-align: center; */
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 2rem;

}

Oh, btw another important part was

p {
  text-align: center
}

Continued development

The areas I want to focus in future development are:

1. Sass
2. Javascript
3. Typescript

Author

• Website - Rioba-Ian
• Frontend Mentor - Rioba-ian
• Twitter - @rioba_riri