We left off with turning some errors green. You can find the site we’re working on here. Once we got the bootstrap reference link to work, all of a sudden the site started to look like something real. It still needs some work though. This is where we’re at…
Let’s check out the console to see what errors we still have…
Welp. Still a lotta red! Let’s dig back in and tackle some of these errors. Starting with the first error:
Failed to load resource: net::ERR_FILE_NOT_FOUND – conversion.js
So this error is telling us we’re missing a conversion.js file. Going back to our index.html file (or the view page source at carbonfive), we can find that the js file has something to do with Google Analytics. We don’t need analytics for our purposes, so we’re just going to delete that whole script from the head. If you’re following along, the script starts just after the script for app.js and ends just before the closing head tag. Delete it all!
Now when we refresh our local index file in the browser, that error is gone. Our next error is for file:///images/square.png. Looking at this link, right off the bat, there are too many forward slashes after ‘file’. Also, we don’t have this file! If we go into Chrome’s Dev Tools (command + option + j), and go to ‘sources’ we can see the images folder and the images within. If we click and drag an image into its own tab in Chrome, we can see that its hosted on carbonfive. All we have to do is prepend the reference links for all images with ‘http://carbonfive.com’ and we should be good to go. Find the square.png img tag in your index.html file and add it. That should take care of that error.
Looking at most of the other errors, we can find them to be the same in nature. We just have to complete the previous step for all images referenced in the our index.html and app.css files. If you’re using Atom as your text editor, you can click just before the forward slash on the image you want to change. Then hold down the command key do the same to every image you want to change. Now we can change them all at the same time!
After refreshing our local html page in Chrome, there are significantly less errors! Sweet!
We just kicked those errors asses. The site is really coming along now. Let’s meet back here next week for the third and final installment. Until then, CHEERS:)