Submitted 9 months ago

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

Jomar Perez• 30

@JPerez03

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Blog preview card

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Community feedback

Melvin Aguilar 🧑🏻‍💻• 61,220

@MelvinAguilar

Posted 9 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!

Jomar Perez• 30

@JPerez03

Posted 9 months ago

Thank you for the tip @MelvinAguilar

raya• 2,850

@rayaatta

Posted 9 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😉

Jomar Perez• 30

@JPerez03

Posted 9 months ago

Thanks for the tips @rayaatta

Please log in to post a comment

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