Skip to content
Submitted about 2 years ago

QR Code Component with HTML & CSS

PatrickLee22•170
@PatrickLee22
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Using this challenge to re-learn HTML & CSS after putting it down for a few months. Feedback is greatly appreciated.

Code

Please log in to post a comment

Log in

Community feedback

  • Vanza Setia•27,715
    @vanzasetia

    Hi, PatrickLee22! 👋

    Great to know that you are coming back!

    I have some suggestions to improve your solution.

    • First, import the Outfit font family from the Google Fonts website. Choose the necessary font weights. Then, grab the <link> tags and put them inside the <head> element.
    • Replace the <h3> with <h1>. Each page must have one <h1>. The <h1> element is used to define the main heading of a page.
    • All the page content should live inside landmark elements. Users of assistive technology can navigate through landmark elements. This will help them quickly navigate a website or application.
    • In this case, the children of the <body> should be landmark elements; <main> for the card, <footer> for the attribution.
    • Remove font-weight: 700 from the <body> styling. Then, remove font-weight: 400 from the <p> styling. The default font weight of the paragraph element is 400—inherit from the default <body>'s font weight. Then, the default font weight of the heading element is 700. As a result, you do not need to specify any font-weight properties.

    I hope this helps. Happy coding! 😄

    Marked as helpful
  • Abdul Khaliq 🚀•72,380
    @0xabdulkhaliq

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have other recommendations regarding your code that I believe will be of great interest to you.

    CSS 🎨:

    • Looks like the component has not been centered properly. So let me explain, How you can easily center the component without using margin or padding.
    • We don't need to use margin and padding to center the component both horizontally & vertically. Because using margin or padding will not dynamical centers our component at all states
    • To properly center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📚.
    • For this demonstration we use css Grid to center the component.
    body {
min-height: 100vh;
display: grid;
place-items: center;
}
    • Now remove these styles, after removing you can able to see the changes
    .card {
margin-left: auto;
margin-right: auto;
margin-top: 15%;
}
    • Now your component has been properly centered

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    Marked as helpful
  • Kamlesh Rajesh Yadav•5,040
    @Kamlesh0007

    Congratulations on completing the challenge! That's a great achievement, and I'm sure you put a lot of effort into it. I really liked the way you approached the challenge and the code you wrote. You demonstrated a good understanding of the concepts and applied them effectively to solve the problem.I have a few suggestions to improve your code further. You need to add Semantic HTML tags

    The HTML structure should be semantically correct. The current structure doesn't provide any semantic information about the content. A better approach would be to use appropriate HTML tags such as <header>, <main>, <section>, <article>, etc. to define the sections of the page

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