Skip to content
Submitted over 1 year ago

Responsive QR Website

Yiğithan Çolak•90
@yigithancolak
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

How is my css and html architectures ? Please give me some feedback.

Community feedback

  • Panji•2,090
    @pperdanaPosted over 1 year ago

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

    • I have some additional recommendations for your code that I think you'll find interesting and valuable.

    📌 Add <main> tag as semantic HTML in code

    • The <main> tag is a semantic HTML element that is used to define the main content of a web page.

    • The <main> tag should be used to wrap the primary content of a web page, such as the main article, section, or body of text.

    for example code:

    <main>
  <div class='container'>
    <h1>Article Title</h1>
    <p>Article content goes here...</p>
    .......................
  </div>
</main>

    In the example above, the <main> tag is used to wrap the <div> tag, which contains the primary content of the web page. This tells both human readers and search engines that the content inside the <main> tag is the most important and relevant content on the page.

    I hope you found this helpful!

    Happy coding🤖

    Marked as helpful
    0
    Yiğithan Çolak•90
    @yigithancolakPosted over 1 year ago

    Thank you for the feedback it was helpful @Panji200

    0
  • Ecem Gokdogan•9,380
    @ecemgoPosted over 1 year ago

    Some recommendations regarding your code that could be of interest to you.

    HTML

    • If you want to use the recommended font-family for this project, you can add the following between the <head> tags in HTML file:
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap" rel="stylesheet">

    CSS

    • After adding them to the HTML, you can add this font-family to the body in CSS file:
    • For the color of the screen, you can use the recommended color in the body
    body{
   font-family: 'Outfit', sans-serif;  // google fonts which is suggested
   /* background-color: #aadbf0; */
   background-color: hsl(212, 45%, 89%);
}

    Hope I am helpful. :)

    Marked as helpful
    0
    Yiğithan Çolak•90
    @yigithancolakPosted over 1 year ago

    Thank you ecem i was not giving so much attention on this project it was a starter but now i am doing a form with some steps in the challanges. When i am done with that i hope you give some feedback on that too. Thank you :)@ecemgo

    1
    Ecem Gokdogan•9,380
    @ecemgoPosted over 1 year ago

    @yigithancolak I'm happy to help, yiğithan🤗

    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