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

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

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

Screenshot

Add a screenshot of your solution. The easiest way to do this is to use Firefox to view your project, right-click the page and select "Take a Screenshot". You can choose either a full-height screenshot or a cropped one based on how long the page is. If it's very long, it might be best to crop it.

Alternatively, you can use a tool like FireShot to take the screenshot. FireShot has a free option, so you don't need to purchase it.

Then crop/optimize/edit your image however you like, add it to your project, and update the file path in the image above.

Note: Delete this note and the paragraphs above when you add your screenshot. If you prefer not to add a screenshot, feel free to remove this entire section.

Links

• Solution URL: https://github.com/Dwash71/qr-code-component-main
• Live Site URL: https://dwash71.github.io/qr-code-component-main/

My process

My process first started with reading the readme to see what was required. Next, I set up my html to closely match the design layout. Next I tried to get as close as possible to styling the html to match the design. Lastly, ensuring that the website was mobile responsive.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• Next.js - React framework
• Styled Components - For styles

Note: These are just examples. Delete this note and replace the list above with your own choices

What I learned

Although this was a beginner project, CSS still is something to get better on. Basically with regards to responsiveness and media queries. I learned how to structure and position items correctly.

Continued development

Areas of focus that want to really apply myself is learning or becoming more comfortable with CSS and possible Sass. I believe this is a skill that is very much needed to become a good Web Developer.

Useful resources

• Box Shadow - This helped me to apply a box shadow to make container stand out from background.

• CSS Reset - This helped me to reset my page and set appropriate styles to save time.

Author

• Website - Derrick Washington
• Frontend Mentor - @Nique50
• Twitter - @DWash50