Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Card using CSS

Hghmaazā€¢ 20

@Hghmaaz

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

im very proud that i have done this much.

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

i had challenge with the fonts. but somehow succeeded, the main challenge is that the article.svg file was not working so i had to convert the svg file to png. it was working on my live server but its not working when i hosted it

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

i need help with the illustration article. i converted the svg file into a png file. still i have the files in my directory. but its is not loading anyway. i've tried what i can. if anyone have any idea about this please leave a comment

Community feedback

Daniel šŸ›øā€¢ 44,230

@danielmrz-dev

Posted

Hello @Hghmaaz!

Your solution looks great!

I have one suggestion:

  • When using the tag <img>, make sure to set the correct path, otherwise your code won't be able to find the image. And if your code can't find it, it won't show.

šŸ“Œ This is your code:

<img src="/illustration-article.png" alt="illustration-article">

šŸ“Œ And here's the update with the correct path (you placed the image and the index.html file in the same directory):

<img src="illustration-article.png" alt="illustration-article">

I hope it helps!

Other than that, great job!

0
P
Dominick McKoyā€¢ 220

@mckoyd

Posted

Looks good, but it seems to be missing the illustration image upon deployment. Consider checking the path of the html image element's source attribute (maybe ./illustration-article.png instead of /illustration-article.png).

Also, consider using a BEM methodology to add classnames to all your elements: see https://getbem.com/introduction/. It may seem like a hassle but it makes life a dream when dealing with stylistic changes and keeps your code organized.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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