Web Development & Design Resources

Need something to help get you started? Inspiration? Reference? Assets? Check out these resources below. Send a Pull Request if you want to add more.

Onboarding Process and UI/UX Designs

• Laws of UX
• Page Flows
• Awwwards
• Collect UI
• Dribble
• Land Book
• Siteinspire
• Minimal Gallery
• Lottie Files
• Ninja Lapa

Typography

• Fonts In Use
• Google Fonts
• Font Squirrel

CSS

• 110+ CSS Hover Effects
• Freefrontend
• Animista
• Animate CSS
• Cubic Bezier Animations
• CSS Zen Garden

Grid Layout and Flexbox

• Beginner’s Guide to CSS Grid and Flexbox
• Grid vs Flexbox
• CSS Grid Layout Guide
• Nested Grid

Project Assets

• unDraw
• Many Pixels
• Avatar Generator
• AI-generated Avatars

Browser Compatibility / Optimize Website

• Can I Use
• Yellow Lab Tools

Compress Images

• I Love IMG
• Squoosh
• SVGminify

Icons (free for commercial use)

• SVG Repo (public domain icons)
• Google Icons (Apache License, v2.0)
• Font Awesome (CC by 4.0 license; Must give credit)
• Icons8 (Must give credit in your software/website)
• SF Symbols by Apple (Only allowed to use for Apple device apps. Correct me if I’m wrong)

Icons (free for personal projects; premium options for commercial uses)

• The Noun Project
• Flat Icon
• Feather

Photo Stock Images

• Unsplash
• Pixabay
• Free Pik

Stock Videos

• Pexels
• Mix Kit

Colors, Gradients

• Eggradients
• Trianglify
• Cool Backgrounds
• Adobe Color
• ColorBox
• Color Supply
• Flat UI Colors
• Paletton
• Blend
• Web Gradients
• Material UI
• Hero Patterns

Favicons

• Favicon

Lorem ipsom text and dummy user text

• Random User Generator
• Lorem Ipsum Generator

Screenshot Mockups

• Screenshot.Rocks
• Skymakers MockUPhone
• Cleanmock

GitHub

• Basics

Node

Install multiple versions of Node at once

The world is your oyster, go make something happen!