Resources

My compiled list of web development resources.

HTML / CSS

CSS Frameworks

• Bootstrap
• Bulma
• Materialize
• Pure
• Semantic
• Tailwind
• Flowbite - Tailwind components
• DaisyUI - Tailwind components
• Material Design Lite
• Foundation

CSS Precompilers

• Sass
• PostCSS

CSS Libraries

• Animate

CSS Generators

• CSS Gradient Generator
• Gradient Magic
• Accordion Slider
• Best CSS Button Generator
• CSS Button Creator
• Web Code Tools
• Clippy
• Cubic Bezier
• Separator Generator
• CSS Grid GEnerator
• Shadow Generator
• CSS Effects
• Animista
• Tailwind CSS Blocks
• WhatAMesh
• Glassmorphism
• Shape Divider
• 9elements - Fancy Border Radius Generator
• Smooth Shadow
• Haikei background generator

Pattern / SVG Generators

• Blobmaker
• GetWaves
• Patterns
• Paaatterns
• Scribbbles
• SVGator
• Hola SVG Loader Generator
• PatternPad
• SVG Backgrounds and SVG toCSS

Color Generators

• Coolors
• Paletton
• Flat UI Colors
• LOL Colors
• Color Hunt
• Palette Ninja
• colors.lol
• Happy Hues
• ColorMixer
• ColorSpace

JSON Generators

• ObjGen

JSON Validator

• JSONLint

Learning

• Flexbox Froggy
• Grid Garden
• CSS Tricks
• UI Design
• Shift Nudge

Reference

• BEM Cheatsheet
• HTML5 Canvas Cheatsheet
• CSS3 Media Queries Cheatsheet
• Bootstrap 5 Cheatsheet
• SEO Cheatsheet

Assets

Images / Videos

• Undraw
• Unsplash (free stock photos)
• Hero Patterns
• Coverr (free stock videos)
• Looka (brand designer)
• Autodraw
• AllTheFreeStock
• Mixkit
• Pexels
• Photo Creator
• RemoveBG
• AI Generated Photos
• DuoTone
• OpenPeeps
• Humaaans
• Ouch!
• Avataaars
• lookup.design
• 404 Illustrations

Icons

• IcoMoon
• IconFinder
• AllTheFreeStock
• Linea Icons
• CSS Icons
• Tilda
• Ikonate
• Eva Icons
• Icons8 Animated Icons

Icon Fonts

• Fontawesome
• Fontawesome (cheatsheet)
• Material Icons
• MDI Icons
• Fontello
• Heroicons

Fonts

• Fontsquirrel
• Google Fonts
• Fonts Arena
• BeFonts
• Fontjoy

Design Tools

• Responsively

JavaScript

Front-End Libraries/Frameworks

• Angular
• Aurelia
• Ember
• React
• Svelte
• Vue
• jQuery
• jQuery UI
• jQuery Mobile

Back-End

• Node.js
• Express
• Meteor

Static Site Generators

• Gatsby
• Hugo

Other Tooling

• Prisma

Libraries

• Chart.js
• Moment.js
• Sweet Alert
• Tippy.js
• Popper.js
• Lodash

Vue Component Frameworks

• Buefy (Bulma + Vue)
• MDBootstrap Vue
• Vuetify

Vue Frameworks

• Nuxt
• Vue Design System
• Inertia

Vue Plugins

• Vue Toastification

React Frameworks

• Reactstrap
• Material UI
• Next.js

Learning

• Wes Bos Courses
• Vue Mastery
• Vue Developers

Design Systems and CMS's

• Storybook
• Storyblok
• Strapi
• Vuepress

Reference

• NPM Tips

PHP

Reference

• php.net
• php fig
• php the right way
• Onramp (from Tighten)

Back-End Frameworks

• CakePHP
• CodeIgniter
• Laravel
  • Laravel Frontend
  • Lighthouse GraphQL Framework forLaravel
  • Jetstream
  • Livewire
  • InertiaJS
  • AlpineJS
• Slim
• Symfony

Content Management Systems (CMS)

• Wordpress
• Magento
• Drupal
• Joomla

Libraries

• Carbon
• Faker

Learning

• Laracasts

Regex

• RegExr - Learn build and test regex

API

GraphQL

• GraphQL
• GraphiQL
• GraphQL Playground
• Vue Apollo

Mobile Utilities / Frameworks

• Adobe Phonegap
• Apache Cordova
• Flutter
• Framework7
• Ionic
• Vue Native
• Nativescript Vue

General Web Development Learning

• freecodecamp
• Udemy
• Pluralsight (paid)
• The Odin Project
• Mozilla Developer Network
• Codecademy
• Web Developer Roadmap
• Execute Program
• State of JS

Udemy Courses

• Advanced CSS and Sass by Jonas Schmedtmann
• The Complete JavaScript Course by Jonas Schmedtmann
• Web Design for Web Developers by Jonas Schmedtmann
• Modern Javascript Bootcamp by Andrew Mead
• The Complete React Developer Course by Andrew Mead
• The Complete Node.js Developer Course by Andrew Mead
• Web Developer Bootcamp by Colt Steele
• The Ultimate MySQL Bootcamp by Colt Steele
• Vue JS 2 - The Complete Guide by Maximilian Schwarzmuller
• React - The Complete Guide by Maximilian Schwarzmuller
• Angular - The Complete Guide by Maximilian Schwarzmuller
• Ultimate Web Developer by Brad Hussey
• The Complete Web Developer Course 2.0 by Rob Percival
• The Complete Web Development Bootcamp by Dr. Angela Yu
• Complete Python Bootcamp by Jose Portilla
• Svelte.js - The Complete Guide (incl. Sapper.js) by Maximilian Schwarzmuller
• Learn How To Code: Google's Go (golang) by Todd McLeod
• Data Structures and Algorithms by Andrei Neagoie
• The Complete Junior to Senior Web Developer Roadmap by Andrei Neagoie
• The Complete Web Developer Zero To Mastery by Andrei Neagoie
• Advanced Javascript Concepts by Andrei Neagoie
• Javascript the Complete Guide 2020 Beginner to Advanced by Maximilian Schwarzmuller

Laracasts Courses (by Jeffrey Way)

• The PHP Practitioner
• Laravel 6 From Scratch
• Object Oriented Principles in PHP

Reference

• Learn web development
• Emmet (cheatsheet)
• Markdown (cheatsheet)
• HTML MDN
• CSS MDN
• Javascript MDN
• CSS Easing
• CSS for people who hate CSS

Concepts

• Atomic Design (by Brad Frost)
• BEM (Block Element Modifier)

Blogs and Subreddits

• Dev.to
• Devhints.io
• Hacker News
• /r/css
• /r/Frontend
• /r/javascript
• /r/jquery
• /r/laravel
• /r/PHP
• /r/PHPhelp
• /r/reactjs
• /r/vuejs
• /r/web_design
• /r/webdev

Design and Prototyping Tools

• Figma
• InVision

Design Resources

• Laws of UX

Placeholder Text

• Lipsum
• Hipsum
• Zombie Ipsum
• Cupcake Ipsum
• Samuel L. Ipsum
• Heisenberg Ipsum

Mail Utilities

• Mailtrap SMTP Testing

Public API's

• List of public API's
• Jikan
• Spotify
• Yelp
• TheTVDB
• Zip Code API
• 15 Fun APIs for Your Next Project
• 10 Fun APIs to Use For Your Next Project
• apilist.fun

Game Development

• Phaser

Local Development Environments

• Installing AMP Stack on Mac
• Mac Web Development Environment
• Devilbox
• Laragon
• MAMP
• WAMP (Windows Only)
• Laravel Valet (Mac Only)
• Setup WSL on Windows for Web Dev

Digital Ocean Setup

• Link a Domain
• Initial Server Setup
• Setup LAMP stack
• Reset MySQL password
• Setup Mod Rewrite in Apache for cleaner URLs
• Install Git
• Install Composer
• Install Node.js
• Deploy Laravel to DigitalOcean

Digital Ocean Setup [Advanced]

• Setup Virtual Hosts
• Setup SSL Certificates with LetsEncrypt
• LetsEncrypt wildcard certificates with cerbot

Setting up SSL Cert with a wildcard with Certbot

Replace your-tld.com below with your Top Level Domain name.

sudo certbot certonly --manual --preferred-challenges=dns --server=https://acme-v02.api.letsencrypt.org/directory --agree-tos -d your-tld.com,*.your-tld.com

or, if you have the dns-digitalocean certbot plugin installed:

sudo certbot certonly \
  --dns-digitalocean \
  --dns-digitalocean-credentials ~/certbot-creds.ini \
  -d your-tld.com \
  -d '*.your-tld.com'

Web Design Inspirations

• Web Design Inspirations
• CodeMyUI
• Landingfolio
• WebDevResources
• Undesign
• Muzli

Browser Compatibility

• Can I Use?

Tools

• VSCode

  • ESLint by Dirk Baeumer
  • Laravel Blade Snippets by Winnie Lin
  • Material Icon Theme by Philipp Kief
  • PHP Intelephense by Ben Mewburn
  • PocstCSS Language Support by csstools
  • Prettier - Code formatter by Esben Petersen
  • Rainglow by Dayle Rees
  • SCSS Intellisense by mrmlnc
  • Vetur by Pine Wu
  • Vue VSCode Snippets by sarah.drasner
  • VSCode Cheatsheet

• PHPStorm

• Transmit

• TablePlus

• SequelPro (has issues on Mac > Catalina)

• Hyper (alternative and themeable terminal)

• AffinityDesigner (alternative to Photoshop)

• Insomnia

• Postman

• Bootstrap 5 Cheatsheet

• Materio Free Bootstrap 5 HTML Admin Template

Cloud Hosting Options

• Digital Ocean
• Linode
• Netlify
• Heroku
• Render

Debugging, Logging, and Content Management Utilities

• Sentry
• Sanity
• Cloudinary
• LogRocket