Whether it’s a typo in the img tag source, or the image itself was misplaced or removed on the server – images break all the time on the web. The problem is, the browsers default way to display a broken image is really ugly. You can fix that and actually use it as an opportunity to enhance the user’s experience on your web pages with CSS! That’s what you will learn about in this lesson.
⭐️Files you need ⭐️
💻Useful Broken Images Code: https://www.dropbox.com/sh/1pceu4wvrzadsgg/AACHHW3sJMJrcCI5B5eazAnga?dl=0
💻All tutorials in this series need this “_theme-styles” directory (only download once): https://www.dropbox.com/sh/890hx6ke34oovaz/AAByJ-jb-H5pWuIUx7t_GvQqa?dl=0
This video works as a stand-alone tutorial but is also day 5 of CSS3 in 30 Days. For the rest of the series, check out this playlist: https://www.youtube.com/playlist?list=PLWKjhJtqVAbl1AfjiGyYxwpdAPi5v-1OU
CSS3 in 30 Days is developed by Brad Hussey. Check out his website for more great tutorials: https://codecollege.ca/
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://medium.freecodecamp.org
And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp
This Post Has 18 Comments
Thx for the series
You are doing a great thing here
How does it only applies when there is a broken image and not to all…?
I love this series, really what i need. Takes the CSS to the next level 😀 Thank you so much man! <3
In my opinion, it can be dangerous to over-style your broken image placeholders. It's so unusual. Users are so accustomed to having the default broken images, that they might not even understand custom ones. They might think that a custom placeholder is the actual image, and that it's a fake image / joke image, rather than a broken link.
You might actually miss out on some bug reports too, since people might not think of these images as "broken" any more.
Please do one video on explaining pseudo elements
what if the noimage.png failed to download too?
This only works in several optimal cases, like a particular image that you know you styled in a certain way. Adding an image width or height breaks the design and you can never be quite certain the 'not found part' will not overlap some element of the page. It's too bad there is no CSS general support for styling the not found image, I would have thought at least a CSS selector for ::notfound or ::loaderror would have been obvious for such a common scenario. (something like this: https://stackoverflow.com/a/21149286/4572240 )
Also, I though you should explain why this doesn't break images that load correctly, as many others notices.
Thanks for the series, it's nice.
When did brad define . image class in the html markup?
it doesn't work in safari… the display of the broken image is different
Thanks, amazing tutorial
Awesome tip for future projects! Loving this series!
I am following your series and I must say its helping me a lot in learning.
He looks like David Beckham, doesn't he?
I tried multiple times, but these styles are not working. 😔
Business Opportunity in Ruvol
I have invented a Board Game [still unpublished and not yet out in the market] that I believe is guaranteed to be as challenging and exciting as CHESS. I called it “RUVOL.”
It is my hope that one day Ruvol may surpass chess as the “Number One Board Game in the World.”
The weakness of chess is it always starts in fixed positions that the opening moves become “memorizable.” In fact, not a few have so mastered the moves that they can play against their opponents “blindfolded.” It is for this very reason that the great Bobby Fischer introduced his so-called “Fischer Random Chess,” where the starting position of the pieces is “randomized” to make the memorization of openings impracticable. Fortunately, it is also for this reason that I invented Ruvol where “every game” has been calculated to be a challenging one to play.
HOW IS RUVOL PLAYED and HOW YOU CAN MONETIZE IT?
I detailed everything in my YouTube video. Here is the link: https://www.youtube.com/watch?v=jcqth0m3-R0
BIG MONEY POTENTIAL IN RUVOL!
It is worthwhile to note that the people who play chess will be the same people who will play Ruvol. In my Google search, I learned there are around 800 million chess players in the world. Even just a small percentage of these 800 million is good enough to earn big money from Ruvol either as an ONLINE GAME BUSINESS or as a PHYSICAL PRODUCT DISTRIBUTOR.
You may contact me at: email@example.com.
Thanks and God bless!
RODOLFO MARTIN VITANGCOL
The Ruvol Inventor