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
• What I learned
  • Continued development
• Author

Overview

This is the first challenge in the Frontend Mentor Learning Path. The challenge was completed using HTML and CSS alone.

Screenshot

Links

• Live Site URL: My First Frontend Mentor Challenge

What I learned

I had a couple of takeaways from this challenge since this was the first Frontend Mentor challenge I took upon in a while.

1. Think about HTML file structure in order get the card centered in the middle of the page.
2. Make sure the style sheets and google font links are in the head of the HTML first.
3. Find the appropriate tags for each component in the HTML.
4. CSS Nesting can only be done between the parent and child selectors so check the HTML markup before adding the styles so that the CSS could be written more efficiently.

Continued development

Looking ahead I'd like to focus on relearning the responsive design. Start a new project with the mobile view first and then add a desktop-view with the media queries.

Author

• Frontend Mentor - @ysstudio22
• X - @YoshiCode03