Skip to content
Submitted about 1 month ago

QR code component landing page

Azhel•110
@Azai4
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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.

Community feedback

  • Bhuvnesh Upadhayay•2,000
    @bhuvi819381Posted about 1 month ago

    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

    0

Please log in to post a comment

Log in with GitHub

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