Skip to content
Submitted about 2 months ago

Blog-Card design using HTML and CSS

ChrisTariah•80
@ChrisTariah
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 proud of how similar and identical the design is to the original and the placement as well as the alignment of the design on the page.

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

It was challenging to style every individual text on the card to look identical to the original and I had some problems styling the avatar.

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

CSS Pseudo selectors, so that i can style multiple items with the same tag.

Community feedback

  • Dangelo•380
    @DangelobastPosted about 2 months ago

    Pseudo Classes / Pseudo elements are particularly used for more specific tasks, it's good to learn the way they work in case you need to use them but if you use them to select several elements in your HTML, when doing changes is gonna backfire. One example is p:nth-of-type(2){ color: black; } Meanwhile it can be done in simple pages, if you add another P element specially on top it will "shift" and then your black will be applied to another paragraph instead of the one you need.

    Once you get a grasp of pseudos better stick to classes, and it will help you a lot when doing a web with similar design accross pages but different content.

    0
    ChrisTariah•80
    @ChrisTariahPosted about 1 month ago

    @Dangelobast Thank you!

    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