Dons Discs

Over the last couple of years, me and my dad have been into buying and selling records on eBay. We buy job lots and go to car boots and charity shops to see if we can find any bargains which we can then resell.

As previously mentioned, we used eBay to do this, however, as we began to buy, and subsequently sell, more and more stock we found that eBay was quite restrictive. We looked into using other platforms, such as Discogs, but eventually decided upon creating our own website.

This proved an exciting challenge. Studying Web Development at university I am always eager to practise my skills. I’d dabbled in making e-commerce sites before but wasn’t quite technically literate enough to make anything of them. The making of Don’s Discs gave me a chance to start from scratch and learn on the go at a pace I set.

Firstly, we sat down and made bulleted notes of what we wanted the site to achieve and what purpose it would serve. This then let me tailor the design to brief.

Once I had finished my first year of university I began to make a design of the site in Figma. Me and Dad then went over the designs to make necessary changes before beginning production on the site. I used images from Unsplash to template the site. I researched a lot of other record store websites to get an idea of the current market and design trends before making my own version fit for the Dons Discs brand.

Once the design was completed, I set up the domain with my hosting provider, iPage, and configured Cloudflare. I then installed a fresh copy of WordPress. I wanted to create a theme from scratch as I’d only done that once before, with my photography website’s blog. I used the Storefront theme as a starting point to get an idea of what files I would need. It took about a month of work to get the site looking like the Figma design.

We did make a couple of design changes along the way such as changing the blue in the header for white and adding a black bottom border to the header to replicate the business card and make it stand out more.

We took our own photos for the headers of each page to make it really feel like our own work.

I added a JavaScript animation on the home page showing a typing and deleting effect. I found this on CodePen and adapted it to my needs.

We spent a while figuring out how to control the stock of our products, as the WooCommerce built-in stock control is aimed at items that have multiple quantities whereas the type of things we were selling we only had one of.

One thing that really tested my ability was customizing the sort by filters. We only really needed to sort the products by price, so I had to hook into the shortcode and remove the other options from all pages, not just the homepage. This took a lot of Googling.

We then started to figure out how to import products from Discogs to the website. Discogs exported a CSV file which we then mapped to Woocommerce’s product importer. The attributes were very difficult to get right but the desired effect was achieved in the end. This also helps on the front end for customers to filter the products as eventually there will be thousands of product listings on the website.

The site is now live and slowly being populated with products.

Sour Lemons The Label

I met another person on Facebook in their third year in need of a website. She wanted a 2000’s style theme to match with the retro clothing brand she was creating.

It was a challenge to achieve the 2000’s style whilst still being a functional website in the modern age. I made the website using WordPress and chose the Kotre theme. It had quite a modern feel to it which I liked and also had support for WooCommerce as the website would need a shopping facility for the products she was selling.

As Kotre was free it didn’t have any built-in options to change the colours so I had to customize it using CSS. I also created a child theme for some more enhanced styling. She wanted an animated cursor on the site too.

The brand is called Sour Lemons The Label so the background has glittery lemons on it. She also created her own font, which is used throughout the site. The design was entirely dictated by her and implemented by me to empower her vision of the brand.

I enjoyed making the site and it’s yet another site using WordPress to put on my portfolio demonstrating my skills with child themes and working with clients.

We Are Artemis

I saw yet another post on Facebook, this time a girl band were asking for a web developer to create them a site on Wix. I’d used Wix a bit before and hated it: see here. Seeing how quickly the world of web design and development can change I thought I’d give it another shot.

I wanted to try out using Adobe XD too, so made an initial prototype in there. XD has a neat feature where you can publish the site for the client to give you feedback on.

I liked the idea of a full-screen video landing page as I’d seen this done with bands and artists before. I wanted to stick with a pink theme and cut out each band member’s head in Adobe Illustrator and turned them into an awesome SVG for the second page of the website. This way users would know instantly who the band members were and what the band was about.

After some backwards and forwards on the design, I was ready to start making the site on Wix. We connected the domain from Go Daddy and I started creating.

For the events on the site we used Bands In Town which was actually quite difficult to set up as it separates out bands and individuals in a weird way. However, we got it to work eventually.

The site was relatively simple as a one-pager so the mobile optimisation wasn’t too hard and Wix’s built in engine.

I’m really pleased with the overall theme of the website and it gave me a chance to try out Wix again of my own accord; something else to add to my belt.

Data Flow Diagrams

When we first started doing Data Flow Diagrams at the start of the semester I thought they were the worst thing in the world. However, as I came to understand them more and start to think about more real-world business problems that I was encountering such as creating a website for my Dad or as a side project for one of the many ideas I have I began to realize their necessity.

The scope of the aforementioned projects is large. Too large for me to remember in detail what goes where and what everything is supposed to do. When you create a Data Flow Diagram it lays things out in a clear and structured way that you can refer to throughout the design and implementation process. This makes sure that no features are lost or forgotten about and every process is connected with a reason. This means you aren’t spending time on things that in the end won’t matter to the final product.

Here is an example Data Flow Diagram for Solent’s Portal that I created for my assessment in this unit.

Firebase

During our Web Technologies practical lessons, we have to follow a set of instructions to create a website or simple script. The lecturer has hosted the notes for the unit on Firebase.

I’d looked into Firebase before but couldn’t understand how to use it. However, when an extended task came up in lesson I gave it another go.

I managed to create a simple chat application and clone the notes from the lesson.

Feeling confident I then decided to have a go at some other JavaScript based things which you can read about in this blog post.

As I had already experimented with Firebase I wanted to host my final assessment on the platform. You can see the end result here.

Angular, React, Vue, Node

Whilst working on various projects this semester I’ve encountered the following technologies: Angular, React, Vue, and Node. I’ve experimented with them to some extent and found Node Package Manager quite useful.

Initially, when I first heard about them I thought they were JavaScript Libraries like JQuery, however, they are far from it. Each technology is designed to build an application for use on the web.

Node you even have to set up as a server from which web pages are served from. This makes it particularly tricky, as most shared hosting packages don’t offer Node, or the ability to install it on the server, however, PHP is widely available and has a lot of support and documentation as it has been around for such a long time.

I think these technologies will come in very useful in the future. For now though, I’m not quite competent enough.

Therfield Village Pre-School

I currently manage Therfield Village Pre-School’s website which is made with WordPress.

I took over control of the website so unfortunately didn’t get to start it from scratch but it was the first website that I worked on that used WordPress.

To start off I made a style guide and adjusted the logo to create continuity across their advertising channels. I then made sure that all the text on the site was up to date and accurate.

My Mumm was deputy manager for the Pre-School at the time and we implemented a blog together.

I added the Pre-School to Google Maps and Google My Business, as well as improving their SEO. This resulted in a significant increase of visitors on the website and calls enquiring about places.

I also helped set up a Facebook page and Twitter account for the Pre-School.

Whilst my Mum was deputy manager at the Pre-School I made a lot of flyers and posters for their activities. For example I created a treasure hunt flyer for children to find signs around Royston Town Centre.