Resources For Coding Challenges
byMonimolimnionon Aug 29, 2023
iCodeThis is a great resource for practicing your frontend skills, with a wide range of designs to replicate. But don't get too caught up in making a pixel-perfect replica - being creative is encouraged! To help you do just that, here's a list of resources from around the web.
High-quality, open-source images for pretty much any project. To link to an image, right-click in your browser and select copy link. The last two parameters - w and q determine the width in pixels and quality of the image which is useful for adjusting to your use case.
Another open source option. The image links allow you to choose the width and height of the image, as well as the color space if that matters to you.
The Tailwind docs are generally excellent, and the section on colors is no exception! Even if you're not using Tailwind, you can still make use of the hand-curated set of colors Tailwind provides by simply clicking your desired color in the docs, which copies the hex code to your clipboard for pasting.
There are many color scheme generator tools online, but Huemint is one of the best. Not only does it generate customizable color schemes, it also displays them in mockup websites (in various styles), illustrations, gradients, and more.
Dribbble is a resource with many uses for web devs, but one of the most useful and little-known tools is the ability to filter a search by color. Just enter a hex code and you'll get plenty of results showing your color in action - and also get some great, hand-picked color combinations too.
The obvious choice for custom fonts is Google Fonts, which has a huge selection. To help you choose what fonts to use, try:
This has hundreds of carefully selected Google Font pairings.
Over 4600 free and open-source icons that are designed to make your website or app attractive and visually consistent.
This set of icons is designed by the same team as Tailwind CSS itself, so the copied SVGs (also available in JSX flavor) come ready with Tailwind width and height classes.
A more exhaustive icon set than Heroicons, with more download options including web component and PNG format. It also has a great selection of brand icons.