Personal Project Resources

Recently, I have been working on a handful of personal web development projects (this blog included!) to continue growing and learning in this vast field of work. Throughout working on these projects, I came across some fantastic resources perfect for incorporating into any web development project, big or small. There is no particular rhyme or reason to this list; it's simply what I found useful for my own projects. I hope you find it useful as well! Enjoy!

1. open emoji

Open emoji provides an open source library of free downloadable emojis in either SVG or PNG formats. These emojis all share the same design theme, giving them uniformity and consistency in appearance. Using these emojis in SVG or PNG format offers a great way to utilize emojis in your personal project without fear of potential stylistic changes to them depending on user platform (iPhone, Android, etc.). The open emoji site itself has a fantastic user interface, making it a breeze to search for and find the emojis you need for your project. Some of my favorite features of the site are the ability to toggle color on / off for emojis and being able to search for emojis by unicode. An example use case for open emoji can be found in one of my own personal projects, PetPost. There I make use of various open emoji SVGs in the React built web application via a custom <Icon /> component. Check out the code here! The creative possibilities for incorporating these emojis into your project are endless!

2. box-shadows - css scan

CSS scan is a truly fantastic tool and resource for web development. In a nutshell this tool allows you to view an html element's css on a webpage by simply hovering over it, eliminating the tedious "inspect element" step that web developers are familiar with. However, the tool itself is not the focus of this point (as useful as it is). Css scan has a page dedicated to displaying a vast list of various box shadows collected from across the web, which the css for them was copied using the css scan tool itself. This list has come in handy for me time and time again when I need quick and clean looking box shadows for my personal web development projects. The page has 93 unique box shadows, all displayed in a very straight forward tiled list. The css for any box shadow can be copied simply by clicking on the respective tile, then you're ready to paste it right into your project! I find this extremely handy for any web development project and definitely worth bookmarking in your browser. A great way I made use of these box shadows can be found in PetPost, my React built social media web application. Any box shadow displayed within PetPost came straight from the css scan box shadow page. Enjoy!

3. coolors

Coolors is a super useful color palette generator with intuitive / seamless UI. One of the toughest steps for me when embarking on a new web development project is choosing a color theme. An awkward color theme on a website can easily turn a user away, regardless of how well it is built or functions. With coolors you can easily generate great looking color palettes with the tap of your spacebar! The free plan allows you to randomly generate 5 color themes, and cycle back and forth between the palettes that have been generated. Let's say you wanted to make a simple website to sell plants (for example), then this green palette here could be great for that! Or if you wanted to make a more flashy site to really grab users' attention, then this palette here might be good. For my own project, PetPost, I found a wide range of pastel blue color palettes like the one here, as I was aiming for a Facebook / Twitter type social media site look. The free plan also includes very useful tools like being able to view your generated color theme through the lens of various types of color blindness as well as a color adjuster tool for any of the 5 colors in your generated palette (to perhaps tweak a generated palette more to your own taste). However, for only $3/month you can sign up for the pro plan where you can save unlimited color palettes, generate palettes with greater than 5 colors, explore millions of color themes, and much, much more. This is a resource definitely worth at the very least playing around with.

4. open trivia api

The open trivia api is a great for building a font-end web development project, without worrying about setting up a back-end. This API provides a huge collection of trivia questions (along with their respective answer choices) from the open trivia database via a generated url. It is super simple to understand and use, making it great for beginner web development projects. Check out out how I utilized this API in my own React built trivia web application. It can be as simple as building a form on your front-end, which takes "question amount", "category", and "difficulty" form values, constructing the api url from those submitted form choices (via url parameters), and then fetching the data via that constructed url. You'll now have now have some great trivia data to start fleshing out your own trivia web application. In my opinion, fun and interactive web development projects are the best, and this API provides you the opportunity to make one for yourself!

I hope you get some fun / use out of these resources. I will try to update this list as I come across more!