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

HTML, CSS

arowstevβ€’ 120

@arowstev

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


All feedbacks is welcome. Thank you.

Community feedback

arowstevβ€’ 120

@arowstev

Posted

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,230

@danielmrz-dev

Posted

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

@MelvinAguilar

Posted

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:

I hope you find it useful! πŸ˜„

Happy coding!

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