Web Tools for web development and digital media

Many essential web development tools are available as online web applications. This group of development resources only requires a web browser to be installed on the developer's computer. Online web design tools can help the web designer produce design deliverables more efficiently and professionally. Web applications are also available that assist designers with topography (fonts), web graphics (icons), color palettes, and more.

Online collaboration tools, task management tools, and cloud-based storage are also useful resources for developers. Many of the online web applications are available for free, others may be available on a limited free trial basis, while some tools require the developer to purchase a paid subscription.


Web Tool (cloud storage)

Google Drive

Google Drive is a file storage and synchronization service provided by Google. It allows users to store files in the cloud, share files, and edit documents, spreadsheets, and presentations with collaborators. Google Drive encompasses additional web applications including Google Docs, Sheets, and Slides, an office suite that permits collaborative editing of documents, spreadsheets, presentations, drawings, forms, and more. In order to use the file synchronization service, Google Drive includes a downloadable installed software component for your computer. The service now offers 15 GB of free storage for new users. Additional storage is available for purchase.

Go There

Web Tool (cloud storage)

OneDrive

OneDrive is a file hosting service from Microsoft that allows users to upload and sync files to a cloud storage and then access them from a web browser or their local device. It is part of the suite of online services formerly known as Windows Live and allows users to keep the files private, share them with contacts, or make the files public. Publicly shared files do not require a Microsoft account to access. The service now offers 15 GB of free storage for new users. Additional storage is available for purchase. Includes a downloadable installed software component for your computer.

Go There

Web Tool (cloud storage)

Dropbox

Dropbox is a file hosting service that offers cloud storage, file synchronization, personal cloud, and client software using the fremium revenue model (meaning that there are free and paid versions). Dropbox allows users to create a special folder on their computers, which Dropbox then synchronizes so that it appears to be the same folder (with the same contents) regardless of which computer is used to view it. Files placed in this folder are also accessible via the Dropbox website and mobile apps. Dropbox provides a free account with a set storage size and paid subscriptions for accounts with more capacity. Includes a downloadable installed software component for your computer.

Go There

Web Tool (card sort)

Concept Codify

Examine your users' understanding of your site's information (content) architecture with this powerful online card sorting tool. This tool is essential for developers building websites and apps to use during the initial design phases of site development.

Go There

Web Tool (team communication)

Slack

Slack is a powerful team communications and file sharing tool that allows your team to stay in constant communication across devices and platforms. This tool is helpful for team developers building websites and managing real time communications and workflow among team members.

Go There

Web Tool (workflow organizer)

Trello

Trello is a flexible web application that gives users a visual way to organize anything with anyone. This tool is particularly useful for team project management and collaboration. A Trello board is a list of lists filled with cards, used with a team or by yourself. Drag and drop cards between lists to show progress. Add as many people as you need and drag them to cards. Add and reorder lists as you need. Trello adapts to your project, team, and workflow. Because of its flexibility, Trello can be easily adapted as a project organizer for different kinds of development projects and methodologies.

Go There

Web Tool (productivity tool)

Evernote

Evernote is a closed source freemium suite of software and services (meaning that there are free and paid versions), designed for note taking and archiving. A "note" can be a piece of formatted text, a full webpage or webpage excerpt, a photograph, a voice memo, or a handwritten "ink" note. Notes can also have file attachments. Notes can be sorted into folders, then tagged, annotated, edited, given comments, searched, and exported as part of a notebook. Can be used to easily assemble information, whether your own authorship, or web content. Has powerful collaboration and communication capabilities. Can easily transform "notes" into a beautiful screen-friendly layout which can be used for presentations. Includes a downloadable installed software component for your computer.

Go There

Web Tool (presentations)

SlideShare

SlideShare (owned by LinkedIn) is the world's largest community for sharing presentations and other professional content. It allows users to easily upload and share presentations, infographics, documents, videos, PDFs, and webinars. SlideShare requires a LinkedIn account to use.

Go There

Web Tool (presentations)

Prezi

Prezi is a cloud-based presentation software platform and storytelling tool for presenting ideas on a virtual canvas. Prezi employs a zooming user interface (ZUI), which allows users to zoom in and out of their presentation media, and allows users to display and navigate through information within a 2.5D or parallax 3D space on the Z-axis. Prezi is available in both an online version and desktop versions for Windows and Mac which allow offline creation and editing. A basic public account can be created for free. With a public account, prezis created will be publicly viewable, searchable, and reusable. For students and teachers, Prezi offers discounts when signing up with a school email address. Also free private accounts with up to 4GB of cloud storage space are available for students.

Go There

Web Tool (survey builder)

Survey Monkey

Web developers can easily create any type of user survey from simple to sophisticated with this powerful and easy-to-use survey builder. This can be an important tool in the web development life cycle since ongoing feedback is essential to successful web projects.

Go There

Web Tool (style analyzer)

Stylify Me

Stylify Me can scan and analyze a web page so designers can quickly produce an overview of the style guide of a site, including colors, fonts, sizing and spacing without needing to inspect each element. This tool is very useful for web designers that are looking at existing web site examples for ideas and current design trends as input for their own design decisions.

Go There

Web Tool (SEO analyzer)

Feed The Bot

'Feed The Bot' is a free SEO resource with tools and information that checks for compliance with Google's webmaster guidelines for SEO and other useful metrics like page speed. Also contains a wealth of SEO tips and best practices guidelines.

Go There

Web Tool (technology checker)

Can I Use?

'Can I Use?' provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers. This excellent tool allows users to enter a search term for a code element, reserved word, or technology name and 'Can I Use' will return an easy to understand graphical depiction of the status of that technology's support in all major browsers by browser version.

Go There

Web Tool (reference)

Escape Character Lookup

This site provides lookup tables for character entities also called 'escape character sequences.' Using character entities is required when the character encoding set does not express all the characters that might be needed in a document. Character entities are standard strings used in place of the character in the markup that a browser can interpret and then displays the character represented instead when rendering the page. There are three types of character entities available in HTML and XHTML, ISO 8859-1 characters which includes the Latin set of character entities, Symbols, Mathematical Characters, Greek and Latin Letters which includes entities for various symbols (such as copyright symbols, etc.), math characters, and Greek and Latin letters, and Markup-significant Characters which includes internationalization characters such as those required for bi-directional text.

Go There

Web Tool (browser testing)

Browserling

Browserling is a tool for live interactive cross-browser testing. It has a free option to preview websites in different browsers, or more advanced paid plans. Browserling runs real browser instances on their servers in virtual machines and doesn't use emulators.

Go There

Web Tool (browser testing)

NetRenderer

NetRenderer is a tool for cross-browser testing of your site in the various versions of Microsoft's Internet Explorer browser (IE) which is still commonly used in corporate environments. Allows you to test your website in Internet Explorer 5.5 through 11.

Go There

Web Tool (validator)

W3C Markup Validation

The W3C MarkUp Validator, also known as the HTML validator, helps check the markup validity of Web documents in formats like HTML and XHTML, SVG or MathML.

Go There

Web Tool (validator)

W3C CSS Validation

The W3C CSS Validator validates CSS stylesheets or documents that use CSS stylesheets.

Go There


Web Tool (spell checker)

W3C Spelling Checker

The W3C Spell Checker allows you to check the spelling for the content contained within a web page.

Go There

Web Tool (coding playground)

Plunker

Plunker is an online community for creating, collaborating on and sharing web development ideas. It is a workspace for rapid prototyping and testing of experimental code. It is a place for sharing code with other developers. It is a place to learn how other developers are coding cool stuff. Plunker has a built in code editor and library packages that can be include so you can quickly code and test your ideas.

Go There

Web Tool (coding playground)

jsFiddle

jsFiddle is a web-based collaborative live coding environment for front-end developers to experiment, share their code, and get feedback, ideas, from other development team members. jsFiddle is an in-browser code editor for JavaScript, jQuery, and other .js libraries with separate panels for JavaScript, styles, html and output. Invited co-programmers can collaborate including pair-programming, chat about the code, modify resources and references all from remote locations.

Go There

Web Tool (coding playground)

CodePen

CodePen is a collaborative live coding environment for developers to create front-end web development demos, share their code, and get feedback, ideas, and inspiration from other developers. CodePen is an in-browser code editor which can display immediate views of the results without having to upload files to a web server. The professional (paid) version includes collaborative programming, cross-browser testing, and drag-n-drop asset hosting.

Go There

Web Tool (code de-minifier)

jsBeautifier

jsBeautifier is an online tool to beautify (proper indention), unpack (de-minify) or deobfuscate JavaScript and HTML, make JSON/JSONP readable, etc. It is helpful when examining code for existing web sites to be able to convert compressed code into a more readable uncompressed form. jsBeautifier also makes available its open source code that allows its functionality to be extended.

Go There

Web Tool (code de-minifier)

Unminify

When trying to understand existing code it is often necessary to convert minified code into a more human-readable form. Unminify is a free online tool to unminify (unpack, deobfuscate) JavaScript, CSS and HTML code, making it readable and pretty.

Go There

Web Tool (code de-minifier)

MrCole's Online CSS Unminifier

MrCole's Online CSS Unminifier is a tool for making minified CSS legible. Similar to JavaScript de-minifiers, this is a simple tool written using JavaScript to unminify CSS. It uses several regular expressions (and sometimes a split followed by a join) to generate the clean code and it lets you specify tab width for indentation.

Go There

Web Tool (code de-minifier)

CSS Unpacker

CSS Unpacker is a free online tool to unminify (unpack, deobfuscate) CSS code, making it readable and pretty. includes 'light' vs 'heavy' options. 'Light' means each style will be on one line. 'Heavy' means each style will be presented on multiple lines.

Go There

Web Tool (web analytics)

Google Analytics

Google Analytics is a powerful client-side web analytics service that allows web site administrators to track and report all kinds of parameters associated with the user traffic on the site. Administrators can analyze the effectiveness of online campaigns by tracking landing page quality and conversions (goals). Goals might include sales, lead generation, viewing a specific page, or downloading a particular file. Google Analytics' approach is to show high-level, dashboard-type data for the casual user, and more in-depth data further into the report set. Google Analytics is free to use.

Go There

Web Tool (web analytics)

W3Counter

W3Counter provides free web stats to its users. The stats include how many visitors, where they come from, and how they use the site. The service also offers real time reports. For websites with less than 5,000 page views per day, get free web stats reports for life.

Go There

Web Tool (web fonts)

Webfont Generator

FontSquirrel has a really helpful webfont generator tool for converting standard desktop fonts into web font kits for inclusion in a site's CSS as downloadable webfonts. Font Squirrel is also an excellent resource for free, hand-picked, high-quality, commercial-use fonts.

Go There

Web Tool (web fonts)

Google Fonts

Google Fonts is a directory of free web fonts. All of the Google Fonts are open source. Unlike downloadable fonts served from the host server for your own site, Google fonts are available through an API service that makes it easy to add Google Fonts to a website in seconds by linking the font into your page using code. The font service runs on Google's servers which are fast, reliable and tested.

Go There

Web Tool (font identifier)

Font Matcherator

FontSpring provides a Font Matcherator tool that lets a user upload an image containing type and the tool will identify the fonts that match. FontSpring is also an excellent resource for free and premium (fee licensed) commercial-use fonts for the desktop and web. Unlimited use is granted for an initial license fee. Fonts licensed from Fontspring are yours to use on as many projects as you like with no annual fee, no embedding permissions, no usage metering. Unlimited use is granted for the initial license fee.

Go There

Web Tool (font identifier)

WhatTheFont

Have you seen a font in use and want to know what it is? Submit an image to WhatTheFont to find the closest matches in the MyFonts database. MyFonts also hosts a forum where font enthusiasts lend a hand with your font identification problems in the WhatTheFont Forum. MyFonts is also an excellent resource for premium (fee licensed) and some free commercial-use fonts for the desktop and web. Fonts licensed from MyFonts are available to use on as many projects as you like with no annual fee, no embedding permissions, no usage metering. Unlimited use is granted for the initial license fee.

Go There

Web Tool (color)

Colour Code

ColourCode is a tool to explore and find colors. This web tool has a unique user interface for exploring colors. Features controls for swatches in schemes, change of hue, lightness, saturation, etc. Pick colors based on the HSL (hue-saturation-lightness) representation of points in an RGB color model. Create color schemes with monochromatic, analogic, complement, triad and quad color rule modes. Export schemes as .less or .png files. ColourCode has a GitHub project as well.

Go There

Web Tool (color)

Paletton Live Colorizer

The Paletton Live Colorizer application generates color schemes of several types based on classical color theory. When designing for the web, we need to find good color scheme — a set of colors producing the best impression. For every color tint, there are other colors which can coexist with it, and colors which can't. The Paletton Live Colorizer lets designers build color schemes based on one (base) color, supplemented with additional colors derived using one of the theoretical color algorithms designed to produce the best visual impression. Color schemes can be exported in several file formats. It should be noted that this tool doesn't use the standard HSV or HSB model so the same color values could describe different colors in Photoshop.

Go There

Web Tool (color)

Adobe Color (Creative Cloud)

Adobe Color CC (Creative Cloud) is a free web tool for designing color schemes. Formerly known as Adobe Kuler, the Adobe Color Creative Cloud tool allows designers to generate color schemes using analogous, monochromatic, triad, complementary, compound and shades color rule modes. Also includes a custom mode for color scheme generation without a color rule model constraint. Also has a feature allowing a color scheme to be developed from an uploaded image.

Go There

Web Tool (color)

HTML Color Picker

The HTML color picker is a basic color tool that shows darker/lighter shades of any color together with their Hex CSS RGB (Red, Green, and Blue) model color values. An additional CSS Colors page displays colors using a hexadecimal (hex) notation for the combination of RGB color values written as 3 double digit numbers, starting with a # sign. CSS colors can also be defined as decimal RGB color values of the CSS style notation form 'rgb(r,g,b)'. The CSS Colors page also includes color tables of 'web safe colors' based on the standard 256 color palette available on early web browsers. Another helpful RGB-to-Hex Conversion tool converts RGB values of a color to a hexadecimal string.

Go There


Web Tool (image editor)

Pixlr Editor

Pixlr Editor is an online image editor, with free and paid versions. Pixlr Editor is a robust browser photo editor for all raster graphics editing needs. Pixlr Editor gives the user full control over their images including layers and effects.

Go There

Web Tool (icon converter)

Real World Icon Converter

Make icons and favicons from pictures. This tool converts images from formats including .png, .jpg, .bmp, or .gif to a Windows icon (.ico). For best results, the image should be properly prepared before converting it.

Go There

Web Tool (icon editor)

Real World Favicon Editor

Compose or edit favicons or other icons using this online tool. This tool provides a drawing palette optimized for icon creation and saves result as a Windows icon (.ico) file.

Go There

Web Tool (cursor editor)

Real World Cursor Creator

Compose or edit cursors using this online tool. This tool provides a drawing palette optimized for cursor creation and saves result as a Windows cursor (.cur) file.

Go There