Cleaner code would be preferred next time.
What challenges did you encounter, and how did you overcome them?It took me some time to get all of the small details resemble the design as closely as possible.
It is a very nice implementation, but I have some notes:
In CSS, it is considered best practice to define colors using variables.
In the Accessibility, you forgot to add a role to the attribution section. Also, the headings should be in order from h1 to h6. You placed h1 first and then jumped to h3, which is not good for accessibility.
I hope that was helpful, Happy coding.
I started to acquire a knowledge about microdata by schema.org
What specific areas of your project would you like help with?Markup, microdata
Wow, that's amazing! How do you achieve pixel-perfect precision?
I'm not so sure about the article illustration in mobile version. I try to adjust the height to look similar based on the design has given, but can't make it higher a bit.
Hi, congrats on completing the project.
to adjust the height of the illustration in the mobile version or other versions you have to fix the height of the image (200px) and add object-fit (cover) to resize the size of the image
I hope these tips help enhance your project. Feel free to reach out if you have any questions or need more details!
Hi, congrats on completing the project.
I have reviewed your code and have a few suggestions to help you improve it:
Landmark: You forgot to add a landmark. You can either add role="main" to the parent of your card or use the <main> element, which is already recognized as the main content landmark.
Min-Height on Body: Instead of using height for the body, use min-height. This allows the body to expand with the content and provides a better experience as content grows.
I hope these tips help enhance your project. Feel free to reach out if you have any questions or need more details!
you have to increase the size of the image and the title
