Just basic HTML and CSS

Community feedback

• 

  Kamlesh Rajesh Yadav•5,060

  @Kamlesh0007Posted over 1 year ago

  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 background color to body to make background as per design

  body
  {
  background:hsl(212, 45%, 89%);
  }
  

  0
• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  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.

  ---

  HTML 🏷️:

  • This solution may cause accessibility errors due to lack of semantic markup, which causes lacking of landmark for a webpage and allows accessibility issues to screen readers, due to accessibility errors our website may not reach its intended audience, face legal consequences, and have poor search engine rankings, highlighting the importance of ensuring accessibility and avoiding errors.

  ---

  • The section element is not meant to use here, because it cannot define landmark of a webpage

  ---

  • What is meant by landmark ?, They used to define major sections of your page instead of relying on generic elements like <div> or <span>. They are use to provide a more precise detail of the structure of our webpage to the browser or screen readers

  ---

  • For example:
  • The <main> element should include all content directly related to the page's main idea, so there should only be one per page
  • The <footer> typically contains information about the author of the section, copyright data or links to related documents.

  ---

  • So resolve the issue by replacing the <section class="window"> element with the proper semantic element <main> in your index.html file to improve accessibility and organization of your page

  ---

  .

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

  Happy coding!

  0
• 

  BalazsBanfi•280

  @bally4hPosted over 1 year ago

  Hi!

  You started very well and good to know you are here to know, in what you can develop. I started only a few mont ago, so I'm not an expert, but I have some suggestion to you.

  You sould have a HTML <main> element, which represents the main content of the of a document or application.

  The design. I do this: when I think I finished a project, I step back from the monitor and try to watch the homepage with the questions as outsider: Is it nice? Is it well organized? Font sizes, paddings, margins how could be better?

  Mobile view is fine! But when you take this questions in your desktop view, you will see, under your <h1> there is a too big area, and under the <p> there is nothing (no margin, no paddig). Defenetly there is padding and margin but you cannot see it, because the <p> content overflows down from the .window

  This is because you use fix sizes: (px) an some vh everywhere. I suggest to you, you can use the fix sizes in <h1> and <p> but use for the .window class for example: height: auto. In this case your .widow will be big enough to hold the contents inside it.

  Keep going, it will be better and better after every project. As I said, I started some month ago, and I am better and better after every challenge.

  Best regards!

  0

  ---

  

  Tomáš Drga•20

  @ThereIsJustNothingPosted over 1 year ago

  @bally4h Thank you! Yes, i learn about <main> and <section> etc just yesterday. I built this project few days before, but i had problems with uploading it.

  I think my next project will be slightly better :)

  Anyway, thank you very much!

  0

  

  BalazsBanfi•280

  @bally4hPosted over 1 year ago

  Hi,

  Just an advice how the freontend mentor works.

  I dont't want to force you, so it is your decision, but it is nice to sign the useful answers "marked as helpful".

  There is a point system in frontend mentor, and who helps you can achieve points for helpful answers.

  So if you think that, my or the other guys answer was helpful to you, you can hit the marked as helpful button, and these guys get some points for it.

  Best regards!

  0