This was a college assignment given during the first year of my Applied Computing foundation degree, and is one of my best achievements to date. It is a fictional web hosting website that plays on my personal wishes to provide web hosting as an option for clients.

The brief for this was as follows:

Using your designs from Task 1 create and develop an integrated set of web pages. Make your site as interactive and interesting as possible.
You should show appropriate use of as many html5 and css3 elements and attributes as you can e.g.

  • Linked external css with as much formatting as possible especially for layout of web page using the new html5 elements
  • Lists, ordered, unordered or description (not just used for navigation hyperlinks)
  • A range of fonts, font sizes, colours and emphasis on text
  • Tables using more advanced features if possible
  • hyperlinks
  • Image Maps linking to at least three areas
  • Borders – could show rounded edges
  • Suitable images
  • Suitable navigation
  • A form for inputting data using different elements
  • QR code
  • an audio element
  • a video element
  • canvas
  • The use of scripting language such as JavaScript
  • Basic standards for web design.

Most of this was coded through a combination of lessons (for me, this was upgrading my existing experience to HTML5), and researching online articles, as well as using self-teaching books on the relevant code (mainly JavaScript).

I used snippets of code from other websites to help me build the more advanced elements (jQuery accordions, JavaScript that helped the video interact with the canvas), but made this clear through the comments and demonstrating the website to my tutor. Elements such as accordions and use of FancyBox weren’t included in the brief; I added them to make the site more interesting because I felt confident in my abiltity to do so. I also used one of those to find an appropriate use of the audio mentioned in the brief; one snippet of code I found was a way to play audio when clicking a link – I used this in the accordions, so when the user clicks to expand, a sound plays.

The navigation menu is pure CSS3, although it is slightly buggy. The columns on certain pages display oddly in some browsers. I am also aware that information is repeated on a couple of pages. These points were mentioned in the evaluation we had to give as part of this task.

The grade earned for this website was 95% (61/65), and was accompanied by the following feedback:

Excellent website I cannot fault you on this and you have included everything that was asked for and more besides. Keep up the good work.

The website has been uploaded to my own server and is fully operational.

Leave a Reply