This month’s new collection of tools and resources is a mix of elements for designers and developers. You’re sure to find something useful from fun little divisions to tools that can speed up development.

Here’s what’s new for designers this month:

June’s most popular


Codewell is a service that helps you learn, practice, and improve your HTML and CSS skills with real-world templates. The advantage here is quite obvious. When you work with real models, you see the result of actions and changes. The tool includes free and premium options with new models that work weekly. Everything works in a responsive environment, and free plans have access to free challenges and a loose community; the paid plan also includes source files and premium challenges. You need a Github login to get started.


LoomSDK is an easy and reliable way to add video communication to your product – and it’s free. The SDK allows users to record, embed, and view Loom videos directly in web applications – adding clarity and context to any workflow.

Pintr New image

Pinter New image makes your photos funky and funny line art. Load an image with a lot of contrast, set the desired look with the controls and upload. New images are available in PNG or SVG format. Maybe it will allow you to create your following profile pictures on social media or a great avatar.

Terms and conditions apply

Terms and conditions apply is a game that explains all the small pop-ups you accept when you go to and use websites. You will be given the task to start the game: Do not accept the terms of use, say no to notifications and refuse cookies. Can you do it?


Khroma use artificial intelligence (through a personal algorithm) to learn the colors you love and create palettes to help you find, search, and save for use in your project. The beta tool makes it easy to get started, even if you have a few color-coded homework to get started.

6 online tools


Mmm is a different type of website builder. The tool, which is still an alpha letter, allows users to create drag-and-drop sites in a simple way. It works almost like making a digital collage. Users can get a custom URL, and each page is responsive. The interface is designed so that you can even build your own phone. And here’s another feature – they encourage messy designs.

Light gallery

Light gallery is a lightweight, modular extension to the JavaScript image and video lightbox gallery. It works with React.js, Vue.js, Angular and TypeScript. It includes a wealth of demos and documentation to help you get the most out of this gallery tool.


Vandal is a great browser extension for Firefox or Chrome that lets you go back in time without switching tabs. The Vandal utility provides quick and easy access to all archived snapshots of a URL, and also supports transitioning to a snapshot.

CSS Layout Generator

CSS Layout Generator is a tool for creating CSS for layout parts. It is also a learning tool to teach what is possible in CSS to place elements in a browser. Adjust the settings to see how they affect the layout, CSS, and HTML.

Alpaca Data API

Alpaca Data API is an easy-to-use feed that allows you to import stock market data for modeling and post-testing. (It includes free and premium options to suit your needs.)

Mobile Palette Generator

Mobile Palette Generator is a color selection tool that allows you to choose the best shades for your mobile design projects. It then displays all the primary, secondary, and highlight color information.

6 icons and user interface packs


Iconoir is an open source icon data repository with over 900 SVG icons. Search for icons, browse by categories, or push what you’re looking for. Everything is ready to use without registration or filling out forms.

Pmndrs Market

Pmndrs Market is a collection of over 300 three-dimensional elements and drawings of things for use in projects. The model designs are rough in style and have a realistic feel.

Boring avatars

Boring avatars is a fun collection of semi – editable characters without faces, hence the name. It’s a fun playground that brings a new twist to one you might not expect to do otherwise.


Spark is a free download with three different website design starters. The hero images are ready to build and are made for Figma.

Venus design system

Venus design system is a premium interface package that includes over 2,000 components and space to help you design quickly. There is also a demo version that you can test before you buy.


ReadyUI includes over 200 blocks and templates for offices, developers, startups and more. Everything is production ready with Bootstrap and Figma files. Choose from light or dark themes and find the design that suits your project.

5 tutorials

Creating generative SVG characters

Creative generative SVG characters is a marriage of JavaScript and SVG that creates funny characters derived from drawings. Shapes and small code let you see how to draw smooth lines, create polygons, and add other shapes for fun. Codepen has a complete presentation.

5 steps to faster web fonts

5 steps to faster web fonts helps you remove some of the mass from popular typography options. Iain Bean explains a number of methods you can implement to ensure that load times are fast with some applicable code snippets. Here is a preview: Tip 1 is to use the latest file formats (WOFF2).

Complete link

Complete link guides you through the A11Y collective accessibility inspections to link best practices. Some things that you think are the “right way” can be questioned here. The information goes through everything from design to semantics and is wonderfully thorough. It’s a must read.


Readsom is a curated collection of newsletters and emails that you can read online or sign up for. Its passphrase is “find the content you want to read”. It’s a great way to find newsletters that interest you, including plenty of design and development options you might not otherwise know about.

Famous first websites

Famous first websites is not a tutorial per se, but it provides a good place for visual learning. See what your favorite sites looked like when they launched, and template development.



Please enter your comment!
Please enter your name here