This is a list of resources, tools and tutorials. Do you know of something useful that's not on the list - share it on the class Slack and I'll post it here.

Software tools

Text editors

There are many text editors, some simple, some complex. A few are listed below.

It's what we'll be using in class. Free, for MacOS, Windows and Linux.
Microsoft VS Code
Microsoft Visual Studio Code - powerful, and surprisingly good. Free, for MacOS, Windows and Linux.
BBEdit is what I use. Mac only. Super-powerful, under constant development for almost 30 years. A basic version is free but you have to pay for the full version.
Adobe Dreamweaver
Dreamweaver is designed as a What-You-See-Is-What-You-Get (WYSIWYG) editor, where you build pages without seeing the code. This way of working is no longer common, but the text editor portion of Dreamweaver is quite good. Part of the Adobe CC suite.
FTP clients

FTP (File Transfer Protocol) clients move your files from one place to another over the internet. There are good ones, and there are free ones, but no really good free ones. Note that some are free for education use.

Free and ugly. For Mac, Windows and Linux.
Free and not so ugly. For Mac and Windows.
Fetch is Mac only. Its a clean, reliable FTP client. You can get a free copy if you are a student.
Transmit is awesome. Transmit is fifty bucks. If you work with FTP a lot, it's worth it. What I use. 25% student discount. Check out their home page, for lots of cool stuff they've done, and a horrible goose.

Validation tools

W3C HTML Validator
HTML Validator allows you to check for errors in your HTML.
W3C CSS Validator
CSS Validator allows you to check for errors in your CSS.

Mockup tools

Useful tools to help build sites
Create placeholder images without going into Photoshop

CSS Frameworks

These are some of the many responsive CSS Frameworks available.

A simple, beginner-friendly CSS grid framework for responsive sites.
Probably the most widely-used (and feature-rich) frameworks. Be careful to match the version you are using to any tutorials, etc. - older versions of Bootstrap were quite different.
A framework that emphasizes small, fast-loading CSS. Has some very good basic layouts to use and modify.
Simple CSS
Minimalist CSS for making somthing look better than the browser defaults.

Accessibility tools

A free, east-to-use tool for checking web site accessibility.
Contrast checker
A simple interactive contrast checker.
Accessing the built-in screen reader on your Mac.


Tools used to build this website:

A powerful text editor for every type of work dealing with text, from code to data.
Responsive CSS+HTML framework
Static site generator.