Frontend Mentor - QR code component solution

This is a solution to the QR code component challenge on Frontend Mentor.

Links

• Solution URL: (https://davunju-frontend-mentor-qr-code.vercel.app/)

My process

Built with

• Semantic HTML5 markup
• CSS custom properties

What I learned

While building this project, i mostly learned how to center a div horizontally and vertically by using CSS position property and transform property. I did this as highlighted below;-

#wrapper{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 400px;
  padding: 20px;
  border-radius: 8px;
  background-color: #fff;
}

Continued development

I built this project based on desktop design, while no mobile-design flow and functionalities were implemented. Hence I would like to focus more on mobile design in the near future and add some functionalities with JavaScript, which will allow visitor to create accounts and login to see more features.

Author

• Github - @davunju
• Frontend Mentor - @davunju
• freeCodeCamp - @DavidEnock

Acknowledgments

This is the first project I have shared with other people on github, frontend mentor. I would like to give more appreciations to Maotora who has being inspiring me a lot in my web tech journey. Wish me a good of luck and more inspiration to build more interactive and real problem solving projects.