Skip to content
Submitted 7 months ago

Responsive QR Code Challenge Solution

next, tailwind-css
Kevin Kao•20
@kevinkaos
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

Learning to style a simple project with a all new tech stacks, nextjs/tailwindcss/figma/google fonts by doing while learning.

What challenges did you encounter, and how did you overcome them?
  1. Never used these tech stacks, overcame the challenge by looking at documentation and going slowly.
  2. Importing google fonts, overcame with help from chatgpt samples.
  3. Using figma to convert into html/css, overcame with help from googling or playing around in figma.
Code

Please log in to post a comment

Log in

Community feedback

  • P
    Zahid Shaikh•80
    @The-Lone-Druid

    Hi Kevin,

    I recently saw your work and it seems amazing! However, I did notice a few UI anomalies:

    1. Font Size of the Paragraph: The font size of the paragraph is not as per style-guide.md. When you download the starter code, you get a style-guide.md file that contains all the information required to style the webpage. It also includes the font size of the paragraph, which should be 15px.

    2. Accessibility in HTML Code: Try incorporating accessibility features in the HTML code. For example, just like we add the alt attribute to the img tag, we should also follow standard approaches to make the website accessible. You can use the main tag to define the main content of the webpage. This helps screen readers understand the structure of the webpage.

    Apart from these, everything looks great. Keep up the good work!

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