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.
Users should be able to:
- View the QRCode in desktop and mobile view.
- I went over the design files to understand how the end result of the page should look.
- I planned the layout, deciding to use Flexbox for easy centering and alignment.
- I began with creating the basic HTML structure.
- Next, I linked the Google Font (Outfit) and set up the base styles in my CSS file (
style.css). - I then focused on styling the QR code component, focusing on mobile dimensions.
- After getting the mobile layout right, I used media queries to adjust the layout for desktop dimensions, which admittedly not many were required, i only changed the font size for the footer slightly.
- I tested the layout using firefox responsive design mode to view in different screen sizes.
- I also viewed the website natively using my desktop PC and mobile phone.
- I validated my HTML and CSS code using w3.org. While not necessary, I think it can be useful for newbies.
- This project was a great way to hone my skills. I look forward to completing more challenges in the near future.
- As I continue to grow and develop my skills, I am planning to delve into more advanced and modern web technologies such as React and Styled-Components.
- HTML5 - for structuring the content of the webpage.
- CSS custom properties - for defining reusable variables for colors, font sizes, etc.
- Flexbox - for creating a flexible and responsive layout.
- Visual Studio Code - as the code editor to write and manage the project code.
- Github Pages - For deploying the live example.
- Mobile-first design approach - starting the design for smaller screens and scaling up for larger screens if necessary (it wasn't, really).
- Focusing on mobile dimensions first and working your way up from there (if needed).
- How to set up github pages.
- Thanks to feedback from @danielmrz-dev I also learned a bit about semantic markup, such as using main and footer tags instead of div tags, and the importance of h1-h6 tags.
- Github Pages - This helped me easily deploy a live example of my website for free, straight from my github repo.
- W3 Validator - Good for spotting common problems in your HTML and CSS code.
- StackOverflow - Great for asking questions and getting help to troubleshoot your code.
- ChatGPT - Great for proof reading and finding any sneaky problems within your code. Also helpful for providing a starting point, so long as you understand the code it is outputting.