Basic Tools for Web Design

You don't need a lot of software to get started as a web developer

Aside from a computer and an internet connection, most of the tools you need to build a website are software programs, some of which may already be on your computer. You need a text or HTML editor, a graphics editor, web browsers, and an FTP client to upload files to your web server.

Choosing a Basic Text or HTML Editor

You can write HTML in a plain text editor such as Notepad in Windows 10, TextEdit and Sublime Text on a Mac, or Vi or Emacs in Linux. You create the HTML coding for the page, save the document as a web file, and open it in a browser to make sure it looks like it is supposed to. 

If you want more functionality than a plain text editor offers, use an HTML editor instead. HTML editors recognize code and are able to identify coding errors before you launch the file. They can also add closing tags you forget and highlight broken links. They recognize and accommodate other coding languages such as CSS, PHP, and JavaScript. 

The many HTML editors on the market vary from basic to professional levels. If you are new to writing web pages, one of the WYSIWYG (What You See Is What You Get) editors might work the best for you. Some editors show only the code, but some allow you to toggle between coding views and visual views. Here are a few of the many HTML web editors available:

  • Komodo IDE and its user-friendly interface are suitable for both beginning and advanced web developers. Komodo IDE's autocomplete feature is particularly handy when you're writing code for common elements such as links. The software supports color coding of different coding languages such as HTML, CSS, and many others. Komodo IDE runs on Windows, Mac, and Linux.
Komodo IDE
Lifewire 
  • CoffeeCup HTML Editor is especially useful for new developers who are more interested in learning to code than in a visual interface. This robust editor comes with templates and has validation checkers to help keep your code free of errors. It includes code completion and supports other coding languages you might use in conjunction with HTML. The software highlights errors, explains why they appeared, and tells you how to fix them. CoffeeCup HTML Editor runs on Windows.
CoffeeCup HTML editor
 Lifewire
  • Mobirise is an HTML editor for people who don't want to get involved with code. It is all about picking a theme and then dragging and dropping elements on the page. Add text just as you would in a regular text editor and insert images, videos, or icons—all without writing any code; Mobirise does that part for you. Mobirise is available for Windows and Mac, and it is free.
Mobirise HTML editor
 Lifewire

Web Browsers

Websites can look different from browser to browser, so testing your web pages to make sure they look and function as intended is crucial. Chrome, Firefox, Safari (Mac), Opera, and Edge (Windows) are the most popular browsers.

You need to test your pages for appearance and function in mobile browsers, too. Most desktop browsers offer the ability to view websites in variously sized windows. For example, a wealth of testing tools is available in Google Chrome at View > Developer > Developer Tools. Select the smartphone icon in the upper left of the developer window to see any page in differently sized windows and mobile operating systems.

Menus showing Chrome's developer tools
 Lifewire

Graphics Editor

The type of graphics editor you need depends on your website. Adobe Photoshop is the gold standard, but you might not need that much power—plus, you might need a vector graphics program for logo and illustration work. A few graphics editors to look at for basic web development include:

  • GIMP is a free, open-source photo-editing program that provides many of the features of its more expensive competitors. As open source software, it is available for Windows, Mac, and Linux.
GIMP image manipulation program
 Lifewire
  • Photoshop Elements for the Mac and PC is a light version of its namesake but has plenty of features.
  • Corel PaintShop Pro for PCs has almost all the tools you find in Photoshop in an easy-to-use interface.
  • Inkscape for Windows, Mac, and Linux is a free vector graphics editor. This alternative to the pricier Adobe Illustrator has more than enough capabilities for simple design work and web graphics.

FTP Client

You need an FTP (file transfer protocol) client to transfer your HTML files and supporting images and graphics to your web server. FTP is available via the command line in Windows, Macintosh, and Linux, but a dedicated FTP client is much easier to use. The top FTP clients include:

  • FileZilla (free) is available for Windows, Mac, and Linux. It supports drag-and-drop file transfers and has a pause and resume feature for uploading large files.
FileZilla
Lifewire / Richard Saville
  • Cyberduck is free, open-source, cross-platform software known for its seamless integration with external editors and its attractive user interface.
  • Free FTP and Direct FTP are made by the same company. Free FTP is a minimalistic client that meets basic file transfer needs. Direct FTP is a premium version that offers advanced features. Both versions are supported by Windows 7, 8 and Vista, but only Direct FTP is suitable for Windows 10.
Free FTP
Lifewire 
  • Transmit is a premium, Mac-only FTP client. It facilitates unusually fast transfers and supports Amazon CloudFront.
  • Cute FTP is a powerful premium FTP client you can use to make up to 100 transfers at the same time. It is considered to be one of the most secure FTP clients available.