14: iFrame it on me

Here’s a great example of getting one thing working only to break another:

Screenshot of contact section with the contact form out of place
Contact form off on a wander, not to mention the footer…

I managed to implement an iframe to pull in Google Maps but this knocked my contact form off into a strange position. I tried changing the widths of all form elements and played with the margins and padding but it didn’t make any difference. Just for fun the footer also moved itself over to the righthand side to float in midair. This is typical of my experiences on this project.

In keeping with HTML5 semantic protocol, I added hCard tags to my address details. I used this handy hCard tool to create the code.

Screenshot showing HTML code with hCard address tags
Adding hCard tags, inexplicably called vcard in the code

Eventually I managed to fix the wandering contact form by using ‘box-sizing: border-box’ so the padding was added inside the box. I decided to revert back to my original background image as I got permission from the copyright owner. I think this image of the beach huts is a bit more colourful and interesting than the pier shot I was using.

Screenshot of the Contact Me section with beach huts in the background
What could be more Brighton than garish beach huts?

At this point it seemed like a good idea to do some validation checks on my code to make sure there were no howlers. I ran my HTML through the W3 validator and it identified a few issues. It pointed out that I hadn’t included alt tags on my images, so I reminded myself how to add alt tags at W3 Schools.

There were a couple of issues that I wasn’t sure how to fix but Marcus kindly helped me with these in class. Like this problem with my <main> tags and a <div> being in the wrong order, and an issue with the pipe symbol in the Google fonts code, which we also resolved.

Screenshot of HTML validation errors
HTML validation errors

Next I ran accessibility checks with AChecker, which turned up some problems with the structure of my h tags. This required them all to be reordered as my h3 tags were appearing in the code before h2 tags, and h4 before h3. It was a bit fiddly swapping them all around and it did break a few things which I had to go back and fix, but it was nothing insurmountable.

Lastly I ran the W3 CSS validator checks and bingo – no errors!

So after a bit of fiddling and fixing we got to this happy place:

Screenshot of HTML validator showing no errors
HTML validator
Screenshot of Accessibility validator showing no errors
Accessibility validator
Screenshot of CSS validator showing no errors
CSS validator

I’m sure more issues will pop up as we go but at least for now there’s nothing major – phew!

Several other students presented their websites in class this week, which were all amazing. It was clearly only the more experienced developers who were happy to present their work, I definitely wasn’t game to show my amateurish site after seeing some of the others with 3D animation and all kinds of crazy stuff. Marcus spent some time with me on a one-to-one basis to help me with the html issues and to give me some feedback on changes he wants me to make in the code, like removing all the <br> tags and changing some of the <div> tags to other more semantic elements like <section> and <header>. This will be my next task, along with fixing up all the links to the work examples and making some structural changes to make the site more responsive. I think I need to move the code around in the My Work section in order for the boxes to stack nicely on top of one another, so that is going to take some work.

Then of course there’s the dreaded J-word to think about…

Leave a Reply

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