Webmastery Links
Some resources to help you make the most out of your website!
Links marked with a "⭐" are personal favorites of mine.
Table of Contents
General Resources
- Awesome Lists - Tech resource directory. Here are some awesome lists that are specifically relevant to basic web development:
- Comparison of Different Web Hosts
- HTML Cheat Sheet
- HTML for People - A more practical, people-oriented guide to HTML.
- MDN Web Docs - Comprehensive, in-depth documentation for all things web development! (HTML, CSS, Javascript, HTTP, common web APIs).
- W3Schools - The absolute best place to learn web development for beginners and its totally free! 100% recommend for anyone just getting started!
CSS
- CSS Background Patterns
- CSS Pixel Border Maker - Also includes a bunch of pre-made borders you can use.
- Hover.css - CSS hover/focus effects.
- How to Style Broken Images in CSS
- Realtime Colors - Preview color palettes for your website.
Javascript
- Indent.js - Indents your JavaScript for you.
- The Modern JavaScript Tutorial
- Moment.js - JavaScript library for parsing and formatting dates/times.
- Vanilla JavaScript Repository - Lightweight Javascript that doesn't use JQuery or other external libraries.
Fonts
- CSS 101: Fonts - A guide to styling and using custom fonts.
- Google Webfont Helper - Resources to help you self-host google fonts.
- System Font Stack - A guide to pre-installed system fonts.
Frameworks
Blogging Engines
- Chyrp Lite
- TinyBlog
- Zonelets
- Accessible Zonelets
- Zoner - A static site generator for building Zonelets-style blogs.
- ZoneRSS - A Zonelets-compatible RSS feed and posting tool.
Image Galleries
Accessibility
- A11Y Project Checklist
- A11y Syntax Highlighting
- Colorblind Web Page Simulator
- How to Style Focus Outlines
- Owly's Accessibility Tips
- Randoma11y - Randomly generates color combinations with high color contrast.
- WebAIM - My go-to source for web accessibility info. Here are some pages that I think are especially helpful:
Evaluation Tools
These tools scan your page and automatically detect possible accessibility issues. These aren't foolproof, but can still be extremely helpful for finding problems you might not have ever noticed otherwise.
- Axe DevTools - The wording on the official website would make you think you have to sign up or that it's only a free trial, but the full free version is still available for browsers:
- IBM accessibility checker
- WAVE Web Accessibility Evaluation Tools
See also: Web Accessibility Evaluation Tools List
Layouts & Templates
- Almostsweet's Layouts
- Eggramen's CSS Test Pages
- Kalechip's Layouts
- Lilaclynx's Layouts
- Neothemes
- Beepbird's Templates
- Sadgrl's Layouts
- Templaterr
- Tentacool's Layouts
CSS Frameworks
These aren't full layouts. These are stylesheets that have very few or no classes, and can be applied to any HTML file right out of the box.
Snippets
Bits and pieces of code that can be incorporated into larger projects.
- Codemyui.com
- Kalechip's Code Snippets
- Phuoc.ng
- Sadgrl's Code Snippets
- Shadow's Theme Bits
- W3 ARIA Design Patterns
Web Graphics
Some of these sites contain fast/flashing GIFs. Please proceed with caution if you have photosensitivity.
88x31 Buttons
The classic gray buttons that you'll see on a lot of older sites.
- 88x31 Database
- 88by31.neocities.org
- The 88x31 GIF Collection
- Lucas's button collection
- Hekate's button maker
- Sadgrl's button maker
Blinkies
- blinkies.cafe - A site that lets you make and share blinkies online!
- How to make a blinkie in any image editor
- How to add a crossfade effect to your blinkie