Resources
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.
- Microsoft VS Code
- Microsoft Visual Studio Code - powerful, and surprisingly good. It's what we'll be using in class. Free, for MacOS, Windows and Linux.
- BBEdit
- 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.
- Filezilla
- Free and ugly. For Mac, Windows and Linux.
- Cyberduck
- Free and not so ugly. For Mac and Windows.
- Fetch
- Fetch is Mac only. Its a clean, reliable FTP client. You can get a free copy if you are a student. https://fetchsoftworks.com/fetch/free
- Transmit
- 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.
- HTML Validator Bookmarklet
- Drag the link for the "Validate this page" into your browser's favourites bar to allow you to quickly validated pages. (Online pages only - will not work for files on your computer.)
- W3C CSS Validator
- CSS Validator allows you to check for errors in your CSS.
Mockup tools
Useful tools to help build sites
- https://placehold.co
- Create placeholder images without going into Photoshop
- https://dummyimage.com
- Another placeholder generator
CSS Frameworks
These are some of the many responsive CSS Frameworks available.
- Skeleton
- A simple, beginner-friendly CSS grid framework for responsive sites.
- Bootstrap
- 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.
- Pure
- 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
- Wave
- A free, east-to-use tool for checking web site accessibility.
- Contrast checker
- A simple interactive contrast checker.
- Colour Contrast Checker
- A contrast checker aimed at designers and developers
- VoiceOver
- Accessing the built-in screen reader on your Mac.
Colophon
Tools used to build this website: