Skip to content
Submitted 11 months ago

I'm using basic CSS and HTML for Blog Preview Card

Jomar Perez•30
@JPerez03
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

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted 11 months ago

    Hello there 👋. Good job on completing the challenge !

    I have one suggestione about your code that might interest you.

    • Update the height to 100vh to use 100% of the screen and center it correctly. If your concern is that it generates a vertical scrollbar, you should use margin: 0 on the <body> element because this tag has a default margin. Another more modern option is to use a CSS reset to ensure you don't encounter style issues.

    I hope you find it useful! 😄

    Happy coding!

    0
    Jomar Perez•30
    @JPerez03Posted 11 months ago

    Thank you for the tip @MelvinAguilar

    0
  • raya•2,870
    @rayaattaPosted 11 months ago

    Hi jomar Prlerez,👋 congratulations completing your second challenge

    I have read through your code and here are some suggestions you might need.

    1.In html the id attributes are not extensively used because they cause specific issues but let me go on with other more important stuff.

    2.for semantic reasons I recommend you change <h2 id="htmlfound"> to <h1 id="htmlfound">

    The <h1> to<h6>tags are used to define HTML headings. <h1> defines the most important heading. <h6> defines the least important heading. Only use one <h1> per page - this should represent the main heading/subject for the whole page. Also, do not skip heading levels - start with <h1>, then use <h2>, and so on.

    3 To

    #imgIllustration{
    margin: 2vh;
    border-radius: 1lvh;
    /*Replace "display: flex;" with*/ display: block;
    max-width:/* replace 40vh; with 100%*/
}

    Also add this to your css

    * {
box-sizing: border-box;
}

    In addition since the illustration image is decorative its alt attribute should be left empty i.e alt=" "

    I hope this helps

    Happy coding😉

    0
    Jomar Perez•30
    @JPerez03Posted 11 months ago

    Thanks for the tips @rayaatta

    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