LuanaMayumi/qr-code-component-main

Solving first challenge from frontEndMentor using tailwind and html5

Frontend Mentor - QR code component solution

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.

Table of contents

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

Overview

Screenshot

Desktop View

Mobile View

Links

• Solution URL: Add solution URL here
• Live Site URL: Deploy

My process

Built with

• Semantic HTML5 markup
• Tailwind CSS
• Flexbox
• Mobile-first workflow

What I learned

With this first project from FrontEnd Mentor, I learned how to start the project using tailwind customization

<script> 
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            "light-gray": "hsl(212, 45%, 89%)",
            "grayish-blue": "hsl(220, 15%, 55%)",
            "dark-blue": "hsl(218, 44%, 22%)",
          },
          fontFamily: {
            "outfit": [
              "Outfit",
              "sans-serif",
            ]
          } 
        }
      }
    }
  </script>

And how to apply HTML semantic Tags, styling with tailwind CSS, applying Mobile Firt methodology.

<div class="w-80 h-[500px] mx-auto bg-white p-4 rounded-2xl">

Continued development

I want to improve my tailwind skills to build others projects faster.

Useful resources

• Tailwind Documentation - This helped me to understand how Tailwind CSS works.

Author

• Github - Luana Mayumi
• Frontend Mentor - @LuanaMayumi
• Linkedin - @luana-mayumi-dev

Acknowledgments

• I'm very thankfull because he introduced me to this website when I was looking for a tool or website that could help me to improve my CSS Skills Marlon Couto