Skip to content
Submitted about 1 year ago

Responsive QR Code Landing Page

Maruf Bin Solaiman•20
@marufBS
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

As I am a beginner I have find difficulty using positioning elements. Every line by line code I understand what I wrote. Yes. How Can I become a good frontend developer?

Community feedback

  • Kanishka Priyashantha•690
    @kanishkasubashPosted about 1 year ago

    Hi, Maruf👋. Congratulations on successfully completing the challenge! 🎉

    Your solution looks great, and you've done a fantastic job overall! However, here are some small suggestions after taking a look at your code to make it even better that might interest you:

    HTML:

    • The <main> element should wrap around the entire component. Using the <header>, <main>, <footer> elements provide structural clarity, accessibility improvements, SEO benefits, and facilitates responsive design. It helps you create well-organized, maintainable, and user-friendly web pages.
    • It's important to note that the alt text should be descriptive but concise, conveying the essential information without being overly long. It should provide a meaningful summary of the image's content and purpose. (Eg: alt="QR Code for frontendmentor.io")
    • Starting with <h1> and working your way down the heading levels <h2>, <h3> etc. helps ensure that your document has a clear and consistent hierarchy. Source
    <body>
    <main class="container">
        <div class="card">
            <img class="card-image" src="images/image-qr-code.png" alt="QR Code for frontendmentor.io">
            <h1 class="card-heading">Improve your front-end skills by building projects</h1>
            <p class="card-description">Scan the QR code to visit Frontend Mentor and take your coding skills to the
                next level</p>
        </div>
    </main>
    <footer><div class="attribution">...</div></footer>
</body>

    CSS:

    • You can use the max-width, margin and padding to control the width and position of your elements.
    • Percentages are often used to define widths, heights, and margins. They are relative to the parent element's size. For example, width: 50% would make an element half the width of its parent. For example:
    .container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;    
}

.card {
    max-width: 20rem;
    background-color: hsl(0, 0%, 100%);
    border-radius: 0.938rem;
    text-align: center;
}

.card-image {    
    width: 90%;
    border-radius: 0.625rem;
    margin: 5%;
}

.card-heading {
    margin: 2% 5%;
    padding: 0 5%;
}

.card-description {
    margin: 5% 5% 12%;
    padding: 0 5%;
}

    Answer to your question, Becoming a good frontend developer requires a combination of technical skills, creativity, and a strong understanding of user experience. Here's a roadmap to help you on your journey:

    1. Learn the Basics:

      • HTML: Understand the structure of web pages.
      • CSS: Learn how to style and layout web pages.
      • JavaScript: Learn the fundamentals of programming, as well as how to manipulate the DOM (Document Object Model) and handle events.

    2. Master Responsive Design:

      • Learn how to create designs that adapt to different screen sizes and devices using techniques like media queries and flexible layouts.

    3. Understand UI/UX Principles:

      • Study user interface (UI) and user experience (UX) design principles to create user-friendly and visually appealing interfaces.

    4. Version Control/Git:

      • Learn how to use Git for version control to collaborate with others and track changes to your codebase.

    5. Frameworks and Libraries:

      • Familiarize yourself with popular frontend frameworks and libraries like React, Angular, or Vue.js. Choose one and specialize in it.

    6. CSS Preprocessors:

      • Learn about CSS preprocessors like Sass or Less to write more maintainable and organized CSS.

    7. Build Tools:

      • Understand build tools like Webpack, Gulp, or Parcel to automate tasks like bundling, minification, and transpilation.

    8. Browser Developer Tools:

      • Learn to use browser developer tools to debug and optimize your code.

    9. Performance Optimization:

      • Study techniques for optimizing frontend performance, including minimizing network requests, using efficient rendering practices, and optimizing images.

    10. Cross-Browser Compatibility:

      • Ensure your websites work consistently across different browsers by testing and addressing compatibility issues.

    11. Accessibility:

      • Learn about web accessibility guidelines (such as WCAG) to create websites that are usable by people with disabilities.

    12. Continuous Learning:

      • The tech industry is constantly evolving. Stay updated with the latest trends, tools, and best practices through blogs, online courses, and conferences.

    13. Projects:

      • Apply what you learn by working on personal projects or contributing to open-source projects. Building a portfolio is important to showcase your skills to potential employers.

    14. Soft Skills:

      • Communication, teamwork, and problem-solving skills are crucial for any developer. Collaborate effectively with designers, backend developers, and other team members.

    15. Feedback and Iteration:

      • Don't be afraid to receive feedback on your work and be open to making improvements. Continuous iteration is key to growth.

    16. Real-World Experience:

      • Consider internships, freelance work, or part-time jobs to gain real-world experience and learn from practical projects.

    Remember, becoming a skilled frontend developer takes time and practice. Focus on building a strong foundation, staying curious, and being persistent in your learning journey.

    I hope you find this helpful! 😄 Keep up the great work! 👍

    🖥️Happy coding!

    1
    Maruf Bin Solaiman•20
    @marufBSPosted about 1 year ago

    @kanishkasubash Thank you very much. That’s a very descriptive suggestion. I will definitely follow these steps.

    0
  • Beatriz Gonçalves•60
    @beatrizvsgoncalvesPosted about 1 year ago

    I think your solution turned out pretty good. I also tried to do it that way when I went to do mine but I gave up when I went to see the other's solution hahaha. The only thing I would change is the texts, they have a margin on the right side. I solved it on mine by putting display: inline-block.

    0
    Maruf Bin Solaiman•20
    @marufBSPosted about 1 year ago

    @beatrizvsgoncalves Thanks. I just started frontend challenge. You can email me if you need any help.

    [email protected]

    1

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