Webdev Resources

This page contains various tutorials and resources for people who want to make thier own websites. More stuff will be added soon!


Jump to: Tutorials | General Resources | Free Web Hosting | Webpage Themes & Templates | Web Fonts and Glyphs | Video Players | CSS Stylesheets | JavaScripts | Static Site Generators | Free Content Management Systems | CMS Themes | Free Forum Software | Webpage Tests | Markdown Editors

Tutorials

Codecademy
This is how I learned HTML to make the website you're seeing right now! It's-A Good-A Show (it's also interactive, and teaches you things step by step!)

Codepupil
Turns coding into a game! Pretty cool! (I think it requires a paid membership, though.)

HTML Dog
Really easy-to-read HTML, CSS, and JavaScript tutorials.


General Resources

Ad Block Bar
Put a bar on your website that appears if people DON'T use an adblocker. Using an adblocker is good for the environment, you know.

Animista
Easily construct CSS animations custom-tailored for your website within the easy-to-use online editor.

Can I use...
Tells you whether the HTML spec you specify is in the latest browser versions or not.

Cookie Consent
Allows you to easily put on those cookie warnings on your site so you can follow EU cookie law.

CSS Reference
An easy-to-browse reference of all the CSS classes and their uses!

Easy Imagemap Generator
Allows you to easily put imagemaps on any image.

Email Scrambler for Spambots
Makes it harder for spambots to find your email address.

EnjoyCSS
Make completely custom CSS animations from scratch using an online editor. CSS made simple.

FreeDNS
Allows you to easily turn any static IP address into a nice-looking subdomain.

h5ai
A nice-looking and modern HTTP web server index to replace the old ugly one that's been in Apache/nginx/whatever since the beginning. Requires PHP 5.5+.

HTML Color Codes
Easily find good hexadecimal colors to use for your webpages.

HTML Reference
An easy-to-browse reference of all the HTML tags and their uses!

HTTP File Server
A piece of software you can put on your server to make it easy to organize your media files and share them with others via the Internet. Good for servers/NASs with lots of videos/TV shows on them.

humans.txt
Put a .txt file in the root of your website containing the info of the people who made it. Gives your site a more personal touch, you know?

A List Apart
An online periodical that delves within the ins and outs of web design and development. A good read if webdev is your full-time job.

OneSignal
Give your webpages the ability to push notifications through your user's browser, even when they aren't on the site! Completely free.

Real Time Users
Put a counter on your site that states how many users are on your site at this very moment.

Text Color Fader
Allows you to do that really neat 90s HTML text gradient effect easily!

Screen Sizes
Allows you to check the different screen sizes of each device so you can test responsiveness for your site.

TinyLetter
Set up a minimal newsletter for your site so that people can stay updated when they aren't there.

TinyPNG
Compress your .jpg or .png files so they'll fit. You'll barely know the difference.


Free Web Hosting

000webhost
A free webhost that supports PHP and MySQL. "Unlimited" disk space and bandwidth. No ads.

GitHub Pages
Don't mind having your site's directory open to the public, and/or want to sync your site via Git? GitHub Pages is for you! 1GB space per site repo (big files have to use Git LFS). HTTPS-enabled. Has pre-baked templates you can use.

Hotglue
Remember Geocities's page builder? Now you can create your pages just like that with a similar drag-and-drop interface, easy and for free.

Netlify Drop
Allows you to EASILY push static websites and content to the web. Unlimited webspace and websites.

Surge.sh
Know your way around a command line? This host is for you! Allows you to easily set up static-based ad-free sites via bash and nodeJS in a matter of minutes.


Webpage Themes & Templates

A-Frame
A framework that allows you to easily create VR content in the browser.

Bootstrap CSS/JS
The CSS and JS toolkit that Twitter uses. Highly modifiable.

Bulma
A nice-looking CSS and HTML framework based on Flexbox. Fully-reponsive, too.

Furtive
A simple CSS micro-framework that's fully responsive.

HTML5 UP
REALLY GOOD HTML themes for your websites. Completely free to use as long as you give credit.

Pure CSS
A more-modern-looking CSS toolkit. Can be nice if you want to make modern websites.

Tachyons
Create fast loading, highly readable, and 100% responsive interfaces with as little css as possible.

Zurb Foundation
Similar to Bootstrap, see above.


Web Fonts and Glyphs

Font Awesome
Lots of cool web glyphs to use for your website!

Mixfont
Discover and visualize new font choices for your website.

Overpass
A free font and web font based on Highway Gothic.


Video Players

Plyr
A free, customizable, open-source, and lightweight video player for your website.

Video.js
Same as above.


CSS Stylesheets

Animate.css
Easy CSS animations to add to your HTML pages.

CSShake
Easily add different variations of shaking text to your webpages.

Hover.css
A collection of hover effects to be applied to buttons, logos, links, etc.

Pills
A simple, responsive, tiny CSS grid boilerplate for humans.

Skeleton
A bare-bones CSS boilerplate to help you get started on your CSS adventures!

SpinKit
Cool CSS-powered loading animations you can use for loaders on your site.

Toast
Yet another CSS grid! Go nuts!


JavaScripts & jQuery Scripts

Clippy.js
Ever wanted Clippy on your webpage? No? Too bad, that's what you're getting.

Elevator.js
*whistles elevator musak*

FitVids.js
An easy jQuery plugin that allows you to easily embed fluid-width videos. Good for responsive pages.

Flowtype.js
Changes the font size of an element easily based on the browser width. Good for responsive pages.

os.js
Allows you to literally put up an OS-esque GUI on your own web browser. Free and open-source.

Reveal.js
An easy HTML presentation framework that allows you to make stunning presentations with HTML and JavaScript.

Wiki.JS
A free piece of wiki software built on Node.js, Git, and Markdown.

WOW.js
A toolkit to put in CSS/JS animations for web page elements that appear when you scroll onto them. (for non-commercial use.)


Free Static Site Generators

Hugo
Like Jekyll, except it's based on Go and is a little bit more complex. I found the docs a tiny bit confusing compared to Jekyll's, but maybe you'll have more luck with it.

Jekyll
The static site generator I personally use for my site, based on Jekyll. Relatively simple and can make static sites a bit easier to manage.


Free Content Management Systems

Grav
An open-source flat-file CMS that makes websites faster and is easy to use.

Grawlix
A great CMS if you're hosting a webcomic. Has all the features that webcomic artists need. A must-have if you're looking to host your webcomic on your own server.

Indexhibit
Are you an artist? Indexhibit might be the CMS you need to present your work. It's an easy two-frame CMS that allows you to easily showcase your art and other whatnots to the world.

PageKit
A modern CMS that's light-weight and good if you want to make a nice, simple website.


CMS Themes

Inkblot
A Wordpress theme for webcomic artists. Fully responsive and highly customizable.


Free Forum Software

Discourse
Tired of using phpBB and SMF all the dang time? Here's a piece of free forum software that looks and feels good! (Doesn't work well on shared hosting, though.)

Flarum
The BEST-LOOKING forum software I've ever seen. Lightweight, too. Sadly still in beta at the time of writing.

MyBB
A good, free, modern alternative to phpBB. Looks more like a proper forum.

NodeBB
Similar to Discourse, but has a less modern UI and runs on nodeJS.


Webpage and Browser Tests

BrowserStack
Web-based testing that allows you to test your webpages in any web browser.

HTML5Test
Test if your browser is HTML5-compatible.

Webpagetest
Check if your webpage meets modern W3C and other standards.


Free Markdown editors

Dillinger
A free, easy to use Markdown editor. Can export to HTML when done.

HackMD
Same as above, but this one allows you to sign in and collaborate with friends.


back to top
go back to the directory
go back to homepage