Skip to content
Submitted 26 days ago

Blog Preview Card

Mahenaj Tabassum•30
@mahenajT
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 specific areas of your project would you like help with?

Feedback on improving the hover effects and tips for creating more efficient, maintainable CSS would be greatly appreciated!

Community feedback

  • Kamran Kiani•1,280
    @kaamiikPosted 26 days ago

    Hi. Congrats for doing this challenge. I noticed some points I wanna mention here:

    • For each project Use only one repo on GitHub. I see lots of folder in your repo that is wrong I think.

    • You can check most of the pages and see they have a structure like this:

    <body>
  <header>...<header>
  <main>...<main>
  <footer>...<footer>
</body>

    Based on your design you may have header and footer or not. But You should have a main tag inside your page. So after your body always wrap all of your code inside a main tag. In this design you do not need header and footer.

    • Elements that have hover effect are interactive. So because you have hover effects for your h1 then It needs to be a or button. Now you have too choose between a and button. If the element take you to a new page It should be an a tag and If do an action like submit a form or add to cart then It should be a button. In your challenge you have h1 and inside the h1 you have to wrap it into a interactive element too.

    • Heading levels should increase one by one. Here in your code after h2 should be h3.

    • You do not need to have <br /> tag in your p tag. It's more clean and robust to let the browser based on screen size, container max-width, font-size and other factors wrap the text or not. You only need max-width for your container because it prevents elements from stretching beyond a certain point, keeping them visually appealing across different screen sizes. It ensures your design remains adaptive and doesn't get too wide on larger screens.

    • Use min-height: 100vh; instead of height:100vh;. height: 100vh strictly limits the height to the viewport size, potentially causing overflow issues if the content is larger than the viewport. On the other hand, min-height: 100vh allows your element to grow in height if the content exceeds the viewport size.

    • Try to use a proper CSS reset at the start of your CSS style. Andy Bell and Josh Comeau both have a good one. You can simply search on the internet to find them.

    • Your font-size and max-width should be in rem unit not px. You can read this article about it and why you should not use px as a font-size.

    Marked as helpful
    1
    Mahenaj Tabassum•30
    @mahenajTPosted 26 days ago

    Hi @kaamiik,

    Thank you so much for your thoughtful feedback! I truly appreciate the time you took to highlight areas for improvement.

    I will streamline my GitHub repository to use only one for each project and ensure that my code is wrapped in a <main> tag. I now understand that the h1 tag should be an interactive element, and I will be more mindful of maintaining proper heading levels.

    Additionally, I will avoid using <br /> tags, switch to min-height: 100vh;, and use rem units for font sizes. I will also consider adding a CSS reset.

    Thanks again for all your tips! I’m excited to apply them in my upcoming projects!

    0
    Kamran Kiani•1,280
    @kaamiikPosted 26 days ago

    Your welcome @mahenajT I strongly suggest that first refactor this project and test it and after you did this completely then go for the next project. Refactoring your project is a key factor in each challenge you start and finish.

    Marked as helpful
    1
    Mahenaj Tabassum•30
    @mahenajTPosted 26 days ago

    Thank you, @kaamiik! I appreciate your advice. You’re right—refactoring is essential. I will focus on refining this project before moving on. Thanks again for your encouragement and guidance!

    1
  • Jack Perez•90
    @jmprzPosted 26 days ago

    Hello! Good job for completing the challenge!

    • For hover effects, you can put these inside your CSS .bottom h2:hover { color: var(--Yellow); }

    • Looking at your CSS file, it looks great to me but you need to include semantic elements in your HTML like the <main> <article> <section> etc.

    Here some example HTML Semantic Elements

    Marked as helpful
    0
    Mahenaj Tabassum•30
    @mahenajTPosted 26 days ago

    Hello @jmprz, Thank you for your feedback! I appreciate your suggestion about the hover effects.

    I understand the importance of using semantic elements, such as <main>, <article>, and <section> tags, to improve structure and accessibility. I will certainly incorporate semantic HTML in my future projects.

    Thanks again for your insights!

    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