Below you will find some web development resources that I have used personally over the years or have found and thought others might find them useful. This is a living document so will be updated periodically.
Learning
This section has resources for learning what is new in the world of web development and how to learn things in a more structured way. Some of the blogs will have detailed tutorials or explanations. All of the courses offer a structured way to learn something.
Blogs
- CSS Tricks
- Smashing Magazine
- Yoast — SEO focus
- Joost’s Blog — SEO focus (founder of Yoast)
- Nielsen Norman Group — UX Research
- Ahmad Shadeed — Great deep dive articles
- Josh Comeau — Great deep dive articles
- SiteGround Blog
- Shopify Blog
- WooCommerce Blog
- WordPress (Core Development)
- WordPress (News)
Courses
- LinkedIn Learning — Check your local library for access
- Wes Bos
- Udemy
- Code Academy
- The Odin Project
Coding
This section has sites with CSS code generators, JavaScript plugins, and code snippets for HTML/CSS/JS. You can also check to see what is supported by various browsers and email clients to know if your code will work.
Code Snippets / Tool Aggregators
CSS
- Uiverse — HTML/CSS for interactive elements
- CSS Generators — CSS generators
- CSSmatic — CSS generators
- Clippy — CSS generator for clip-path
- CSS Gradient Generator — CSS generator for gradients
- Smooth Shadow — CSS generator for box shadow
- Reasonable Colors — Accessible color palettes
- Color Safe — Accessible color picker
- Normalize.css
- Reset CSS
- CSS Remedy — Reset/Normalize alternative
- Animate.css
- Animista
- Animate on scroll — CSS animations + JS
JavaScript
- You Might Not Need jQuery
- Jamstack
- Swiper — Slider/carousel
- Prism — Syntax highlighter
- Highlight.js — Syntax highlighter
Accessibility
Browser & Email Support
- Can I Use
- Can I Email
- CSS Email Support Guide
- CSS3 Test — CSS features your browser supports
- Should I prefix? — Vendor prefixes to use
- Browser Stack
Design
This section has resources to help with designing and adding content to sites. Where to find images, icons, illustrations, and fonts. Additionally, tools to wireframe or prototype and where to find inspiration for your designs.
Wireframing / IA
Images
- Awesome Stock Resources — Aggregator
- Openverse
- Flickr (Creative Commons)
- Wikimedia Commons
- Unsplash
- Pixabay
- Pexels
- Burst
- FreeImages
- NYPL Digital Collections
- Smithsonian Open Access
- Google Advanced Image Search
- Adobe Stock — Creative Cloud required
- Remove Background Image — Tool
Illustration Kits
Icons
Fonts
- Google Fonts
- Adobe Fonts
- Font Squirrel
- Fontspring
- League of Moveable Type
- Lost Type Co-op
- Blue Vinyl Fonts
- Google Font Combinations — WPMU Dev
- Google Font Combinations — Design Shack
Design Inspiration
- Site Inspire
- Awwwards
- Design Seeds
- Paletton — Color Scheme Generator
Live Servers
This section has everything related to live servers: hosting, domains, CDNs, performance testing.
Hosting
- SiteGround
- GreenGeeks
- Web Hosting Canada
- WP Engine — WordPress only
Domain Registrars
Content Delivery Networks
DNS & Redirect Checkers
Performance Testing
Miscellaneous
These are great resources that didn’t fit well into the areas above.
- Mozilla Developer Network
- Stack Overflow
- Postman — API Client
- W3C Markup Validator
- Favicon Generator
- CSS Triggers — Browser painting info
- Website Carbon Calculator