Skip to content
Submitted 3 months ago

Blog Preview Card using HTML and CSS

basitali07•40
@basitali07
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 am very Proud on my HTML and CSS skills in future i just want to focus on media quaries!

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

I faced difficulty while aligning the avatar image with avatar name, but after some try i done it with CSS Position property. below are the code snippets at that part i face difficulty:

 
        
        Greg Hooper
      

footer{
    padding: 20px 0 5px;
    text-align: left;
}
footer img{
    width: 35px;
}
footer .avatar-name{
    display: inline-block;
    position: relative;
    bottom: 12px;
    font-weight: 800;
    padding-left: 8px;
    color: hsl(0, 0%, 7%);
}
h1:hover{
    color:hsl(47, 88%, 63%);
}
What specific areas of your project would you like help with?

Actually i need help to understand the concept of media quaries!

Community feedback

  • Salva•260
    @salva-itPosted 3 months ago

    Your design is excellent. I have a few suggestions for improvement:

    1. Unit of Measurement: Consider using relative units (such as em, rem, or %) instead of pixels for more flexible and responsive design.

    2. Semantic Code: I reviewed the code, and the semantic structure is well-written. However, I recommend using heading tags in a proper hierarchical sequence to enhance readability and SEO.(h1,h2,h3,...) Best of luck with your project!

    Marked as helpful
    0
    basitali07•40
    @basitali07Posted 3 months ago

    @salva-it Very very thanks mam for your sugesstions! please visit on my new project and check whether it is ok or not. below is the link of my other project:

    https://www.frontendmentor.io/solutions/social-links-profile-main-by-using-html-and-css-3_waY6omHC

    0

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