Skip to content
OverviewSolutions
4
Comments
3
Shawky Ahmed Shawky
@QS3H

All comments

  • Shawky Ahmed Shawky•60
    @QS3HPosted 8 days ago

    Great job on your solution, I would like to remind you that you forgot to make the text bolder by adding different font weights 500 would look good :), and it would be better if you could use some semantic HTML for accessibility, other than that you did a good job (wish you the best of luck on your learning journey).

    0
  • JAYMALA•30
    @JAYMALA-963Submitted 8 months ago
    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.

    Blog Preview Card using Semantic HTML and Vanilla CSS

    1
    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
  • Shawky Ahmed Shawky•60
    @QS3HPosted 8 months ago

    Looks Great, If you want to make it look perfect, just increase the line height on the h1 element and decrease the line height on the paragraph element by just 0.1 or 0.2 play with it a little bit and see the difference, besides that great job and well-structured code.

    0