Skip to content
Submitted 3 months ago

Blog preview card project

Luisa Fda. Ramirez•50
@LuRamirezR
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I feel good about achieving the challenge in less time by applying my knowledge of HTML and CSS.

What challenges did you encounter, and how did you overcome them?

I encountered a challenge in this project when I needed to adjust the image using SVG code and also enable the border-radius property. I was able to solve this issue by using a div container and applying the necessary properties to it.

What specific areas of your project would you like help with?

I would like to know if the webpage is using semantic HTML, and if there are alternative CSS design solutions I can explore further.

Community feedback

  • Dylan•290
    @dquinn089Posted 3 months ago

    Your project looks great! Here are a couple of suggestions to improve your code and enhance its functionality.

    Improve accessibility by adding alt text:

    <!-- Add meaningful alt text to the image -->
<img src="./assets/images/image-avatar.webp" alt="Author Greg Hooper">

    Consider using CSS variables for spacing to make it easier to manage and adjust padding, margin, and gap throughout your project:

    :root {
    --color-main: #f4d04e;
    --color-title: #121212;
    --color-text: #6b6b6b;
    --spacing-small: 5px;
    --spacing-medium: 16px;
    --spacing-large: 20px;
}

    You can use many types of CSS variables, such as colors, spacing, font sizes, and more, to make your code more maintainable and flexible. Hope this helps, Happy Coding!

    Marked as helpful
    0
    Luisa Fda. Ramirez•50
    @LuRamirezRPosted 3 months ago

    @dquinn089 thanks for your feedback, I'll make sure to remember this for my next project.

    1

Please log in to post a comment

Log in with GitHub

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