QR-Code Component Using CSS Grid and Flexbox

Table of contents

• Overview
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The Task was to create the QR Code Component, using any resources but here i have used the basic concepts of HTML and CSS for my project. I have created it for the specified width screens for desktop view and mobile view that was mentioned in the README.md file of Frontend mentor. Moreover i followed there recommendations for font-size, font-family, font-weight , backround colors and etc.

Screenshot

Here are my both Desktop and Mobile views of the QR Code Component.

Links

• Solution URL: GitHub-Link For the Solution

My process

I have divided my task into three steps. First, I built the layout using Figma and structured my HTML. Second, I created custom CSS for the layout, incorporating necessary grid and flexbox settings, relevant fonts and font sizes, background colors, text alignments, images, favicon, etc. Third, I set screen sizes for each view (Desktop and Mobile). In the final step, I commented on the code to enhance understanding. Additionally, I maintained my repository on my GitHub account.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow

What I learned

I have learned many things and recalled my concepts related to web development. However, the most significant lesson I acquired was becoming more efficient and adept at work. Yes, we all acknowledge that HTML and CSS are integral components of design, and there are moments when we feel frustrated. Nevertheless, it is a part of the learning process that we must embrace. I want to highlight the individual whose YouTube tutorials and videos greatly assisted me — Kevin Powell. I will share the link to his YouTube channel so that you can also visit and learn CSS in a more intelligent and effective manner.

Continued development

I will focus on tackling more challenges and aim to complete at least one challenge every week, focusing specifically on HTML and CSS. Simultaneously, I plan to enhance my coding skills, particularly in JavaScript, by consecutively completing 30 projects. This approach will allow me to immerse myself in continuous learning, progressively building and refining my coding abilities.

Useful resources

• For Understanding Grid and Flex-Box - This resource helped me to understand and implement the grid view and flexbox.
• For Media Queries in CSS - This is an amazing website which helped me finally understand media-queries. I'd recommend it to anyone still learning this concept.
• Kevin Powell - Checkout his Video tutorials for the better understanding of HTML and CSS.

Author

• Hashnode - Anusha-Syeda
• Frontend Mentor - @Anusha-Syeda012