Today I thought I would share some of my favourite development websites. These are websites and web-apps that I either have used on a regular basis or that I want to learn. One thing I realised after writing this is that all of these are free web apps, and thats wonderful for an open development community.
On a side note, I am not affiliated with any of these sites and just think their pretty cool. At the time of writing, all of these apps had some kind of free tier for individual users.
Apps that I use regularly
Code Pen is a site where front-end developers and designers can browse and share UX code snippets from all sorts of mobile and web technologies. I personally use this site when I want inspiration for how I want something to look or to figure out how a specific UI component should work.
This is an awesome website for pure HTML5+CSS3 boilerplate site templates. This website was actually recommended to me by a fellow developer in bootcamp. This an awesome site for getting basic templates for small projects or to use as a starting point.
Responsive HTML5 and CSS3 site templates designed by @ajlkn and released under the Creative Commons license.
CSS Tricks is one of those sites I find browsing even when I am not looking for a specific UX css tutorial. This site is a great resource for all kinds of neat tricks and guides on how to accomplish some really cool designs using CSS and web technologies.
The CSS line-break property defines how strictly to enforce rules for wrapping text wrapping on new lines, particularly…
Dillinger is a really simple markdown editor for your browser that makes it easy to work on markdown documents in your browser. On top of a basic editor, you can also import and export your documents in all sorts of formats, such as google docs.
Online Markdown Editor - Dillinger, the Last Markdown Editor ever.
Dillinger is an online cloud based HTML5 filled Markdown Editor. Sync with Dropbox, Github, Google Drive or OneDrive…
This website is for people like me that are not super design oriented. Coolers helps you choose colour palettes that are easier on the eye and blend together well. They have all sorts of options from browsing popular colour palettes and gradients to generating your own either from a picture, a starting colour, or randomly. This site I have used for almost every personal project and I have probably used this the most on this list besides CSS Tricks.
Coolors - The super fast colour schemes generator!
Generate or browse beautiful colour combinations for your designs.
This an awesome website for getting oriented with the new JAM Stack, which is a way of developing modern web apps using micro-services. They have all sorts of information on jamstack.org about different technologies and frameworks.
For fast and secure sites | Jamstack
Check out the videos from Jamstack Conf Virtual, October 6-7. Watch the presentations Comprehensive guide for building…
This is a website for if you need to look up unicode characters. It is a free archive of hundreds of unicode characters that you can use for free in your website or app.
Font Flipper is a really cool site to help you choose fonts for your next image or infographic. You upload an image and you get a tinder like interface to help you decide which google font should go over your image.
Font Flipper: Find Free Fonts
Preview 800+ Google Fonts on top of your own designs, without having to download the fonts first. You'll play 'Hot or…
Observable is a really cool site similar to Code Pen but for data science and data visualisation. It is a site where developers can share snippets of code using web technologies to visualise different kinds of data and make them interactive. All of the public examples have their code on the site, and you can make changes to see how it affects the graphics.
Observable - Make sense of the world with data, together. / Observable
Discover insights faster and collaborate seamlessly with interactive Observable notebooks built for data analysis…
Apps that I want to learn
Figma is a really cool app for designing UI and UX mockups. You can design awesome looking graphical interfaces and then add a wireframe on top, connecting buttons and pages. Then you can export this as a fully working app mockup that you can click through. You can also export the designs as pure HTML5 and CSS3 code. On top of that it is also just a nice graphical design interface for images and svgs.
Figma: the collaborative interface design tool.
Figma helps teams create, test, and ship better designs from start to finish. Meet our customers Packed with design…
Rive is another web app I would like to learn but haven’t had the chance to use. It essentially lets you make SVG graphical animations for the web and some mobile frameworks (Primarily Flutter I believe). This has a very fleshed out interface and you can make some pretty advanced interactive graphics that can be used across development stacks.