Skip to content
Submitted 8 months ago

Blog Preview Card using Semantic HTML and Vanilla CSS

JAYMALA•30
@JAYMALA-963
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 finally manage to complete this frontend mentor CSS challenge without completely getting lost. Managed to use some Semantic HTML.

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

The first challenge I encounter is the semantic HTML. I had learned semantic HTML in past, but I wasn't able to practice it very well. So I was uncomfortable using semantic HTML. But I was able to find lots of resources regarding how and where to use semantics. It helped me a lot.

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

Since this is my first ever challenge where I used Semantic HTML, I am not sure how much correct HTML I was able to write. So all and and tips or feedback regarding Semantic HTML is most welcome. Another area where I would like help with is regarding CSS. I am not using any CSS framework or library to complete the challenge, just plain CSS. So if there is any corrections, tips or feedback regarding how I can improve my CSS skills are welcome,

Thank You.

Community feedback

  • Shawky Ahmed Shawky•60
    @QS3HPosted 8 months ago

    Great Job JAYMALA on completing the challenge.

    Note: you don't need to use all semantic elements on this challenge specifically the main element is enough the rest can be divs

    I have improved your code a little bit to make it as close to the design as possible try and and compare your code with this version and see the difference and how it was improved: HTML:-

    <body> <main> <article> <img src="/assets/images/illustration-article.svg" alt="illustration-article"> <div class="mark"> <p>Learning</p> </div> 
      <div class="date">
    Published <time datetime="2023-12-21"> 21 Dec 2023 </time>
  </div>

  <div class="heading">
    <h1>
      HTML & CSS foundations
    </h1>
  </div>

  <div class="description">
    <p>
      These languages are the backbone of every website, defining structure, content, and presentation.
    </p>
  </div>

  <div id="author">
    <img src="./assets/images/image-avatar.webp" alt="image-avatar">
    <p>Greg Hooper</p>
  </div>
</article>
    </main> </body>

    CSS:- @import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap");

    :root { --primary-color: hsl(47, 88%, 63%); --neutral-white: hsl(0, 0%, 100%); --neutral-grey: hsl(0, 0%, 50%); --neutral-black: hsl(0, 0%, 7%); }

    • { margin: 0; padding: 0; box-sizing: border-box; font-family: "Figtree", sans-serif; }

    body { background: var(--primary-color); }

    main { width: 100%; height: 100vh; text-align: left; display: flex; justify-content: center; align-items: center; }

    article { border: 1px solid var(--neutral-black); border-radius: 20px; padding: 24px; background: var(--neutral-white); box-shadow: 7px 7px var(--neutral-black); width: 384px; height: 522px; }

    img { border-radius: 10px; margin-bottom: 24px; }

    .mark { width: 82px; background: var(--primary-color); font-size: 15px; font-weight: 800; padding: 5px 12px; border-radius: 4px; margin-bottom: 12px; }

    mark { background-color: var(--primary-color); }

    .date { font-weight: 500; color: var(--neutral-black); margin-bottom: 12px; }

    .heading h1 { color: var(--neutral-black); font-weight: 800; margin-bottom: 12px; }

    .heading h1:active { color: var(--primary-color); }

    .heading h1:hover { color: var(--primary-color); }

    .description p { color: var(--neutral-grey); line-height: 1.5; font-weight: 500; margin-bottom: 24px; }

    #author { display: flex; }

    #author img { width: 32px; height: 32px; margin-right: 10px; margin-bottom: 0; }

    #author p { color: var(--neutral-black); font-weight: 800; align-self: center; }

    Marked as helpful
    0
    JAYMALA•30
    @JAYMALA-963Posted 8 months ago

    @QS3H Thank You for your feedback. I will try your solution for sure.

    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