Coding Resources

Udemy

A large range of online video tutorial courses by many different instructors. (Paid / Free)

CodeCademy

Online courses on different programming languages and curated career path courses. (Paid / Free)

FreeCodeCamp

Online courses on different programming languages. (Free)

The Odin Project

Free comprehensive curriculum will equip you to be a full stack developer, no matter your current experience level. (Free)

Visual Studio Code

IDE and code editor. (Free)

Code Sandbox

Online code editor great for collaboration. (Paid / Free)

Code Pen

Online code editor 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.. (Paid / Free)

GitHub

Online code hosting platform for version control and collaboration. (Free)

Git basics, and how to write a git commit message

Netlify

Website hosting platform. (Paid / Free)

Virtual Machine

The Odin Project shows how to install and setup a virtual machine on a PC with VirtualBox and Xubuntu. (Free)

MySQL Workbench

Visually design, model, generate and manage MySQL databases. (Free)

Draw.io

Online diagram software for creating flowcharts, process diagrams etc. (Free)

Figma

Online collaborative interface design tool. (Free)

ChatGPT

AI tool, extremely useful for debugging and correcting code (but doesn't always answer correctly, so use with caution and thoroughly check the AI's suggestion). (Free)

Codewars

Solve programming tasks (kata), different levels and programming languages available.

Frontend Mentor

Frontend web development challenges.

Stack Overflow

The go to place to search for answers or ask your programming question.

Create A Dark Mode

An article by Jake McCambley detailing how to create a toggle colour theme button.

Google Fonts

#1 resource for free webfonts. Over 1500 open source fonts available to use.

Tint & Shade Generator

The purpose of this tool is to accurately produce lighter and darker versions of any given hex colour.

Coolers Colour Contrast Checker

Calculate the contrast ratio of text and background colours. Essential accessibility check.

Colour Code Converter

Hex, RGB, HSV and HSL colour conversion tool.

Pexels

Royalty free stock photos, images and videos. (Free)

Unsplash

Royalty free stock photos and images. (Paid / Free)

GIMP

Open source image editor. (Free)

Canva

Online graphic design tool - can be used to create presentations, videos, social media posts, posters etc. (Paid / Free)

unDraw Illustrations

Open source illustrations. (Free)

Hero Icons

Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.

Ion Icons

Premium designed icons for use in web, iOS, Android, and desktop apps. Support for SVG and web font. Completely open source, MIT licensed and built by Ionic.

Bootstrap Icons

Free, high quality, open source icon library with over 1,800 icons. Include them anyway you like - SVGs, SVG sprite, or web fonts.

Phosphor Icons

Phosphor is a flexible icon family for interfaces, diagrams, presentations, free and open source.

W3C HTML Validator

Online HTML validation tool - check your HTML via URI, upload or direct input.

W3C CSS Validator

Online CSS validation tool - check your CSS via URI, upload or direct input.

Sqoosh

Free online app that reduces images sizes.

PageSpeed Insights

Test your webpage speed.

MDN HTML Documentation

Full reference documentation for HTML, includes browser compatibility and depreciation information.

MDN CSS Documentation

Full reference documentation for CSS, includes browser compatibility and depreciation information.

BEM Naming Convention

A naming convention for CSS classes.

Flexbox Malven

A visual guide to CSS flexbox settings.

Grid Malven

A visual guide to CSS grid settings.

MDN JavaScript Documentation

Full reference documentation for JavaScript.