July 26, 2016

Problem Solving is The Name of the Game

My first official post stemming from pure bafflement. You know when everything is going swimmingly and then all of sudden it isn't and you feel like this:

Ryan Gossling Gif

(I mean I guess we may all feel fine if we were Ryan Gossling, but I digress)

Tonight when working on my homework assignment for Bootcamp, I realized that my code for my webpage wasn't loading changes I had made in the browser and yes I did save my code and then reload in my browser. I am sure it is a simple fix (it usually is) but for sake of the exercise I am going to blog as I am working through this (yes a live blog of sorts:).

The Issue:

  • My code, specifically the recent changes made to the CSS is not showing up in the browser.
  • The strange thing is that all of the current CSS stylings appear just fine, it is only when I attempt to add new stylings does it not show up.
  • I have verified this using Chrome's Inspect element (right click + Inspect) and look for the change just made and it isn't there.
  • Another weird issue is the HTML file reflects changes in the browser and the CSS file is linked correctly but the CSS won't reflect updated stylings... so weird!!!

Diagnosing the problem:

  1. First I made sure I was saving locally all HTML and CSS files and also re-loaded the browser,

  2. Then I used the CSS validator and no errors where found.

  3. So it is not in the CSS code, perhaps I am not saving correctly or my Submline Text editor was not talking with the browser correctly, so I googled.

  4. Simultaneously I went to our Slack channel to see if discussion and community assistance would help, and it did give me some direction... thank you M/W July class!

  5. The cohort help combined with a test revealed the problem:

  • The test: I re-saved the .css file as a different name in correct same directory, re-linked in HTML and tried to refresh in browser but this time it erased all previous CSS leaving me with just HTML. Then I looked at the file path directory and discovered the issue.

The Fix:

Turns out I was editing a style.css version that was in the incorrect directory as referenced by my html. There was an older version in the correct relative path which is why it kept the previous stylings. So all I had to do was re-save my current style.css in the correct directory and it worked...magic!

Lesson learned, it is all in the small details and always watch out for simple errors (they will drive you crazy).

Now I feel like this:
Success