Basic Tools for Web Design

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

The basic tools needed for web design are amazingly simple. 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 like Notepad in Windows 10, TextEdit on the Mac, or Vi or Emacs in Linux.

You enter the HTML code, 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 you find in a plain text editor, 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. 

There are many HTML editors on the market and they vary from basic to professional-level software. 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 only show the code, but with some of them, you can 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 is suitable for both beginning and advanced web developers. Komodo IDE's autocomplete feature is particularly handy for new developers because it knows how to write code for common elements such as links. The software supports color coding of different coding types like HTML, CSS, and many other coding languages. Komodo IDE is cross-platform software that runs on Windows, Mac, and Linux.
  • CoffeeCup HTML Editor is 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 keep your code error-free. It includes code completion and supports other coding languages you may use in conjunction with HTML. Beginners will appreciate it when the software highlights errors in the code, explains why they appeared, and tells the developer how to fix them. CoffeeCup HTML Editor runs on Windows.
  • 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 like 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.

Web Browsers

Test your webpages in a browser to make sure they look like you intended before you launch the page. Chrome, Firefox, Safari (Mac), and Internet Explorer (Windows) are the most popular browsers. Check your HTML in as many browsers as you have on your computer and download lesser-known browsers, such as Opera, as well.

Graphics Editor

The type of graphics editor you need depends on your website. Although Adobe Photoshop is the gold-standard for working with photos, you may not need that much power. You might prefer a vector graphic program for logo and illustration work. A few graphics editors to look at for basic web development use 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.
  • Photoshop Elements for the Mac and PC is an image editor that is a light version of its namesake but with plenty of power for working with graphics for the web.
  • Corel PaintShop Pro for PCs has almost all the useful tools you find in Photoshop and an interface that is easy to use.  
  • Inkscape for Windows, Mac, and Linux is a free vector graphics editor. This alternative to the pricier Adobe Illustrator has more than enough power for simple design work and web graphics.

FTP Client

You need an FTP client to transfer your HTML files and supporting images and graphics to your web server. While FTP is available via the command line in Windows, Macintosh, and Linux, it's a lot easier to use a client. There are many good-quality FTP clients available including:

  • FileZilla is a free FTP client available for Windows, Mac, and Linux. It supports drag-and-drop file transfers and has a pause and resume feature for uploading large files.
  • 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, but it meets all the 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.
  • 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 around.