A list of resources that may be useful when completing your projects 😊
| Link | Description | |
|---|---|---|
 |
Animate.css | Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. |
 |
Animejs | A lightweight JavaScript animation library with a simple, yet powerful API. |
 |
CSS Shake | Some CSS classes to move your DOM! |
 |
Greensock | JavaScript animation built for professionals, GSAP is packed with features that make most other engines look like cheap toys. |
 |
Loading.io | Build Your Ajax Loading Icons, Animated Text and More with SVG / CSS / GIF / PNG ! |
 |
Lottie Files | Lightweight, scalable animations for your website and apps. |
 |
Magic Animations CSS | Magic CSS are a set of simple animations to include in your web or app project's. |
 |
Moving Letters | Letter animation code. |
 |
Preloaders.net | provides more than 1000 different animations, split into 18 categories including most widely used loading spinners, horizontal bars and more. |
 |
Spinkit | Simple CSS Spinners. |
 |
Wicked CSS | For the ones looking to spice up their sites with some sweet animation effects. |
| Link | Description | |
|---|---|---|
 |
Audio Micro | Royalty Free stock music for any project. |
 |
Pixabay | Pixabay is a vibrant community of creatives, sharing copyright free images, videos and music. |
 |
uppbeat | Free music for creators |
 |
Videvo | Royalty Free Music. Thousands of royalty-free stock music tracks at your fingertips. |
 |
Zapsplat | Over 111,000 free sound effects & more than 450 royalty free music tracks. |
| Link | Description | |
|---|---|---|
 |
Animatedbackgrounds.me | A Collection of 30+ animated backgrounds for websites and blogs. |
 |
BG Jar | Free svg background generator for your websites, blogs and app. |
 |
Cool Backgrounds | A collection of tools to create compelling, colorful images for blogs, social media, and websites. |
 |
CSS Gradient | A free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile. |
 |
Get Waves | A free SVG wave generator to make unique SVG waves for your next web design. Choose a curve, adjust complexity, randomize! |
 |
Haikei | Generate unique SVG design assets |
 |
Mesh.y | Generate beautiful mesh gradients |
 |
Particles.js | particles.js is a lightweight JavaScript library for creating particles. |
 |
Pattern Pad | PatternPad generates graphical patterns based on a variety of parameters. This results in an endless number of variations. |
 |
RawPixel | Free images, PNGs, stickers, backgrounds, wallpapers, graphic templates and PSD mockups. |
 |
Stock Vault | 139,637 free stock photos, textures, backgrounds and graphics for your next project. |
 |
Super Designer | A collection of free design tools to create unique backgrounds, patterns, shapes, images, and more with just a few clicks |
 |
Vecteezy | Explore royalty-free vectors, clipart graphics, icons, stock photos, stock videos, backgrounds, patterns, banners, and designs. |
| Link | Description | |
|---|---|---|
 |
Bootstrap Icons | Free, high quality, open source icon library with over 1,600 icons. |
 |
Font Awesome | Font Awesome is the Internet's icon library and toolkit, used by millions of designers, developers, and content creators. |
 |
Noun Project | Noun Project features the most diverse collection of icons and stock photos ever. Download SVG and PNG. Browse over 5 million art-quality icons and photos. |
 |
Profile Technology Icons | Search your technologies and then generate markdown code snippet to your GitHub profile. Choose from 143 icons! |
 |
Reshot | Design freely with instant downloads of curated SVG icons and vector illustrations. All free with commercial licensing. |
 |
Skill Icons | Showcase your skills on your GitHub or resumé with ease! |
 |
SVG Repo | Free Vectors and Icons in SVG format. Download free mono or multi color vectors for commercial use. Search in 300.000+ Free SVG Vectors and Icons. |
 |
TSG - Animated Tech Stack Generator | Techstack generator that can show dynamic technology stack. |
 |
UXWing | Exclusive collection of free icons download for commercial projects without attribution. Well Optimized free SVG and PNG icons that can use on interface design & Web and Application development. |
|
Vecteezy | Explore royalty-free vectors, clipart graphics, icons, stock photos, stock videos, backgrounds, patterns, banners, and designs. |
| Link | Description | |
|---|---|---|
 |
On Fire Illustrations | Free illustrations that will wake any project up with its unique mood. |
 |
Open Peeps | Open Peeps is a hand-drawn illustration library to create scenes of people. |
|
Reshot | Design freely with instant downloads of curated SVG icons and vector illustrations. All free with commercial licensing |
|
Stock Vault | 139.637 free stock photos, textures, backgrounds and graphics for your next project. |
 |
unDraw | Open-source illustrations for any idea you can imagine and create. |
| Link | Description | |
|---|---|---|
 |
FreePik | All the assets you need, in one place. Find and download the best high-quality photos, designs and mockups. |
|
Noun Project | Noun Project features the most diverse collection of icons and stock photos ever. Download SVG and PNG. Browse over 5 million art-quality icons and photos. |
 |
Pexels | Free stock photos & videos you can use everywhere. Browse millions of high-quality royalty free stock images & copyright free pictures. |
 |
PicJumbo | Picjumbo is a free stock photo site created in 2013 by designer & photographer Viktor Hanacek. |
 |
PikWizard | Free images, videos & free stock photos. Unlimited downloads ✓ Royalty-free Images ✓Copyright-free for commercial use. |
|
Pixabay | Pixabay is a vibrant community of creatives, sharing copyright free images, videos and music. |
 |
Pxhere | Over 1,147,466 high quality photos. Free for commercial use. |
|
RawPixel | Free images, PNGs, stickers, backgrounds, wallpapers, graphic templates and PSD mockups. |
|
Stock Vault | 139,637 free stock photos, textures, backgrounds and graphics for your next project. |
 |
Unsplash | Beautiful, free images and photos that you can download and use for any project. |
|
Vecteezy | Explore royalty-free vectors, clipart graphics, icons, stock photos, stock videos, backgrounds, patterns, banners, and designs. |
| Link | Description | |
|---|---|---|
|
Pexels | Free stock photos & videos you can use everywhere. Browse millions of high-quality royalty free stock images & copyright free pictures. |
|
Pixabay | Pixabay is a vibrant community of creatives, sharing copyright free images, videos and music. |
|
Vecteezy | Explore royalty-free vectors, clipart graphics, icons, stock photos, stock videos, backgrounds, patterns, banners, and designs. |
|
Videvo | Over 300,000 video clips in 4K and HD |
| Link | Description | |
|---|---|---|
 |
Adobe Capture | 📱 MOBILE APP - Use your mobile device as a vector converter to turn photos into colour themes, patterns, type, materials, brushes and shapes. |
 |
Adobe Color Wheel | Create color palettes with the color wheel or image, browse thousands of color combinations from the Adobe Color community. |
 |
Canva | Want a color scheme that perfectly matches your favorite images? With Canva's color palette generator, you can create color combinations in seconds. |
 |
ColorSpace | Here you can find the perfect matching color scheme for your next project! Generate nice color palettes, color gradients and much more! |
 |
Coolors | Generate or browse beautiful color combinations for your designs. |
 |
Muzli Colors | Search, discover, test and create beautiful color palettes for your projects. |
 |
Huemint | Utilises machine learning to create unique colour schemes. |
| Link | Description | |
|---|---|---|
 |
Font Joy | Fontjoy helps designers choose the best font combinations. Mix and match different fonts for the perfect pairing. |
 |
Fontpair | Free fonts and font pairings to use in your next project. |
 |
Google Fonts | Google Fonts is a library of 1,453 open source font families and APIs for convenient use via CSS and Android. |
 |
TypeSource | Google Web Font inspiration in HTML & CSS |
| Link | Description | |
|---|---|---|
 |
AdobeXD | 💰 Subscriprion needed - Adobe XD is a vector design tool for web and mobile applications, developed and published by Adobe Inc. It is available for macOS and Windows, and there are versions for iOS and Android to help preview the result of work directly on mobile devices. |
 |
Balsamiq | 💰 Subscriprion needed - Wireframe tool. 💡 Tip: Code Institute students have access to balsamiq (2022). See slack for more details. |
 |
Figma | Figma is a collaborative web application for interface design, with additional offline features enabled by desktop applications for macOS and Windows. |
 |
Mockup | 📱 Mobile App - Sketch your next project. |
 |
Sketch | 💰 Subscriprion needed - Sketch gives you all the tools you need for a truly collaborative design process. From early ideas to pixel-perfect artwork, playable prototypes and developer handoff. |
| Link | Description | |
|---|---|---|
 |
drawSQL | Simple, beautiful database diagram editor for developers to create, collaborate and visualize their entity relationship diagrams. |
 |
Lucidchart | Create flowcharts & diagrams online |
 |
Diagrams.net | Free online diagram software. |
 |
Wireflow | A free, online and open source tool for creating beautiful user flow prototypes. |
| Link | Description | |
|---|---|---|
 |
Free Formatter | Free online tools for developers, including formatters (JSON, XML, HTML, SQL, etc.), minifiers (JavaScript, CSS), validators, compactors and many more! |
 |
W3C Validator | This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc. It can also validate your CSS. |
| Link | Description | |
|---|---|---|
 |
JS Hint | This is online PEP8 checker. Just paste your code or upload file and see results. |
| Link | Description | |
|---|---|---|
| ⛔️ Currently Down | PEP8Online | This is online PEP8 checker. Just paste your code or upload file and see results. |
 |
Code Insitute Python Linter | Code Institute PEP8 alternative python linter |
| Link | Description | |
|---|---|---|
 |
Lighthouse Overview | Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. |
| Link | Description | |
|---|---|---|
 |
Color.a11y | Free color contrast tool that displays color contrast issues of a web page or chosen color-pair per WCAG 2.1 Guidelines |
 |
Colour Contrast Checker | This tool tests the contrast ratio of your background and text for accessibility. It will also indicate if the colors pass the WCAG contrast ratio. |
 |
Randoma11y Color Contrast Generator | Get random, accessible color combinations and train the robots by voting. |
 |
WAVE Website | WAVE® is a suite of evaluation tools that helps authors make their web content more accessible to individuals with disabilities. WAVE can identify many accessibility and Web Content Accessibility Guideline (WCAG) errors, but also facilitates human evaluation of web content. |
|
WAVE Website | Wave Chrome Extension |
| Link | Description | |
|---|---|---|
 |
Badgen | Fast handcrafted svg badge generator. |
 |
Contrib.rocks | Generate an image of contributors to keep your readme in sync. |
 |
For the Badge | Badges for badges' sake |
 |
Shields.io | Fast and scalable informational images as badges for GitHub, Travis CI, Jenkins, WordPress and many more. |
| Link | Description | |
|---|---|---|
 |
Birme | Image resizer, cropper and format converter. |
 |
TinyPNG | Reduce the file size of your WEBP, JPEG and PNG files. |
 |
Cloud Convert | Online file converter. |
 |
Online Convert | Free online file converter. |
| Link | Description | |
|---|---|---|
 |
Am I Responsive | Show off how responsive design looks across different browsers easily with this 4 in 1 viewport tool. See how your site looks on desktop, laptop, tablet & mobile. 💡 Tip: You can showcase different pages on each of the devices, simply use your navigation within the device to navigate to the page you want to display. |
 |
Multi Device Mockup Generator | Multi device website mockup generator is free online tool to test your responsive website on apple devices including Apple iMac, Macbook, iPad and iPhone. |
 |
Media Genesis | Responsive web design checker. |
 |
BrowserStack | Responsive design testing on real devices. Note - this is a free trial and then may have to pay for. |
| Link | Description | |
|---|---|---|
 |
Digital Samaritan | Various useful digital tools |