Skip to content
OverviewSolutions
3
Comments
53
Kanishka Priyashantha
@kanishkasubash

All comments

  • Kanishka Priyashantha•690
    @kanishkasubashPosted about 1 year ago

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

    Your solution looks great, and you've done a fantastic job overall! However, here are some small suggestions 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.
    <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:

    • Using advanced layout features like Flexbox and Grid can provide more efficient and flexible ways to create complex layouts and manage spacing between elements. Flexbox is generally the best modern layout method to use for flexible responsive structures. Grid would be used for content where you want better control of their layout using columns and rows. This article explains it quite well Link as well as this video by Kevin Powell which demonstrates in practice when you would use which Link (NB. You can also combine them in an application, it all depends on the use-case)
    • If you want to build the most-accessible product possible, you need to use both pixels and ems/rems. It's not an either/or situation. There are circumstances where rems are more accessible, and other circumstances where pixels are more accessible. Link
    • 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%;
}

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

    🖥️Happy coding!

    Marked as helpful
    0
  • GABI•30
    @gabsvitorioSubmitted about 1 year ago

    1 What did you find difficult while building the project?

    R: I had difficulty to fix the qr code image inside card, but in the end it was a simple solution.

    2 Which areas of your code are you unsure of?

    R: Hmm... maybe text spacing.

    3 Do you have any questions about best practices?

    R: Any observation and suggestion of best practices are welcome!

    QR Code Component using CSS Grid

    1
    Kanishka Priyashantha•690
    @kanishkasubashPosted about 1 year ago

    Hi, GABI👋. 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.
    • 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:

    • If you want to build the most-accessible product possible, you need to use both pixels and ems/rems. It's not an either/or situation. There are circumstances where rems are more accessible, and other circumstances where pixels are more accessible. Link
    • 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%;
}

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

    🖥️Happy coding!

    Marked as helpful
    0
  • Kanasia Moore•30
    @RoyallySweetSubmitted about 1 year ago

    I found center the content vertically to be the most difficult part. Other than that, fairly easy. But I guess I could say, when I started, I thought I new a good amount, but that all left my head once I began.

    QR Code

    1
    Kanishka Priyashantha•690
    @kanishkasubashPosted about 1 year ago

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

    Your solution looks great, and you've done a fantastic job overall! However, here is a small suggestion that might interest you:

    To center the content properly and make your layout more flexible, consider using min-height: 100vh. This way, your content will adjust to fit the screen height regardless of the device.

    .align {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

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

    🖥️Happy coding!

    0
  • Hammad Hamdani•110
    @HammadHamdaniSubmitted about 1 year ago

    Hi! Everyone who is visiting solution. I would love to see your feedback. Please give me your feedback that:

    • Did you liked my solution or not?
    • Suggest me any changes if you have any in your mind.
    • Was my solution helpful for you or not?

    Responsive QR Code Card Component using Tailwind CSS

    1
    Kanishka Priyashantha•690
    @kanishkasubashPosted about 1 year ago

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

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

    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")

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

    🖥️Happy coding!

    Marked as helpful
    0
  • Kanishka Priyashantha•690
    @kanishkasubashPosted about 1 year ago

    Hi, Skanda Aithal👋. 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 should use a CSS reset. A CSS reset is a set of CSS rules that are applied to a webpage in order to remove the default styling of different browsers.

    CSS resets that are widely used:

    Reset CSS

    "My Custom CSS Reset" by JoshWComeau

    • To center the content properly and make your layout more flexible, consider using min-height: 100vh. This way, your content will adjust to fit the screen height regardless of the device.
    • You can use the max-width, margin and padding to control the width and position of your elements. For example:
    • 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%;
}

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

    🖥️Happy coding!

    0
  • Milena Zanqui•20
    @mitessariSubmitted about 1 year ago

    By finishing this project I notice that I still need some practise on Box Model, display values, positions and colours on CSS. Also I had some difficulty on centring the card, I ended up adding a margin auto and a margin top to centre it, but I am sure there is a more practise way to do so. I would love your feedback and what you would do different from me.

    Responsive QR code component

    1
    Kanishka Priyashantha•690
    @kanishkasubashPosted about 1 year ago

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

    Your solution looks good, 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.
    • 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 should use a CSS reset. A CSS reset is a set of CSS rules that are applied to a webpage in order to remove the default styling of different browsers.

    CSS resets that are widely used:

    Reset CSS

    "My Custom CSS Reset" by JoshWComeau

    • Using advanced layout features like Flexbox and Grid can provide more efficient and flexible ways to create complex layouts and manage spacing between elements. Flexbox is generally the best modern layout method to use for flexible responsive structures. Grid would be used for content where you want better control of their layout using columns and rows. This article explains it quite well Link as well as this video by Kevin Powell which demonstrates in practice when you would use which Link (NB. You can also combine them in an application, it all depends on the use-case)
    • To center the content properly and make your layout more flexible, consider using min-height: 100vh. This way, your content will adjust to fit the screen height regardless of the device.
    • 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%;
}

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

    🖥️Happy coding!

    0
  • Kanishka Priyashantha•690
    @kanishkasubashPosted about 1 year ago

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

    Your solution looks great, and you've done a fantastic job overall! However, here is a small suggestion that might interest you:

    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.

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

    🖥️Happy coding!

    0
  • Lavanya Kumar Allu•10
    @lavanyakumaralluSubmitted about 1 year ago

    I have tried to solve this challenge using simple html and css. I know my solution is not accurate, if you think I need in an improvement in any of the concepts please help me by providing the feedbacks. Thank You😁!

    Responsive QR Code using Flex

    2
    Kanishka Priyashantha•690
    @kanishkasubashPosted about 1 year ago

    Hi, Lavanya Kumar👋. 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.
    • 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 should use a CSS reset. A CSS reset is a set of CSS rules that are applied to a webpage in order to remove the default styling of different browsers.

    CSS resets that are widely used:

    Reset CSS

    "My Custom CSS Reset" by JoshWComeau

    • Using advanced layout features like Flexbox and Grid can provide more efficient and flexible ways to create complex layouts and manage spacing between elements. Flexbox is generally the best modern layout method to use for flexible responsive structures. Grid would be used for content where you want better control of their layout using columns and rows. This article explains it quite well Link as well as this video by Kevin Powell which demonstrates in practice when you would use which Link (NB. You can also combine them in an application, it all depends on the use-case)
    • To center the content properly and make your layout more flexible, consider using min-height: 100vh. This way, your content will adjust to fit the screen height regardless of the device.
    • 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%;
}

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

    🖥️Happy coding!

    2
  • Kanishka Priyashantha•690
    @kanishkasubashPosted about 1 year ago

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

    Your solution looks great, and you've done a fantastic job overall! However, here is the answer to your question that might interest you:

    Absolutely, Use a Mobile-First Approach is the best practice for creating a responsive website. Start designing and developing your website with mobile devices in mind first, and then progressively enhance the design for larger screens. This approach ensures that your website will look and function well on smaller screens and can gracefully scale up.

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

    🖥️Happy coding!

    0
  • ADC2050•10
    @ADC2050Submitted about 1 year ago

    How is the HTML structure of the project? Are there any improvements or optimizations you would suggest?

    Are there any specific CSS techniques or styles you think could be improved?

    How would you suggest improving code organization and readability?

    Enhancing QR Code Design with HTML and CSS

    1
    Kanishka Priyashantha•690
    @kanishkasubashPosted about 1 year ago

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

    Your solution looks good, 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 should use a CSS reset. A CSS reset is a set of CSS rules that are applied to a webpage in order to remove the default styling of different browsers.

    CSS resets that are widely used:

    Reset CSS

    "My Custom CSS Reset" by JoshWComeau

    • Using advanced layout features like Flexbox and Grid can provide more efficient and flexible ways to create complex layouts and manage spacing between elements. Flexbox is generally the best modern layout method to use for flexible responsive structures. Grid would be used for content where you want better control of their layout using columns and rows. This article explains it quite well Link as well as this video by Kevin Powell which demonstrates in practice when you would use which Link (NB. You can also combine them in an application, it all depends on the use-case)
    • If you want to build the most-accessible product possible, you need to use both pixels and ems/rems. It's not an either/or situation. There are circumstances where rems are more accessible, and other circumstances where pixels are more accessible. Link
    • To center the content properly and make your layout more flexible, consider using min-height: 100vh. This way, your content will adjust to fit the screen height regardless of the device.
    • You can use the max-width, margin and padding to control the width and position of your elements. For example:
    • 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%;
}

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

    🖥️Happy coding!

    Marked as helpful
    1
  • Maruf Bin Solaiman•20
    @marufBSSubmitted about 1 year ago

    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?

    Responsive QR Code Landing Page

    2
    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
  • Bhawna Pandit•80
    @bhawnapandit26Submitted about 1 year ago

    My approach was to first make the body of full screen (using vh) and then add a card to it in the center both horizontally and vertically (using grid). After that I simply added the contents. Is there any better approach to this?

    Responsive page solution using Tailwind CSS

    2
    Kanishka Priyashantha•690
    @kanishkasubashPosted about 1 year ago

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

    Your solution looks great, and you've done a fantastic job overall! However, here are some small suggestions that might interest you:

    • 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

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

    🖥️Happy coding!

    Marked as helpful
    0