Developer Toolkit

Dev Resources

This is a collection of some of my favourite web development resources that I use either in my standard workflow, or for experimenting with new technologies. The list is not exhaustive, but it is a good starting point for anyone looking to expand their toolkit.

Quick Launch

Featured Picks

Resource Explorer

At a Glance

Visible

33

Total

33

Featured

8

Tags

36

Codepen

featured
Codepen

CodePen is a social development environment for front-end designers and developers. Build and deploy a website, show off your work, build test cases to learn and debug, and find inspiration.

codesandbox
Visit Resource

Coolors

featured
Coolors

Coolors is a super fast colour scheme generator for designers and developers. Get your perfect palette at your fingertips.

coloursdesign
Visit Resource

GitHub

featured
GitHub

GitHub is a web-based platform for version control using git. It is also where users can collaborate on or adopt open-source code projects, fork code, share ideas and more.

codedev tools
Visit Resource

Google Fonts

featured
Google Fonts

Google Fonts is a library of free licensed font families, an interactive web directory for browsing the library, and APIs for conveniently using the fonts via CSS and Android.

typography
Visit Resource

MDN Web Docs

featured
MDN Web Docs

MDN Web Docs is the ultimate resource for developers. It is a wiki that provides developers with information on how to use open web technologies including HTML, CSS, and JavaScript.

docsweb dev
Visit Resource

Next.js

featured
Next.js

Next.js is a React framework that enables functionality such as server-side rendering and generating static websites for React based web applications.

jsreact
Visit Resource

Tailwind CSS

featured
Tailwind CSS

Tailwind CSS is a utility-first CSS framework for rapidly building custom designs. It is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

css
Visit Resource

W3 Schools

featured
W3 Schools

W3Schools is a web developer information website, with tutorials and references relating to web development topics such as HTML, CSS, JavaScript, PHP, SQL, and JQuery.

docstutorials
Visit Resource

Animista

Animista

Animista is a tool that helps you create CSS animations. You can choose from a variety of pre-made animations or create your own custom animations.

cssanimations
Visit Resource

Can I Use

Can I Use

Can I Use is a tool that provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

web devbrowsers
Visit Resource

CSS Grid Cheatsheet

CSS Grid Cheatsheet

CSS Grid Cheatsheet is a tool that helps you learn and understand CSS Grid Layout.

cssgrid
Visit Resource

CSS Stats

CSS Stats

CSS Stats provides analytics and visualizations for your stylesheets. This information can be used to improve consistency in your design, track performance of your app, and diagnose complex areas before it snowballs out of control.

cssanalytics
Visit Resource

CSS Tricks

CSS Tricks

CSS-Tricks is a website about web design and development. It was created by Chris Coyier in 2007. It is a well-known site for web developers.

csstutorials
Visit Resource

Every Hex Codes

Every Hex Codes

Every Hex Codes is a super cool site that showcases every single hex code in existence. It's a great resource for finding the perfect colour for your projects.

colourshex codes
Visit Resource

Font Awesome

Font Awesome

Font Awesome is a font and icon toolkit based on CSS and LESS. It was made by Dave Gandy for use with Bootstrap, and later was incorporated into the BootstrapCDN.

typographyicons
Visit Resource

GitHub Profile Generator

GitHub Profile Generator

GitHub Profile Generator is a tool that generates a GitHub profile README file for your GitHub profile. It is a great way to showcase your skills and projects on your GitHub profile.

githubprofile
Visit Resource

Google Analytics

Google Analytics

Google Analytics is a web analytics service offered by Google that tracks and reports website traffic, currently as a platform inside the Google Marketing Platform brand.

analytics
Visit Resource

Hero Patterns

Hero Patterns

Hero Patterns is a collection of repeatable SVG background patterns for you to use on your digital projects.

patternsbackgrounds
Visit Resource

Heroicons

Heroicons

Heroicons is a set of free premium SVG icons for your web projects. You can use these icons in your websites, apps, and more.

iconssvg
Visit Resource

HTML5 Doctor

HTML5 Doctor

HTML5 Doctor is helping you implement HTML5 today. This site is packed with articles, web development tips, and all the code you need to get started.

htmldocs
Visit Resource

Krystal UK

Krystal UK

Krystal is a UK-based hosting company that offers a range of hosting services, including shared hosting, VPS hosting, and dedicated servers.

hostingdomains
Visit Resource

LinkedIn

LinkedIn

LinkedIn is a business and employment-oriented online service that operates via websites and mobile apps. It is mainly used for professional networking, including employers posting jobs and job seekers posting their CVs.

networkingsocialjobs
Visit Resource

Omatsuri

Omatsuri

Omatsuri offers a series of tools for web developers, including a colour palette generator, a gradient generator, and a CSS box shadow generator.

coloursgradientscss
Visit Resource

PageSpeed Insights

PageSpeed Insights

PageSpeed Insights is a tool that helps you identify ways to make your site faster and more mobile-friendly.

analytics
Visit Resource

QuickRef

QuickRef

QuickRef is a collection of cheat sheets for web developers. It includes cheat sheets for HTML, CSS, JavaScript, React, and more.

cheat sheetsweb dev
Visit Resource

Shade Studio

Shade Studio

Shade Studio is a tool that helps you generate colour palettes for your Tailwind CSS projects.

tailwindcolours
Visit Resource

Shopify Cheat Sheets

Shopify Cheat Sheets

Shopify Cheat Sheets is a collection of cheat sheets for Shopify developers. It includes a Liquid cheat sheet, a Shopify cheat sheet, and a Shopify theme cheat sheet.

cheat sheetsshopify
Visit Resource

SVG Repo

SVG Repo

SVG Repo is a great resource for free SVG icons. It has a large collection of icons that you can use in your projects.

iconssvg
Visit Resource

Tailwind Color

Tailwind Color

Tailwind Color is a tool that helps you generate colour palettes for your Tailwind CSS projects.

colourstailwind
Visit Resource

Undraw

Undraw

UnDraw is a collection of free illustrations for your projects. You can use these illustrations in your websites, apps, and more.

illustrationsdesign
Visit Resource

Vector Logo Zone

Vector Logo Zone

Vector Logo Zone is a site that provides high-quality vector logos in SVG format. It is a great resource for finding logos for your projects.

logossvg
Visit Resource

WebAIM

WebAIM

WebAIM is a non-profit organization that provides web accessibility solutions. It is a great resource for learning about web accessibility and how to make your websites more accessible.

accessibilityweb dev
Visit Resource

YouTube

YouTube

YouTube is a video-sharing platform that allows users to upload, view, rate, share, add to playlists, report, comment on videos, and subscribe to other users.

socialtutorials
Visit Resource
Back to top