Don’t get me wrong, I ♥ CSS, but it can quickly take most of your coding time. The solution? TailwindCSS.
I’ve discovered it few months ago, when I started my internship, and it didn’t take long for me to fall in love with it. What’s so good about this framework?
first of all, it’s really easy to get started!
documentation is great, meaning you don’t have to memorise anything.
it has everything you could need straight out of the box, but if you do need more,
it is fully customisable (also super easy to do so!)
The best options to get started is to install via npm or yarn, but you can also use CDN (just bear in mind this option comes with some limitations).
Long story short on how to understand tailwind: just add a class to your element, and tailwind will compile it to a beautiful CSS! You have no idea how much time you’ll save by not going back and forth from one file to another, and using short names, like mt-2 or font-semibold. (All of which are in the documentation, so definitely check it out!) Tailwind also has some lovely animation classes, so all you have to type is animate-pulse, animate-bounce, animate-spin or animate-ping, and call it a day, because your website now has awesome animation that only took seconds of your time!
Bonus stuff from Tailwind, that will make creating new projects a breeze? TAILWIND UI. Ready made components, that you can use like building blocks. Access to all of them is, unfortunately, paid but you can use some of them for free here.
Have you ever heard of Tailwind? Maybe you already used it in any of your projects? Or perhaps there is another CSS framework you really like? Let me know!
In the last post, I’ve shared my huge list of sources for license-free images (you can read it here). I hope you enjoyed this library of free goodies because today I would like to list my go-to places when I need cool illustrations for my projects.
Here is my list of sources for licence-free illustrations:
My all-time favourite- Undraw.co! I love the style the characters are drawn, and 99% of the time they perfectly fit the purpose. You can edit them to your liking and don’t need to credit the author. Sometimes I love the illustration, but I’d rather a different character on it, so I download two different illustrations and edit them by taking a character from one, and the surroundings from the second one. Works like a charm.
I discovered Blush recently, and even though I haven’t used it for any project yet, I am already loving this platform! Lots of different styles, so everyone will find their perfect illustration. Blush is available as a plugin for Figma, or a web app, to simply download the file onto your computer. There are two different options: a free plan which allows you to download illustrations in PNG format, or paid plan, where you get them in SVG format. You don’t have to credit the author in either of options. The only issue is, there are too many lovely designs, I might have a problem to decide on one! 😂
Many Pixels offers their grand gallery of illustrations for free. You can customise the colour straight on the page, or edit the file after downloading it. There are 4 different styles to choose from Monochromatic, Isometric, Two Color and Flatline. More than enough to find THAT one you need. (MP also offers a paid plan, where you get personalised help from a design
Illustrations.co is the result of a #100daysChallenge, where the author created 1 illustration a day, for 100 days. There are some new ones as well! (+COVID-19 related bundle) Really cool initiative, and you can now use them for free.
Okay so this one is a little bit different, but I loved the style of those characters, I had to add it to the list. Those illustrations are under Attribution 4.0 International (CC BY 4.0) license, which means you have to give appropriate credit, provide a link to the license, and indicate if changes were made.
You have to enter your e-mail address to download THE FULL library. You can then edit them and use on any project. As we can read on the website, each character comes with a range of poses, outfits and skin tones. There are also 43 objects to choose from to create a wide range of scenes. Definitely worth visiting, if you don’t mind crediting the author.
Huge collection of cool illustration which will be perfect in any project. Different styles to suit both informal and formal apps/websites/infographics etc. I will definitely use it in one of my next projects. You do need to credit and link storyset.com!
Different type of source. Freeillustrations is a library of different illustrations collections. In here, you have to find out the type of licence by clicking on the collection you like. Most of the ones I clicked on where free for personal and commercial use though. I’m sure everyone will find something they like in here.
9 different styles (one of them being SVG country maps) where you can change colours to match your design. “For free images, you are required to include the link attribution back to Designs.ai as “Brought to you by Designs.ai” when using any illustrations from Graphicmaker.” This website has a lot more cool stuff than just illustrations though. There is also a logo maker, video maker, speech maker, design maker, color matcher and font pairer too. (All have different licenses so please read Do and Donts page)
Which illustrations are you gonna use for your next project? Let me know your favourites! 👇
The right images are so important on the web. They make a huuuuuuge difference in any project. But have you ever searched the internet for an hour (sometimes more), looking for a good-looking, license-free image, illustration or an icon to go with your new design or project? Yeah…me too. Probably most of the developers were, at some point. Over the time, I discovered quite a few great websites that offer just that, so I’m gonna make your life easier. I’m gonna share my resources with you. Let’s start with images…
Here is my list of sources for license-free images:
One of the most popular, and for a good reason. Unsplash offers a huge amount of images in great quality. Most of the images on my blog are from there! As you can read in their license page, “you can use them [images] for commercial and noncommercial purposes. You do not need to ask permission from or provide credit to the photographer or Unsplash, although it is appreciated when possible.”
With over 1.7 million+ high-quality stock images and videos that you can use royalty-free, I’m sure you will find what you need. As with the Unsplash, attribution is not required, but of course, highly appreciated.
Another great source for images. What’s interesting, images from Pexels can be modified to your liking.
Different and smaller than previous websites, Styled Stock, feminine stock photography, offers good resolution images for free. They also stock “bundles” of photos you can buy.
Negative Space works under CC0 license, which means you can download, edit, use for personal or commercial purposes without purchase, permission, or mentioning the author. They seem to have a good library of images in different categories, but some ads on the website made me question whether the service is really free to use. (it is though. Unless you click the Shutterstock ad 😅)
A good chunk of high-res images free to use for private and commercial purposes. This service is not working under the CC0 license, so image copyrights are still belonging to the author.
Great platform, lovely images, and they even created a COVID-19 category (made me laugh but actually, a really cool idea) big + for images with polish money on the main page (😂 just kidding… sorta)
Stock snap is working under CC0 license, which gives you a lot of freedom with your downloaded image. They have a big library, but again, Shutterstock ads are mixing in, and it’s really easy to pick a Shutterstock image (which will transfer you to their website. no big deal, unless you just found THAT photo you need and it turns out to be a paid one 👎)
Although they offer a lot of nice images, the website is really slow (probably from all those “cool” animations and transitions. Yeah they look awesome but there is just too many of them, especially on the About page!) and the UX not so great.
Smaller library, but if you can’t find what you are looking for on the big portal (like Unsplash, I recommend looking at Picography. I love their logo too!
License-free images from Shopify. They have a lot of categories and great images I haven’t seen anywhere else. Definitely worth a visit.
I hope this post was useful and you just found your favourite portal to get awesome images for your projects!👩💻
Fruition of my last assignment- website redesign of Gutenberg.org
Medium fidelity wireframes have been done in Adobe XD. Mobile first approach has been used in order to enhance the design as the screen sizes increases, rather than take cool stuff away with a decreased size.
After the initial survey, the colour scheme has been changed to suit wider group of users.
Junior Front end developer and (Bsc) Digital Design and Web Development student on Solent University. Originally from Poland but living in UK since 2013.
Multi-tasker and a busy bee. Photography lover with a need to create pieces that are both beautiful and useful.
This website is all about growth. Hop on, because it’s the journey that matters!
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.