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.
- Overview
- Screenshot
- Links
- My process
- Built with
- What I learned
- Continued development
- Useful resources
- Author
- Acknowledgments
- Solution URL: QR code github
- Live Site URL: QR code challenge live
- Semantic HTML5 markup
- ReactJS (used create-react-app command to setup the project)
- SASS Ruby
- React Testing Library
- Prettier formatter
- Importance of rel="noreferrer”. When we use target="_blank" in HTML code to open a link in a new tab or window, there's a potential security risk, especially in older web browsers. If we do not add this information to the link, there's a chance that the newly opened tab or window can know details about the page that opened it. This might not be a problem in many cases, but it could potentially be exploited by bad websites.
- Instead of getting fonts from another link, I hosted it locally to improve web performance metrics.
- In another iteration, I was able to vertically position the QR code to the center of the mobile screen especially when the bottom bar of the browser exists. In my case, svh unit is suitable since this project does not involve any scrolling
- Segregated the SCSS files to enhance modularity and maintainability
- Explore more testing such as clicking the footer links, and taking one to the respective sites.
- PageSpeed Insight detected that there is no Content Security Policy (CSP) in enforcement mode. A strong CSP significantly reduces the risk of cross-site scripting (XSS) attacks. Learn how to use a CSP to prevent XSS
- Scrimba's React course - A hands-on mode of practicing React. It was a refresher for me.
- Steps to build React project using create-react-app
- Sass
- New viewport unit - Talked about when svh is used
- Website - Rupali Roy Choudhury
- Frontend Mentor - @rupali317
I express my gratitude towards my mentor - Deborah for the insightful code review session