Latest resources for frontend developers #23
In episode number 23 of the latest resources for front-end developers, we list 14 useful resources, including a thinking tool, a collection of gradients, beautiful code examples, and more.
Component Encyclopedia
Component Encyclopedia by Storybook is a comprehensive library of thousands of web components from leading user interface engineering teams.
Free
Web design inspiration
Visit Website
Good palette
Good palette is a free resource for creating color palettes, checking the contrast of the created ones, and previewing them in different examples of user interfaces.
Free
Color tool
Visit Website
Menu micro-interaction with CSS
A code snippet of a minimalist three-dot menu with a nice opening animation, and circular icon navigation.
Free
Code snippet
Visit Website
Basic icons
Basic icons is a growing open source collection of over 300 pixel-perfect icons with customizable stroke and size.
Free
Icon set
Visit Website
Ingradients
Ingradients is a collection of hand-selected mesh gradients in different formats such as FIG, SVG, JPG, and PNG for your next design project.
Freemium
Gradient collection
Visit Website
Sublus
Sublus is a library with more than 120 components to create custom illustrations, easy to use, compatible with Figma, and 100% free.
Free
Illustration library
Visit Website
Pure CSS animated image zoom
a CodePen of a really impressive zoom image effect made with just CSS, clicking on different radio buttons shows different areas of an image in detail.
Free
Code snippet
Visit Website
Pattern generator
The superdesigner.co pattern generator allows you to create a customizable random pattern and export it in SVG, PNG, or JPG easily.
Free
Pattern generator
Visit Website
Untools
Untools is a carefully selected collection of tools and frameworks for problem-solving, decision making, and systems understanding.
Free
Thinking tool
Visit Website
WickedBlocks
Wickedblocks is a collection of over 120 fully responsive components to copy and paste into your Tailwind CSS projects for free.
Free
Web components library
Visit Website
Expanding gallery view
A code fragment of an image gallery with an eye-catching hover effect that expands the image you mouse hovers and turns it from black and white to full color.
Free
Code snippet
Visit Website
Awesome readme template
If you have a project on Github and you want to improve the README file of it, with the Awesome readme template you have an example of how to do it.
Free
Github tool
Visit Website
JavaScript.info
On the Modern.info website, you will find extensive JavaScript tutorials from beginner to advanced levels, made with simplicity and detail-oriented.
Free
JavaScript learning tool
Visit Website
Beautify Github profile
Beautify Github profile is a repository with step-by-step guides and tools to make your Github profile attractive.
Free
Github tool
Visit Website