Posts from Website Design

What is Gutenberg?


Gutenberg is a new WordPress editor that has divided the community more so than the debate of whether pineapple should be allowed on pizza!

Reading Time: 2 minutes , Discussion
View Article

How to enable WebP in WordPress


I am still in shock and awe at the presence of the WebP file type. The benefits the image provides can be achieved by any developer using a fallback!

Reading Time: 4 minutes , Website Design
View Article

WebP Image Format


WebP lossy images support transparency, are on average 25-34% smaller than JPEG images and 26% smaller in comparison to PNG images. 

Reading Time: 3 minutes , Performance
View Article

Rocket League Loading Screen


I love the simplicity of the loading screen design for one of my favourite games Rocket League. So why not create a codepen dedicated to the screen itself?

Reading Time: 2 minutes , Website Design
View Article

Rebuild Part 10: Going Live!


For what feels like it's been months of coding and learning, it is finally over (all within a month). My website is ready to go live!

Reading Time: 2 minutes , Discussion
View Article

Rebuild Part 9: Tests and Comparison


Before I run the tests and compare it against the original results, I first reflect on what the original goal of this project was.

Reading Time: 2 minutes , Discussion
View Article

Rebuild Part 8: Cross Compatible (Browser Support)


It is time to test the website outside of the Google Chrome browser and see how well the CSS fairs across the primarily used browsers.

Reading Time: 2 minutes , Discussion
View Article

Rebuild Part 7: Laptops and PCs (Desktop)


In this post, I will be talking about how I have rebuilt my website for Desktop, this will also cover laptops, PCs, tablets, etc.

Reading Time: 4 minutes , Discussion
View Article

Rebuild Part 6: Mobile First


I will show you how I rebuilt my homepage to become mobile first both in the number of requests required and overall file size.

Reading Time: 4 minutes , Discussion
View Article

Rebuild Part 5: Automation


My personal website centres around imagery more than the average website. If only there was a way I could add automation of keeping the file size low...

Reading Time: 2 minutes , Discussion
View Article

Rebuild Part 4: Plugins


Plugins, after looking at the current build of my website, it is easy to get tunnel vision on the theme of my WordPress site

Reading Time: 2 minutes , Discussion
View Article

Rebuild Part 3: Setting up a blank canvas


When I start any project, I like to have a blank canvas from which I can build upon. My personal website was no exception.

Reading Time: 3 minutes , Discussion
View Article

Rebuild Part 2: Goals + Agenda


I thought that before beginning the rebuild of my website, it'd be best to outline some of the key goals that I want to achieve as part of the process.

Reading Time: 2 minutes , Discussion
View Article

Rebuild Part 1 : Table of Contents + Running Tests


Welcome to my 10 part series of posts on how I improved the performance of my website, in this post I will be covering a table of contents on what to expect

Reading Time: 1 , Discussion
View Article

Pure CSS Loader


It had been a while since my last codepen, so I decided to create a simple CSS loader. I want to see what else I can produce using pure CSS techniques.

Reading Time: 1 , Discussion
View Article

SVG & Media Queries


Hopefully, in the future, we will see other uses of creating media queries for SVGs. Now we are aware of media queries and SVGs capability when combined.

Reading Time: 1 , Discussion
View Article

Vintage Ensembles – Vintage Clothing Website


Vintage Ensembles are a new clothing store that love anything boutique and require a website. They follow a trend that is vintage clothing and accessories.

Reading Time: 1 , Website Design
View Article

Animating X – Pure SVG and CSS Animation


This CSS animation was inspired by LevelUpTuts and focuses on manipulating the stroke of the polygon object to create a cool looking animation.

Reading Time: 1 , Website Design
View Article

Codepen – Social Media 3D Card


This is a little codepen I made using HTML5 and SASS to compile the CSS. It doesn't use any images or javascript, and the animation is made using CSS.

Reading Time: 1 , Website Design
View Article

CSS Column Count Layouts


CSS column layouts are a great way of setting up a specific & fluid structure for a website. The beauty of it is that it requires very little code to work.

Reading Time: 2 minutes , Website Design
View Article

Best Blend Website


The best blend project can be found in full on my Behance profile page. Best blend is a hypothetical coffee business looking for a brand identity.

Reading Time: 1 , Website Design
View Article

Simple UI Form


It managed to rack up a staggering 2000 views so far! I appreciate the feedback everyone has given and please if you have any feedback I'd love to hear it!

Reading Time: 1 , Website Design
View Article