My expansive and growing freelancing toolkit

As a freelancer taking on full-stack projects, I have to design, develop and implement solutions that benefit my clients' businesses. To achieve this, I need help wherever I can get it. This page contains the tools I use on any given project. I am so thankful to have access to these tools and I am sharing them so that you can understand how I work with transparency. If you are an up and coming freelancer yourself, perhapse you can gain some ideas through this page for preparing your next job.

Disclaimer: I am not affiliated with any of the following tools / people / businesses and I do not have any financial incentive to share them.

Development

WordPress

WordPress is the reason I am able to freelance. WordPress has totally revolutionised web-design and I am learning more and more about it every day. I built my first WP website in 2013 when I was 15. It combines super useful tools with creative freedom. WordPress is built with PHP and SQL and I would not consider myself a PHP or SQL developer but I can always find what I am looking for with the right query because the community is expansive.

Bootstrap 4

I learned CSS without a framework (and I encourage anyone to do the same) but I've been using Bootstrap for around a year and it's completely revolutionised my CSS experience. I would not be an efficient freelancer without it because it speeds up my workflow so much and I love using the built in components to turn a mock up into something tangible and fresh. Without a CSS framework like Bootstrap 4, you're going to be writing so much custom CSS and you're always going to be running into small challenges with, for example, vertically aligning or animating certain elements. I would definitely consider myself a Bootstrap developer! Couple Boostrap 4 with Sketch, also featured on this page, and you can create some really proffesional work.

b4st

A Bootstrap 4 Starter Theme for WordPress, by Simon Padbury. WordPress themes contain a bunch of files which are often complex and confusing. Instead of turning a static HTML theme into a WordPress PHP theme, I like to use this boilerplate to get a head start. It's lightweight and it's integrated with Bootstrap 4 (I used to use one created by the same developer for Bootstrap 3). I've tried many different boilerplates but this is definitely my favourite of them all.

Brackets

Brackets is my open source code editor of choice and it always has been. I've heard great things about Coda For Mac but I am simply too familar with Brackets and it has some killer extensions that I'll mention at some point. I really like how it semantically colour codes my HTML, PHP, jQuery and CSS which helps me create readable, understandable syntactically viable code.

MAMP

Macintosh, Apache, MySQL, and PHP. I recently made the switch from Windows OS to Mac OS so I needed to find a local host software which allowed me to develop offline, because XAMPP is exclusive for Windows. When I first started developing, I always found it very tricky to set up local host websites which I could later port to the live development. MAMP is much easier and quicker XAMPP and when I pair it with the b4st starter theme, I can really speed up my initial workflow.

Namecheap

Every developer has a company of choice when it comes to hosting. Namecheap is mine and I have so many website and projects hosted on their servers. The reason I like them is straightforward: they offer good prices on all of their packages (without even mentioning all the offers I can always find in coupon codes) and their live customer support never lets me down. I am not affiliated with them in any way, I just really love using Namecheap.

GoDaddy

I started out with GoDaddy years ago and they were great. Even though I use Namecheap, I have clients who already have accounts with GoDaddy so I don't bother migrating to NC because GoDaddy offer an awesome service as well. They have good prices, frequent deals and top live support agents. Their biggest downfall however is that the support hours are tied to the American timeboard so I can't use them until the afternoon.

Design

Adobe Creative Cloud

I could start listing all the Adobe products I use and how each one brings something new to any design task I take on, but instead, I'll just treat the whole Creative Cloud as one. Adobe CC is amazing. It's constantly evolving and it's a designers best friend. Now that it's offered as SaaS (software as a service) it stays updated automatically and it's affordable for anyone starting out. I find that many graphical tasks can only be done with an Adobe CC product because it really is the best service around.

Sketch

Coupled with Adobe CC, Sketch is best tool ever for creating realistic mockups for any web design project. I've recently got into Sketch and I've used it on four projects, each with visibly improved solutions thanks to the ease and speed of pre-planning with this killer tool. I especially love how I can create the Bootstrap 4 grid overlay dimensions and then when I create shapes they snap to eachother and display distance between surrounding elements with the click of a button.

Subtle Patterns

Subtle Patterns is an intuitive tool for quickly finding and testing out background textures for a design job. If I want to give depth to a website, I always head over to Subtle Patterns to browse light or dark skins depending on the brand I'm working on.

uiGradients

Gradients are not always appropriate in design tasks however I find that when used right, they can really add flavour to the product. I love just flicking through the uiGradients for ideas, it really goes to show how colour alone can be utilised to add beauty to things. Coupled with solid flat design principles, uiGradients is a fun and easy tool for inspiration. I also like the quick export CSS feature which retains the -webkit- -mozkit- etc. vendors because it can be quite fiddly programming these in otherwise.

Depositphotos

Depositphotos is my favourite marketplace for high res stock photos. Purchasing the license for the right images can completely transform the overall look and feel of any given design task. I use Depositphotos for most hero images unless the client can supply something suitable themselves. Stock photos don't have to be tacky, they can make all the difference when you find suitable ones. Luckily with Depositphotos, I managed to pick up a bunch of license credits on a flash-sale a couple years ago so I don't really pay much for them (since they are normally way overpriced on every marketplace in my honest opinion).

Font Pair

Another awesome and quick design tool which I use for all my projects. Instead of spending hours glossing over all the free google fonts I'll simply decide wether I want sans-serif/serif or serif/serif etc. headings and body fonts depending on the brand I'm trying to create, then I'll use the easy filter to scroll through the most appropriate fonts which are all tried and tested.

Google Fonts

Without a doubt, Google Fonts has played a huge role in making the internet more beautiful over the last ten years. I always use Google Fonts because it's a free service, it's quick loading (delivered over a CDN) and I have so many options to choose from. Even if I find a premium font I like, I can usually find something super similar on Google Fonts!

Canva

I know that a lot of designers would hate Canva because it really takes the initiative out of design, but if I'm looking to create a poster, a quick logo or some promotional social media content for a brand, Canva is my go to. There's a free version which is awesome but I use the paid subscription because I like to alter and enlarge file sizes. Canva really is a design hack and I think it contains beautiful easy-to-adapt templates, which again, speed up my work flow massively.

Logojoy

Logojoy is another great design hack. If I need to create a low budget logo on a strict timeframe, Logojoy is a great place to start. It is quite limited in what you can do but it also gives you so many alternative ideas that deciding on the brand direction becomes a more straightforward task.

Education

w3schools

The first place to start if you want to get into web design. This intuitive, free-to-use website has tons of reference material that you can copy & paste or gain inspiration from. I am always checking back to w3schools whenever I get stuck because you can never neglect the basics and sometimes it's the most simple things that are causing the issues in your code.

GitHub

When you learn basic code in whatever language you choose, head over to GitHub to see how far you can take the principles you've learned! GitHub has revolutionised development and although I don't personally contribute (I know I really should) I find so many solutions for problems written by advanced programmers who explain their work so well. GitHub is like a big repository of code and programmed solutions for common (and often not so common) problems.

Udemy

When I was starting out at 15, I used to absorb anything educational I could find on YouTube. Now I use Udemy which is like an online school where the best developers on the web create courses for anything related to freelancing & programming. Udemy is great because it has a huge community and a rating system which means you can be sure your tutor/mentor is giving tips which are both proffesional and industry-accepted.

Brad Hussey

Brad Hussey is my favourite online tutor for all things web design and marketing. I've completed four of his Udemy courses and each one has taught me a range of skills. My work is heavily influenced by Hussey's style and the things taught in his classes. I really trust his content and I always look forward to what he creates for students.

Charli Marie TV

Charlie Marie TV is a a youtube channel with amazing design tutorials which I've learned a lot from. The videos are clear and easy to follow and I think she creates killer designs and explains them well. I am weaker in design than I am with development so I am always looking for good mentors to inspire my work.