Home page of Eric Pement

Home > webdev.htm

 

Web development tools

All web developers should have available the tools to make good-looking web sites. This includes having installed all the main web browsers; tools for modeling Cascading Style Sheets (CSS); sample test environments; places to test JavaScript, HTML, and CSS combinations; confirmation that your code is compliant—i.e., HTML and CSS validators; color wheels, coordinators, and selectors; graphics and image editors; on-screen rulers; code books for HTML character entities, Unicode, and solutions for problems; web design tools; and places to get free code.

I have focused almost exclusively on tools that are free of charge, that are open source or "free software", or that are uncrippled shareware. In a very few cases I may list commercial programs. For nearly all of these links, this is what I use and what I recommend to others who need to create web sites.

Web browsers

The three major browsers today are IE, Firefox, and Chrome

  • Internet Explorer - IE is installed automatically with Windows
  • Firefox - Mozilla browser, supports many plugins
  • Google Chrome - For personal computers and mobile devices
  • Apple Safari - Comes with Mac, available for Windows
  • Opera - The 2nd oldest browser, following IE, was once a contender but is now nearly forgotten
  • Lynx - Lynx is a fully-featured, non-graphical (text-only) browser. It has no capacity for pictures or images. Because Lynx is the primary browser used by blind or vision-impaired users, web developers should always test their work in Lynx to confirm that their web pages render properly for full accessiblity. See also http://lynx.isc.org
  • ELinks - A fork of Lynx, ELinks is another non-graphical text-based browser. Features tabbed browsing (yes, in a non-graphical display), HTML rewriting for pages that would otherwise display poorly, full-color control, and apply external editor to web pages
  • eww - Emacs version 24.4 now comes with a built-in web browser. Called eww, when properly configured, it displays web pages, including graphics, in an Emacs editing buffer.
  • w3m - In a Unix or Unixish environment (like Cygwin), w3m is both a browser and pager. It accepts a url or a file as a command-line argument. It can also work inside Emacs as emacs-w3m, where the editing buffer is colorized and hyperlinked.

  • Netscape Browser Archive - Obsolete versions of Netscape stored here
  • The Browser Archive - You can get every obsolete and defunct browser from here

Dedicated web editors (HTML, CSS, etc.)

Editors with WYSIWYG features, some things for novices but others for professionals:

Editors with emphasis on code, more for experts:

  • RJ TextEd - Closed-source but free Windows editor. Strong focus on web technologies, regularly maintained, and my favorite
  • Light Table - Open Source Windows/Mac/Linux next generation programmer's editor with good features for HTML and web
  • bluefish - Open Source for Windows, Linux, Mac, FreeBSD, Solaris
  • OpenElement - Very powerful, free open-source editor for Windows. Good community.
  • PSPad - Free Windows programmer's editor with special features for web editing
  • CodeLobster - Free Windows PHP/Web IDE, with options for commercial features
  • Notepad++ - Free Windows programmer's editor, offers many plug-ins for extensibility
  • SynWrite - Programmer's Editor with many features HTML and web
  • Aptana Studio 3 - Open source Windows/Mac web dev IDE, supports PHP and Python, uses Eclipse
  • NetBeans IDE - Free, open source IDE for Java 8, HTML5 apps, XML, JavaScript, PHP, and C/C++ languages
  • EPIC IDE - Open source Perl IDE, including editor and debugger, based on the Eclipse platform
  • KDevelop - Free, open source cross-platform IDE for C, C++, Python, QML/JavaScript and PHP
  • Padre - Perl IDE, including debugger, regex editor, Perl::Critic, integrated web server

HTML and CSS code validators

  • Xenu's Link Sleuth - Local util to catch broken links, files without internal links, dead links
  • W3 link checker - Online check for dead or invalid links
  • HTML Tidy - Confirm whether HTML/XHTML is syntactically correct
  • W3 HTML validator - Formal checks whether web pages are standards-compliant
  • W3 CSS validator - Formal check to see if your CSS is standards-compliant
  • JSFiddle - An online resource that lets you enter HTML, JavaScript and CSS separately, and see the results in real time

Local web server

  • XAMPP - Use your laptop or PC as a local web server, using Apache web server, MariaDB, PHP, Perl, and more. If you are a full-time or professional web developer, you will find XAMPP extremely useful
  • AMPPS - Similar to XAMPP, except that AMPPS focuses on PHP, uses MySQL instead of MariaDB, with options to purchase Softaculous toolkit
  • Fenix - Very lightweight desktop web server for Windows/Mac. Open source with GNU GPL. Work on multiple sites simultaneously, give external access to other users temporarily
  • Server2Go - Self-configuring web server, runs Apache, PHP, Perl, MySQL. Can be used on a CD-ROM or USB
  • UniServ Zero - A free and open source Windows-Apache-MySQL-PHP-Perl server suite, small enough to carry on a USB stick

Color selectors, color wheels, color pickers

Image, photo, and graphic editors

On-screen rulers

HTML and CSS teaching sites

  • W3 schools - Well-advertised site for html, css, graphics, and modern web work
  • WebPlatform.org - Documentation from the W3 Consortium on all web-related things
  • Code Avengers - Free, video-led, structured teaching on HTML and CSS for beginners
  • CSS-Tricks - Splendid help with tutorials, videos, forums, job postings, etc. for newbies to pros
  • Code Tut Plus - Code, Tutorials, courses, eBooks, and more
  • Dynamic Drive - Free DHTML/JavaScript/CSS scripts and code, categorized and nicely arranged
  • Front End Rescue - Good list of blogs, resources, experienced code writers
  • A List Apart - Advanced discussion on web design, development, styles, readability, and web technology
  • Web Designer Depot - Nice collection of articles, freebies, discounted resources, code demos and more

These pages created with GNU Emacs, xhtmlpp, Take Command, and Altap Salamander. Icons courtesy of Qbullets
Last modified: 2017-09-01