Here is a list of some very helpful frontend development related websites and projects that I’ve used over the years and wanted to share. Each site in some way has helped me with frontend work and has been useful for designing new themes or websites.
https://fontawesome.com/ - Vector icons in a font format, easy to use and embed into your HTML for awesome high detailed icons to use on buttons and UI elements. Has a free version but also a pro level
https://www.svgbackgrounds.com/ - Use vector based backgrounds to give your site a fresh look, great for when its either hard to get the same effect with CSS alone. Low file size and supports all browsers
https://emojipedia.org/ - Sometimes it just adds a personal touch if you use emojis and its annoying trying to find the right one to use, so I’ve used this site to search for the right emoji before
https://tools.pingdom.com/ - Not for design work but useful to test the speed of your site, search for bottlenecks and UI issues
Flexbox Cheatsheet - Not everyone can be a CSS flexbox master, I can’t tell you how many times I’ve needed to check this helpful guide before when using CSS flexbox for styling
Common CSS Flexbox Layout Patterns with Example Code | Tobias Ahlin - Because CSS flexbox is hard, here is another site with useful examples for different layouts
https://linea.io/ - Everyone likes free stuff right? Not everyone is good as designing graphic icons, so this site gives you icons for free! Similar to Font Awesome, SVG based icons
CSS Color Gradient Generator: beautiful gradients for free - Want the perfect colour gradient for your website with CSS? Simple tool to generate modern colours and generates the CSS code for you
https://getuikit.com/ - A lightweight and modern UI framework. Sometimes it’s nice to have a helping hand in frontend web work, a UI framework can help speed up development
Ace - The High Performance Code Editor for the Web - Need to embed a code editor directly into your website to display syntax highlighted code? Check out ace c9!
https://gradients.cssgears.com/ - Another CSS gradient generator site, helps with settling on a new theme or colour, displays gradients in a grid of cards
https://www.flaticon.com/ - A fantastic collection of icons to use on your websites as button icons or with graphic design work. Free and paid icons
https://cssgradient.io/ - Another choice for making CSS gradients, a little more advanced than other gradient tools
https://www.transparenttextures.com/ - Mainly used to create backgrounds with a texture that you can apply a colour to using HEX codes
https://semantic-ui.com/ - An awesome frontend UI kit with a huge range of web elements to help you build a clean looking interface, easy to use and install
Animate.css - Add a little magic with these CSS animations
Hover.css - A collection of CSS3 powered hover effects - CSS animations for when you hover over something
Hopefully this list is helpful to you, maybe you found something new from this list that you didn’t use before? Have I missed something that should be here, let us know!
I may update/edit this list as time goes on. Thanks for reading!