16: Done and dusted

That’s it, finito. My project is complete and I’m on the verge of submitting it. I can’t believe I’ve made it to this point without being carted off by men in white coats. This project has pushed my patience and tenacity to the brink, but I’ve got through. Now I just have to cross everything and hope I pass. Finally, here is my portfolio website that’s given me so many nightmares.

I’ve tidied up the final few problems I found and created a print style sheet with the help of this article from Smashing magazine. I got around the Firefox problem by removing the poster images for two of the videos and removing the play button image from one poster that I wanted to keep. Hopefully this works ok. Sometimes things seem to work differently when I’m looking at them locally to when they are being properly hosted. I also created webm versions of the videos and uploaded them onto YouTube so I could provide links to them in the print stylesheet, as well as Google Drive links for the other two documents. Creating the print stylesheet was trickier than I expected but I think I’ve got it pretty much nailed down now, with a bit of help from my tutor Marcus.

Screenshot of the print view of my website
Who the hell prints webpages anyway?

One other little niggle I noticed was the navigation links opening new tabs rather than just moving down the page in the same tab so I got some advice on linking from SimpleHTMLguide.com.

I’ve added some blog plugins too. One called All in One SEO pack seems quite handy as it has enabled me to easily add meta titles and descriptions for each blog post. I’ve also implemented a security plug-in called Wordfence and a fun little one that shows randomised lyrics from Hello Dolly when in admin view (I’ve got the charming “You’re lookin’ swell, Dolly” at the moment). I’ve also added a social media plugin which places icons on every post linking to Twitter and LinkedIn. I’ve done quite a bit of other customisation, like adding an About Me page as the homepage, adding an extra page of references and resources, creating a Kateblog logo and favicon, and adapting the colour scheme, header art and other aspects of the appearance. I found some quite nice header images on Free WordPress Headers so I’ve set them to run in a randomised fashion to add a bit of colour and keep it interesting. It’s been fun to learn how WordPress works, it’s definitely much easier to use than most content management systems I’ve come across in my career.

I did a final run through of all the validators after uploading all my files to the W drive for hosting and mostly it was fine, but the accessibility checker came back with some strange results. When pasting in the html code it showed no errors but when checking it based on the live link it identified a load of colour contrast issues. Looking at the examples it showed, these were not real scenarios. It seemed to be mixing up colours between the separate stylesheets. I went through individually and checked the contrast of all my text and background colours using Colorzilla to select the colours of specific sections of my background images and compared them with WebAim’s colour contrast checker:

Screenshot showing my text and background colours passing the contrast checker
Colours are good to go

After I’d done that I realised that the problem was the media information was missing from the html code for each stylesheet. So simple and so much time wasted at the 11th hour. At first this messed up my print stylesheet but I’ve managed to fix that and eventually it looked better than it had before. I also added some additional media queries to increase the font size for screens smaller than 500px wide.

So now I’ve finished I have a little time to reflect on how I feel I’ve done in achieving the learning outcomes:

1. Understand the technologies underlying the web

I assume this means the languages we’ve been learning. I would say I’m feeling pretty good about HTML and CSS in general. Obviously I still have a lot to learn but it’s started to click in my brain how it all fits together. I think I could figure out most (not too complicated) things with plenty of time and the internet as my right hand man (or woman). Javascript, however, is a whole different ballpark. This hasn’t clicked for me at all yet. It seems much less intuitive than the others, which frankly are not that intuitive. I guess I need to immerse myself in it properly, but I feel like I want to get more polished in HTML and CSS before I commit myself to any other languages. I’ve managed to throw a bit of JS code in to my site to fulfil the brief but that was really by copying other examples I found rather than through a full understanding of how it works as a programming language.

2. Appreciate and apply fundamental web design principles

I hope I understand this fairly well, although I don’t feel like we really covered design principles particularly in this course as we were more focused on the technology behind the design. For my site I’ve used a longer scrolling page with three separate content sections rather than separate pages, as that’s the more common style these days. I’ve also used large background images in two sections, which is also a current fashion in web design. I’ve split the mid section into two columns and laid everything out as clearly as possible with good contrast of colours and consistent elements. I’ve adopted common patterns that are familiar to users to help them use my site as intuitively as possible. Overall I feel like I have a good grasp of the principles of web design.

3. Create well-formed, accessible and standards-compliant web pages

I guess well-formed is a matter of opinion. One thing that is clear is there are multiple ways to achieve the same thing when it comes to web dev, and various schools of thought on the right way to do them. For instance there are differences of opinion on <br> tags on Stack Overflow but we’ve been told to never use them on this course. Another example is the Smashing magazine article I mentioned above. This gives an alternative method of producing a print stylesheet by using media queries, but we were briefed to produce a separate print stylesheet. I guess once we’re out in the wild we can figure out what works for us as individuals, while working within the framework of best practice. When it come to accessible and standards-compliant, I think I’ve achieved that with my site. I’ve passed all the standard HTML, CSS, accessibility and mobile-friendly tests. I also ran a site test on the Nibbler tool, which showed my site to have a 9.7 out of 10 rating for accessibility and 8.8 for quality of design and build. To do this I had to temporarily host my site on a friend’s server as Nibbler doesn’t like long URL strings.

4. Apply basic client-side scripting

Yes I have achieved this, although as I’ve mentioned I don’t feel at all confident in Javascript. I guess I know enough to have made the two bits of functionality that I’ve used Javascript for to work (form validation and video playing on click), so that hopefully fulfils the brief.

Overall I have found the process of learning these skills worthwhile and I’m glad I’ve undertaken this course. If I was doing this over again I would approach things slightly differently. I would make sure I had completed more online tutorials before starting the course so I could hit the ground running. I would also start creating my own site from the get-go, even if it looked like crap to begin with. This would give me more opportunity to ask questions and figure things out as I go, as so much of my learning has been done by trial and error.

I plan to continue to build on what I’ve learned on this course and keep improving my development skills in the coming months and years. I know that whatever area of the digital industry I end up working in, this will always be useful knowledge to support my career.

Thanks for reading, over and out 🙂

Leave a Reply

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