The finish line is looming so I’ve been busy putting the final polish on my site. As per Marcus’ request I’ve taken out all the <br> tags and replaced as many of the <div> tags as I can muster, as well as getting rid of any superfluous code I can find. I used the elements index on HTML5doctor.com to help with this, as well as the flowchart below.

I’ve restructured the My Work section to make it as responsive as possible, which took a lot of fiddling about with it, but it’s now working pretty well.

I’ve also embedded all my videos, with a little advice from this article on videos from Mozilla and this article from W3Schools. Plus, I embedded a new font for my h4 tags and main navigation. I used ‘Intro Rust Free’ from Font Squirrel, which was a little trickier to install than a Google font, but I figured it out by watching this tutorial from Font Spring. There really is a huge amount of information online to help with this sort of thing, as long as you know where to look.

I’ve also added in a reset sheet from Meyerweb to help iron out any browser inconsistencies and I’ve created favicons to suit all devices using Favicomatic. I tried other tools first but this was the only one I found that enabled a transparent background.

After I’d done all that I thought I’d better run all my validation checks again and passed the accessibility and CSS ones with flying colours. I also tried Google’s mobile-friendly checker and got the all-clear – yippee!

However, HTML was not so hot – 17 new errors had appeared. But when I looked in detail they were pretty easy to fix. The one I did struggle with was the below video error. I couldn’t work out how to link the poster image to the video without using the <a> tag.

I sent this question to Marcus, along with a few other bits and bobs like formatting and hosting issues. He told me I would need some Javascript for this – yikes! He helpfully sent me an example he had put together so I’ve been trying to follow that to make mine work but no luck yet.

Using his responses and engaging my old friends Trial and Error, I managed to fix most of the other problems. One new issue that I’ve just noticed is a difference in Firefox. The video play button appears automatically on each of the videos and they play within their boxes nicely there rather than opening a new tab. As I’ve superimposed a play button over the top of the poster images they now have two ‘buttons’ so I need to figure out how to hide that or show a different poster image on Firefox browsers.

I’ve also added some Javascript form validation, based on examples I found online and a little help from my buddy Jon Duckett and his Javascript & JQuery book. Of course it doesn’t work though. Why would it? Nothing ever does until at least half a day of tearing my hair out has been done. Somehow an answer generally appears from the ether though so I can’t lose faith. I find after a while I get too tired of focusing on problems like this and start to break things, so I need to know when to stop and hang up my divs for the night.

Speaking of which, night night 🙂