Craigs Portfolio

HND College

This is my portfolio work from doing my HND in Motherwell College.

Music Online

Music Online - Mockup

Built with HTML, CSS, PHP & MySQL – Framework Bootstrap 4.

This was my first project for my HND.  It was taking our PHP & MySQL knowledge from the HNC and expanding on it to build a website where a user can register, login and upload data to the database and have it appear when searching.

This website was a complete nightmare to begin with as I learned Bootstrap 3 the year before but Bootstrap 4 was released in between.  With many big differences in classes as it went from grid to flex.  So after this learning curve I find 4 is alot better than 3.  I still however made the same mistakes with container as the previous year to fix it on Jo Smith project.

 

The main aim for this project was to gear us for our graded unit project.  I had alot of fun and frustrations with this website with the PHP not quite doing what I wanted it to do.

Music Online - Mockup
Obanshire - Mockup

Obanshire - Beaver and Scouts Club

Obanshire - Mockup

Built with WordPress.

We were given a design project to make a home page and badges page for a company called Obanshire, who are a Beaver & Scouts Club.

I chose to make my design in WordPress rather than Adobe Suite as I decided it was quicker for me. I used a theme and changed elements and the colours.  This was before my experience in WordPress Commercially. I created the logo in PhotoShop and built the Home and Badges pages.  The other pages are demo for the theme but were required for the navigation menu.

Jo Smith Photography

Jo Smith Photography - Mockup

Built with HTML, SASS, & JavaScript – Framework Bootstrap 4.

We were asked to develop a website for a brief based on Jo Smith who works in photography.  The point of this exercise was to use tools which we have not necessarily used before and try new things.

I had alot of fun doing this assessment. I was introduced to Trello, SASS, API’s, Ghostlabs and Grunt.  I planned on using alot more technologies but I ran into some issues in doing so.  I found one of my favourite tools to use is SASS.  I also love Ghostlabs for testing as its not just applicable to traditional coding.

Jo Smith Photography - Mockup
Jigsaw Hero Game - Mockup

Jigsaw Hero

Jigsaw Hero Game - Mockup

Built with HTML, SASS, JavaScript & jQuery.

As part of the JavaScript/jQuery module we were tasked to create a game for a kids age range.  We were given a few months to plan and develop the game and kids would come in early Feb and test the game for us.

I choose to create my own jigsaw game aimed at kids from 4-6 years old. I completely missed the age range as I worked out that some kids of this age cant work a mouse and other than my very easy puzzle, their quite difficult for that age range. This brief taught mea great deal when it comes to testing which has changed my views on throughout testing projects going forward.

The background on this might seem a little bit quirky as it is set to a random in an array.  There were certain requirements to be met to complete the module so this is one of the quirks.

Note. The game can break as I found during the kids testing, some pieces can be dropped on the wrong tile which is a fatal error.  Also required to double click the facts for them to show the first time.

New Rhythms For Glasgow

New Rhythms For Glasgow - Mockup

Built with WordPress – Using Elementor.

This is my graded unit project for my HND where I received an A (91%).  We were given a choice of briefs of NRFG which is a charity website or a Design website brief aimed at children.  As I had issues with the game target range and work commercially in WordPress, I choose the charity website.  This was my first website built using Elementor in WordPress.

I had a lot of fun making this site and I tried to incorporate everything from the brief but sadly as was unable to do so and had to choice between the Give a Gig functionality and the limit on classes due to plugin confliction.  So I dropped the limit to classes option as could incorporate more overall to the site in doing so.  As I am using WordPress most of the plugins have limitations as they are free.  I found this website is very bulky due to this.  Commercially this site is easily made with Premium Elementor and a Membership plugin with less bulk.

I learned alot about WordPress websites through this project, limitations and security.  It also took me some time to work out the project was based on my time management and not design/development.  I did have alot of fun making this website and learning how to use Elementor effectively including using its bugs to my advantage.

The charity also approached me after this website and asked me if they could use it as their own website. I sent them the ftp of this website and set it up for them in July.

New Rhythms For Glasgow - Mockup