blog-preview-card-using-HTML/CSS

Community feedback

• 

  Krushna Sinnarkar•1,100

  @krushnasinnarkarPosted 4 months ago

  Hi @ei-abdullah,

  Congratulations on successfully completing the challenge!

  I have some suggestions regarding your code that I believe will be of great interest to you.

  1. Main Element Height: You can remove the height from the main element as it is not required. This will also eliminate the small gap between the about section and the bottom of the card.

  2. Hover Effect: Adding a hover effect to the card, such as a shadow, will enhance the user experience. This is also in line with the challenge brief, which states that users should be able to see hover and focus states for all interactive elements on the page. You can achieve this by adding:

     .card:hover {
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     }
     

  3. Responsive Main Element: Instead of using a media query to reduce the width of the main element, you can change the width: 384px; to max-width: 384px;. This will automatically reduce the width if the screen size is smaller than 384px:

     main {
         max-width: 384px;
     }
     

  I hope you find this helpful, and I would greatly appreciate it if you could mark my comment as helpful if it was.

  Feel free to reach out if you have more questions or need further assistance.

  Happy coding!

  0

  ---

  

  Abdullah Zafar•180

  @ei-abdullahPosted 4 months ago

  @krushnasinnarkar Thanks for your guidance, I will apply these techniques surely in my upcoming challenges and projects. I appreciate you.

  0

  

  geomydas•1,440

  @geomydasPosted 4 months ago

  @krushnasinnarkar I would reccomend aswell to change the max-width from px unit to rem unit. It would be more accesible to people who change their font sizes and its pretty simple to convert your px to rem just by dividing by 16.

  Example: 16px = 1rem, 8px = 0.5rem

  0