HTML, CSS

Community feedback

• 

  arowstev•120

  @arowstevPosted 10 months ago

  Thank you for the feedback. I have made the below corrections.

  Correct the src since the images are not inside the asset folder to (a) <img id="picone" src="illustration-article.svg" alt="an error in the src attribute"> (b) <img id="pictwo" src="image-avatar.webp" alt=" an error in the src attribute">

  Wrap up the main content with <main< </main>.

  Also i will work on the uses of class, id & h1 - h6.

  Thank you.

  0
• 

  Daniel 🛸•44,250

  @danielmrz-devPosted 10 months ago

  Hello @arowstev!

  Your project looks very good!

  I have a couple of suggestions for improvement:

  • You uploaded your project to Github with the images outside the folder assets. Since they are not inside the folder anymore, your code won't find them with this path:

  <img id="picone" src="assets/images/illustration-article.svg" alt="">
  

  You can fix that by removing the folders from the image path, like this:

  <img id="picone" src="illustration-article.svg" alt="">
  

  • It's a good practice to keep the assets in separate folders. It helps with the organization.

  • Also, add an alternate text for the image.

  The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

  I hope it helps!

  Other than that, great job!

  0
• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 10 months ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  • Update the path of the image to display it.

  ‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎✅ Do: <img id="picone" alt="" src="./illustration-article.svg">.

  ‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎❌ Don't: <img id="picone" src="assets/images/illustration-article.svg" alt="">.

  • Wrap the page's whole main content in the <main> tag.

  • For specificity reasons you should work with classes instead of ids because they are more reusable. You can use ids to work with JavaScript, but you should use classes to style your elements. You can read more about this here 📘.

  • 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

  I hope you find it useful! 😄

  Happy coding!

  0