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

Blog Preview card

@Pichikachandu

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

P
Kamran Kiani 1,040

@kaamiik

Posted

Hi. I have some notes that I wanna mention:

  1. There is no need to use article and section tag here. It's Just a card and can be deployed using a div tag`.
  2. Your img is decorative and does not need any alt text message.
  3. I think Learning is not a button and can be a tag because It takes you to the new page if It is a tag.
  4. You can not use a text inside a div. Try a semantic tag like p.
  5. It's not necessary to wrap everything in a div. Do it when you have to.
  6. Still I see some other problems. Better to revisit your html.
  7. On CSS, You need a good CSS reset. Andy Bell is good.
  8. Your page is not responsive. If you resize the screen size it overflows. Because you restricted your width and height. Never ever do this. You can do this only for some image and logos.
  9. You have to use rem unit for font size and also for spacing you can use em too. and also for using max-width and media query you have to use rem unit.
0

@Pichikachandu

Posted

@kaamiik thank you for your clarification iam just a beginner I will rectify those mistakes

1
P
Kamran Kiani 1,040

@kaamiik

Posted

Yw :) Try to ask more question on discord community If you are hesitate in some part of your code. Mentors can help much better. @Pichikachandu

0

@Pichikachandu

Posted

@kaamiik of course thank you so much

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