Design comparison
Solution retrospective
I'm proud that i was able to complete this challenge without any help.
One problem is that on the GitHub pages the illustration won't show on that page. but locally it works just fine. If you have any idea why please let me know!
What challenges did you encounter, and how did you overcome them?I encountered a few problems getting the javascript to work, but I could use the MDN docs to see that I was not using something right. For example, I was doing element.background-color. when it should be element.backgroundColor.
What specific areas of your project would you like help with?I would love help with the problem mentioned above about the illustration. Also, I feel like I wrote some of the javascript a bit inefficiently so any tips on how to improve that would be useful.
Community feedback
- @nathaliaifPosted 4 months ago
Hey! Congrats on finishing the challenge!
If you add a dot '.' in front of your path, like this:
./assets/images/illustration-empty.svg
, or remove the first slash in your path:assets/images/illustration-empty.svg
, the image will appear again.The dot and the 'assets/images/...' means "current directory", so the browser looks for the 'assets' directory relative to the current location of the HTML file.
Using the slash '/' in front of the path tells the browser to look for the 'assets' directory starting from the root folder (the root of your website), which locally works, because the root is where your index.html is in your folder. However, in a deployed environment, your project might be hosted under a subdirectory or subfolder, and the browser won't be able to find your image from there.
I found a StackOverflow post that explains it better. And here's another link that talks a bit more about file paths.
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin 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