69 fantastic free web tools

By Steven Roberts, Louis Lazaris
( netmag, Web Designer )
last updated

Design faster and code quicker with this collection of web tools that won't you cost a penny.

63. CodePen (opens in new tab)

CodePen is the go-to code playground for most frontend developers. The UI is clean and has support for most of the popular frameworks in HTML, CSS and JavaScript. The ‘Picked Pens’ section on the homepage is a great place to find inspiration and see some of the amazing community creations. 

64. Atom (opens in new tab)

50 free web tools - Atom

GitHub’s text editor can be customised to suit your needs

The GitHub dev team's hackable text editor for modern development, Atom comes full-featured, with packages, themes, smart auto-completion, multiple panes and more. Best of all, it can be fully customised via HTML, CSS and JS.

65. Brackets (opens in new tab)

Adobe’s contribution to the text editor race is an open source editor with focused visual tools, preprocessor support, and the ability to ease in-browser design through live preview. It also integrates well with Photoshop via the Extract for Brackets extension.

66. Lorem Ipsum Generator (opens in new tab)

Both designers and developers rely on lorem ipsum text when producing mockups and testing type. loremipsum.io has a host of plugins for text editors and programming languages. The generator’s page has some comical alternatives too.

67. Pastebin (opens in new tab)

Pastebin is great when you just need to share a snippet of code, you go to the website, paste the code, copy the link and send it. You can add optional settings such as syntax highlighting and choose how long your URL will last.

68. Let's Encrypt (opens in new tab)

Let's Encrypt will help you switch a project over to HTTPS

Let's Encrypt will help you switch a project over to HTTPS

If you’re looking to switch a project over to HTTPS, you’ll want to investigate this option. It's a free, open and automated certificate authority that provides you with a hassle-free way to go secure.

69. Accessible HTML5 Video Player (opens in new tab)

This is a video player from the PayPal accessibility team. It has custom controls and a keyboard-accessible and screen reader-supported UI. There are no scripting dependencies and it uses HTML5 form controls for volume and progress indicators.

 (opens in new tab)

Related articles:

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Steven Roberts
Steven Roberts

Steven is a digital creative from Stockton-on-Tees, UK. An experienced Head of UX, Steven has written a number of articles on web design and front-end development, as well as delivering a talk at CSSConf Budapest on the potential of CSS animations. He is currently Head of UX at Aero Commerce.

Related articles