Skip to content
OverviewSolutions
3
Comments
3
Ahmed-Abdul-ghaffar
@Ahmed-Abdul-ghaffar

All comments

  • Ahmed-Abdul-ghaffar•70
    @Ahmed-Abdul-ghaffarPosted 14 days ago

    Hi, great job with the layout of the page! 👏 Here are a few suggestions that might help improve the project:

    1. The bottom margin of the last social link is a bit large; consider reducing it. If you're unsure of the exact size in the design, you can use the pixel perfect extension to help align it more accurately.
    2. the color of the background is hsl(0, 0%, 8%) as mentioned in the style-guide file
    3. You can replace the author’s image with your own and customize the project to reflect your personal profile.
    Marked as helpful
    1
  • stephany247•170
    @stephany247Submitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    I’m proud of implementing responsive design and accessibility features in the blog preview card, enhancing user experience through semantic HTML5 and clear hover and focus states.

    Next time, I’d focus on refining the design based on user feedback and experiment with more advanced CSS techniques for layout control.

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

    I faced a challenge with embedding an already downloaded font into my project. To overcome this, I researched the correct @font-face syntax and adjusted the paths to ensure the font files loaded correctly.

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

    1. Accessibility: How can I improve accessibility for screen readers in my project?

    2. Font Embedding: What’s the best way to ensure the custom fonts I’ve downloaded are properly embedded and displayed in my project?

    Responsive Blog Preview Card using Semantic HTML, Flexbox, and CSS Cus

    2
    Ahmed-Abdul-ghaffar•70
    @Ahmed-Abdul-ghaffarPosted 29 days ago

    hi, nice work with creating the challenge and overcoming the challenges you faced, Here are some advices ..

    1. To improve accessibility for screen readers in your project, you can consider the following tips:
    • Use Semantic HTML: Ensure you're using appropriate HTML elements for structure and meaning. Elements like <header>, <nav>, <main>, <article>, <section>, and <footer> help screen readers understand the page structure better.
    <header>
  <h1>Blog Preview Card</h1>
</header>

    and the better thing here in frontend mentor give an alert in the accessibility report if you did not use <main> in your project.

    • Add alt Text for Images: Provide meaningful alt text for images to describe their content to users who rely on screen readers. For decorative images, you can use an empty alt attribute (alt="") so screen readers will skip them.
    <img src="author.jpg" alt="Photo of Greg Hooper, the article's author">
    • Use Headings Hierarchically: Organize your content with proper heading levels. For example, start with <h1> (and include only one), followed by <h2>, and so on. This helps screen readers provide context for the content structure.

    and you can check this for more details: https://www.w3.org/WAI/standards-guidelines/wcag/

    2.As for your second question:

    • as you did with your project, you should use @font-face rule and make sure you include different font formats (e.g., WOFF, WOFF2, TTF) to ensure cross-browser compatibility.

    • Font Formats: Use WOFF and WOFF2 formats as they are optimized for web usage, providing good compression and wide browser support. TTF and OTF are also commonly used but less efficient for web performance.

    • Include Fallback Fonts: Always specify a generic fallback font in case the custom font fails to load. This ensures that the text is still readable, though with a different font.

    body {
  font-family: "MyCustomFont", Arial, sans-serif;
}

    • Optimize File Sizes: Custom fonts can increase your page load time. Compress fonts to reduce file size and ensure faster loading, especially for mobile users.

    • Use Font Subsetting: If your custom font contains many characters that you don’t need, consider subsetting the font to only include the characters used on your website. This can significantly reduce file sizes. and you can do it with this project as it's very simple and dosen't need many character set.

    and finally with the design, I think there is no any changes when hovering on "HTML & CSS foundations" except its color will change but the box-shadow should still fixed

    0
  • ilyesfennour•60
    @ilyesfennourSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    It was an easy task to accomplish. Enjoyed it very much.

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

    a space between the image and the text. I added a display: flex to their parent to remove it.

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

    I'm having an issue with the spacing between the image and the text. When I add a display block to the box (content), with margin and padding set to 0 for the text and the image, I still end up with a 4px space that I can't figure out how to remove.

    QR code

    2
    Ahmed-Abdul-ghaffar•70
    @Ahmed-Abdul-ghaffarPosted 3 months ago

    Hello there, great job on completing the challenge!

    I have a few small suggestions that I believe could enhance the professionalism of your code:

    • Semantic HTML: It's a good practice to use elements like <article> to wrap your content. This not only helps with semantics but also makes your code more meaningful and accessible. For example:
     <body>
    <div class="container">
      <article class="qr-component">
        <img
          class="qr-component-img"
          src="images/image-qr-code.png"
          alt="qr code image"
        />
        <h2 class="qr-component-title">
          Improve your front-end<br />
          skills by building projects
        </h2>
        <p class="qr-component-title-description">
          Scan the QR code to visit Frontend<br />
          Mentor and take your coding skills to<br />
          the next level
        </p>
      </article>
    </div>
  </body>
    • CSS Class Naming: In larger projects, it’s helpful to use clear and descriptive class names in your CSS. This makes your code easier to read and understand without constantly referencing the HTML. Here's an approach that can improve clarity:
    .qr-component-img {
}
.qr-component-title {
}
.qr-component-title-description {

}
.qr-component {

}

    That's all I have for now. I hope you find these suggestions helpful.

    Keep up the great work and happy coding!

    Marked as helpful
    1