Useful tools for coding and web development
Free Coding Guide: Part 5
Useful tools and software for coding
For any web designer or web developer out there, there are a few tools that are either necessary or extremely helpful – or both! This short guide will shed some light on what tools you will be needing for learning how to code and for web development later on.
If you are just beginning with coding, I’d recommend going for the free software and applications. Later on, you can upgrade to a paid alternative with more functionalities and better support.
Basically, your toolkit will consist of the following programs and tools:
- Text editor for writing code
- Photo editor for managing your images
- Command-Line Interface (CLI) for interacting with your operating system
- Domains and hosting plans for deploying your projects
- FTP client for transferring your files
- Web browser for development and testing
- Version control tools: Git and GitHub
For my recommendations for each of these tools for beginners, check out the Resources page.
Text editor for writing code
Text editors are quite simply programs where you write all your programming language code and save your files with an appropriate file extension, like .html for files containing HTML markup, or .css for files written in CSS, for instance.
These files are then executed appropriately to run your code or your program.
A good text editor is probably one of the most important tools you’ll need for writing code. Therefore, you should find one that suits your needs and feels easy to use.
You can use a basic text editor like Notepad on Windows or TextEdit on Mac. However, these don’t offer any additional, helpful functionalities for writing code. They don’t highlight your syntax or point out the spots where you might have forgotten to add a final semicolon or a closing tag for an HTML element.
So why not simply use MS Word for writing your code files then? Text processing tools like that don’t output “clean” code. Files written in MS Word, for example, contain rules for formatting, for instance. That’s why they aren’t suitable for this purpose.
You will find a list of text editors I recommend on the Resources page.
For more information on text editors, check out my blog post about how to find the best text editor for coding.
Graphic Editor for managing your images
Depending on how much you wish to focus on design and graphics, a photo editor is a must-have. You should know how to manage, edit, and resize images so that they will look awesome on your website and in your other coding projects.
Luckily, you will have plenty of great software to choose from. Here are a few worth considering:
- Pixlr – Pixlr is a free online image editor with sufficient tools to get you started with. It’s a very simple, web-based application, so you don’t need to install anything on your computer. Pixlr has enough functions and features for a beginner and it’s easy to use. You can start with Pixlr and when you feel like it’s not enough, have a look at the other tools below.
- Photoshop – the mother of all photo editors, so much so that the practice of editing images is simply called photoshopping these days. However, the software comes with quite a heavy price tag with a monthly subscription at Adobe’s Creative Cloud. If you’re using other Adobe software already, simply add Photoshop to your monthly subscription plan.
- GIMP – an excellent alternative to Photoshop. GIMP, or GNU Image Manipulation Program, is open-source and free to use and really has an extensive array of different functionalities and tools. And the good news is: you will find lots of free online tutorials for learning how to use GIMP. I’ve been using GIMP myself for quite some time now and I can fully recommend giving it a try!
- Affinity Photo – a great professional photo editor that has everything you’ll need for editing and managing your images. Affinity Photo is built much like Photoshop, so shifting from Adobe’s Creative Cloud to Affinity Photo shouldn’t be a problem, either.
If you’re not quite willing to spend money on a graphics editor, I’d suggest you start with GIMP.
Command-Line Interface (CLI)
The CLI is a simple but powerful user interface for accessing a computer’s operating system on much deeper level than using your desktop.
The CLI has several names, so you might also know it as
- Command Prompt or
- The Shell
You can think of the CLI as a program or application that allows you to communicate and interact with your computer by simply typing in commands. Thus, it give you greater access to the parts of your computer that you can’t see.
Contrary to the Graphical User Interface (GUI) of your computer, the CLI is purely based on text commands.
Even though a web designer doesn’t necessarily need to master the CLI or use it very often, it’s good to know at least the basics of it.
If you’re new to Command-Line Interface, don’t worry! Here are my recommendations for online courses and resources you can use to learn all you need to know about it:
- Treehouse – Console Foundations: This course teaches you all the basics of the CLI, like managing files and users, running and controlling processes, and installing and configuring software via the CLI. If you’re new to Treehouse, I’ve got a special treat for you: with my link you can get a FREE 7-day trial that gives you access to all other courses as well, not just the CLI one!
- Tutsplus: The Command Line for Web Design Intro
- Arch Linux – Command-line shell
Domains & Web Hosting: Bluehost
Bluehost is the best provider you can choose for hosting your website or WordPress blog. As if their pricing wasn’t already lucrative enough, you’ll even get a free domain name for your website AND a free SSL certificate to protect you and your website visitors – and to boost your rankings on Google.
And the best part is that choosing Bluehost is 100% risk-free: they give you a full 30-day money-back guarantee, no questions asked.
$3.95 per month $2.95 per month
To get your website setup the right way from the beginning, check out this step-by-step tutorial on how to setup your hosting with Bluehost in 10 minutes (opens in a new window).
File Transfer Protocol (FTP)
FTP allows your to get your website documents and files online by transferring them to your web server using the Internet.
Using an FTP account you can access your website’s files via the File Transfer Protocol.
Broadly speaking, you will have two option for using FTP:
- Via an FTP client that is a program running on your computer. You will find my recommendations for FTP software on the Resources page.
- By an FTP tool provided by your web hosting company. Most hosting providers have a section dedicated to FTP in their control panels or admin dashboards.
With an FTP client, once you’ve installed the software, you will need your FTP login credentials from your web hosting provider. Using them you can access the files in your folders on their web servers.
The user interface of an FTP client is quite straightforward. The left side of the window usually shows your local files on your computer, while the right-hand side displays the files and folders on your web server. You can transfer files by either simply dragging the local folders onto your web space on the right or vice versa.
Web Browser of your choice
To see what you’re actually creating with HTML, CSS, and other coding tools, you’ll need a good web browser. Pick one that you know inside out and that you’re comfortable with, since you’ll be using it a lot.
Here are three web browsers that I can recommend using – all of them are freely available, although Safari works best for Mac only:
All in all, I would recommend going with one of these three. Please try to avoid using Internet Explorer for other purposes than testing.
I’ve been using Google Chrome for years already and I can fully recommend it to anyone. It’s fast, stable, and it has one feature that I simply love: the inspector tool. It allows you to access the individual HTML elements and the CSS rules applied to them very easily. In Google Chrome, for example, you simply right-click the element you wish to inspect and choose “Inspect” from the dropdown menu.
Moreover, the inspector tool also allows you to make adjustments to the elements. Subsequently, wou will see the results right away in the browser’s main screen.
Whichever browser you choose, don’t forget to test your websites on other popular browsers, too. Even though they work in a similar way, sometimes there are differences in how certain website elements are rendered in different browsers.
Version control: Git and GitHub
Last but certainly not least, I’d recommend learning how to use Git and GitHub.
What is Git?
Git is a tool you can use for version control throughout your projects. Version control is simply a tool allowing you to take a snapshot of your project when it’s still in development.
Every time you make changes to your project, you have the option of reverting back to an earlier development state. Having this possibility to turn back time is invaluable for those situations where you notice that a new feature isn’t working as expected, for instance.
With Git you have the freedom to try out new features and improvements without the fear of ruining your entire project. When you’re working on larger projects, this is particularly helpful. However, Git is a great tool to use on smaller projects, too.
Git is the preferred version control system for most developers thanks to its advantages over the other systems out there. Git stores your file changes more efficiently and ensures file integrity better than the other solutions available.
What is GitHub?
While Git is a command-line tool you will use for your version control. But what makes it an even better tool for the coding community is GitHub, a forum around which all things involving Git revolve. GitHub is simply a place where developers can store their projects and connect with like-minded people.
GitHub is an excellent platform to get valuable feedback on your projects and on the code you’ve written. Simply store your project on GitHub and let others have a look at it. They will often provide you with suggestions for improving the quality of your code or help for finding the bugs in it.
Moreover, you can also create projects on GitHub for multiple developers to work on simultaneously, too. GitHub will keep track of all the changes made to the project files, so you will never lose track of who’s made revisions to your project.
Learning how to use Git and GitHub
To learn how Git works and what you can use it for, I’d recommend taking a look at these free, quick introductions to get you started using GitHub:
Summing it up
Now that you are familiar with the tools you will need, it’s time for the next chapter! You don’t need to have all of the tools listed above in use, but this chapter should be a good reference for later when you’re developing your first website, for instance.
So far, you have learned about what coding is, what programming languages you should learn, and what sorts of tools and software you will need.
The next logical step would be to jump straight into choosing your first programming language.
However, from my personal experience, I would recommend taking a quick look at Computer Science basics before you jump into writing your first programs and creating websites. It’s more of a technicality, whether you find out about how computers work now or later on while you’re actually writing code.
From my personal experience I can say that learning Computer Science basics before you start programming is really helpful. It allows you to write code and execute your first web development projects much quicker.
If you’re already familiar with Computer Science basics, you can jump right into Chapter 3 [under construction]. This particular chapter is all about helping you choose your first programming language.