15: The home straight(jacket)

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.

Flowchart from HTML5doctor.com showing sectioning content elements
The HTML5doctor will see you now

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.

Screenshot of My Work section with PriceRunner video
Responsive layout of the My Work section with embedded video

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!

Screenshot of Google's mobile-friendly checker tool giving the all clear
Computer says… yes!

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.

Error message showing that an <a> tag can't be used around a <video> tag
Oops, I can’t use an < a > tag? Drat.

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.

Screenshot showing Firefox putting a play sign over the top of the existing play sign in the image
Firefox being helpful but giving me a new problem

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 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *