Skip to content
Submitted almost 2 years ago

Responsive qr code component in ReactJS

bootstrap, react, node
Rahul Goel•150
@RahulGoel2002
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

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

Links

My process

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

What I learned

Being a beginner at front end development, I already knew many concepts that helped me throughout this challenge. One thing that I learnt particularly from this project is to adopt the mobile first approach as that makes our work a whole lot easier.

Continued development

Use the movile first approach in more projects to make them stand-out. Also work with some more complex structures

Author

Acknowledgments

A deep note of thanks to my mentor Angela Yu from the Udemy course The Complete 2023 Web Development Bootcamp. A deep note of thanks to my partner as well for supporting me in every aspect of my life.

Code

Please log in to post a comment

Log in with GitHub

Community feedback

  • Abdul Khaliq 🚀•72,380
    @0xabdulkhaliq

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have other recommendations regarding your code that I believe will be of great interest to you.

    QR iMAGE ALT TEXT 📸:

    • Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute.
    • The alt attribute should explain the purpose of the image.
    • E.g. alt="QR code to frontendmentor.io"
    <img src="/images/image-qr-code.png" alt="QR code to frontendmentor.io">

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    Marked as helpful
  • _nehal💎•6,710
    @NehalSahu8055

    Hello Coder 👋.

    Congratulations on successfully completing the challenge! 🎉

    Just a small suggestion.

    • For non-decorative images give meaningful and descriptive alt like alt= "QR code to frontend mentor website".

    I hope you find this helpful.

    Happy coding😄

    Marked as helpful

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