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.
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.
Speaking of which, night night 🙂