Skip to content
Submitted 4 months ago

QR code component landing page

Azhel•120
@Azai4
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?

I am proud of solving this problem for the first time in my life, it makes feel like very conident. I failed to change the font style I will take that into cosideration next time

What challenges did you encounter, and how did you overcome them?

The challenge i came across was the mobile size and latop size. I overcame the challenge by using mediaqueries to adjust the size to fit what I was building

What specific areas of your project would you like help with?

I would love to get help on Media Queries and understanding them.

Code

Please log in to post a comment

Log in

Community feedback

  • Bhuvnesh Upadhayay•2,120
    @bhuvi819381

    Hey brother 👋

    🚀 Your solution looks great! Keep up the good work! 🎉

    Suggestions for Improvement:

    1. 🛠 Use Semantic Tags

    Replace <div> with appropriate semantic elements like <header>, <main>, <section>, and <footer>.

    1. 🔠 Use Only One <h1>

    Ensure you have only one <h1> per page, followed by <h2>, <h3>, etc.

    1. 🚫 Avoid <br> Tags

    Instead of <br>, use CSS for spacing (e.g., margin-bottom).

    1. 🖼️ Fix Image Loading Issue

    You forgot to add ./ before the image path. Always write:

    <img src="./images/example.jpg" alt="Example">
    1. 📏 Use min-height: 100vh

    This ensures full-screen height without needing height.

    1. ❌ Avoid Fixed Heights

    Try not to set height explicitly. Let content define it naturally.

    1. 📏 Don't Use px

    Instead, use relative units like rem, em, %, or vh/vw.

    1. 📱 No Media Query Needed

    For this project, media queries are not required. Use flexbox or grid for responsiveness.

    1. 🎨 Use CSS Variables

    Define colors, fonts, and spacing in :root. Example:

    
:root {
  --primary-color: #ff5733;
  --font-size: 16px;
}

    Additional Suggestions:

    🛠️ Check for Errors: After submitting, always review the HTML & accessibility error report and fix any issues.

    🔥 You're doing an amazing job! Keep learning and improving! 🚀

    Best regards, A Frontend Friend

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