Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive QR Website

@yigithancolak

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

Community feedback

Panji 2,090

@pperdana

Posted

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

@yigithancolak

Posted

Thank you for the feedback it was helpful @Panji200

0
Ecem Gokdogan 9,380

@ecemgo

Posted

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

@yigithancolak

Posted

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

@ecemgo

Posted

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

0

Please log in to post a comment

Log in with GitHub
Discord logo

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