A Free Web Developer Toolkit


When developing a website there are a few free tools that I use to make my life easier. I am going through a list of the tools I use to create website applications for my clients. Hope you find it useful!

Concept/Design

Miro – Collaboration

Taking all the brainstorming ideas and requirements for the website from the white board and post it notes into one spot. Miro is a great tool to allow you and your client to visualise the details for a website, it also allows users to comment on areas for further review.

Check out Miro

Adobe Color – Colour Pallete

Choosing a colour theme based on your clients website is always a fun task, there is so much freedom! Adobe color helps you pick the colours to use in your colour pallet for the website.

Check out Adobe Color

Invision – UX Design

Design the concept of the interface using drag and drop components. Invision allows you to give your client a preview of the design without development. Allowing you to collaborate with the client and quickly tweak the design without starting development.

Check out Invision

Dropbox – File Sharing

Gathering the images and content for the client can be done free with Dropbox, allowing the client to upload the images and content in one spot you can both access.

Check out Dropbox

Development

Visual Studio Code – Code Editing

Creating the HTML, CSS, JavaScript for the website can not be done without a decent code editor. Visual studio code is an great tool to help you develop your site and there a heap of plug ins to make the process easier.

Check out Visual Studio Code

GIMP – Image Editing

Resizing images for optimisation on the website and doing some minor touch ups can be done through the use of GIMP.

Check out GIMP

XAMPP – Local Hosting

Simulating a server on your machine. XAMPP allows you to preview a website in an web hosted environment.

Check out XAMPP

GitHub – Code Repository

All that hard work developing a website for the client, would be a shame if something went wrong and it was all lost. GitHub is a great way to save your code in case something went wrong.

Check out GitHub

FileZilla – File Transfer

After the website has been built it needs to be uploaded somewhere. By using FileZilla you can transfer the website files over the the server so they are available online.

Check out FileZilla