Resource List
Here are some resources to get you started. This is not a complete or thorough list by any means. No recommendations or endorsements are implied by listing a link here; this is just an effort to help you on your learning path.
Tools
Browsers
Browsers are the apps that we use to view websites. Some websites now have specialized apps for their content, but this list is for the more general browsers that can be used to view any website on the World Wide Web. Browsers are free.
While there are many other browsers, Google Chrome and Microsoft Edge use the same technology platform, so web developers should have at least one of these for testing.
Editors
Websites can be built in any text editor. That said, some editors are more friendly for web development than others. Here are a couple I've used. These are free. You can find others that provide similar or specialized functionality and may be one-time purchase or subscription based.
- Notepad++ — this is a much fancier version of the standard Notepad program. It does color-coding to make seeing web page code easier and can handle standard HTML, CSS, and Javascript changes. From Don Ho at SourceForge.net.
- HTML-Kit 292 — although this program has been around for many years and is starting to age, I think it is still one of the better HTML and CSS editors. From Chami.
FTP clients
FTP [File Transfer Protocol] is the typical method used to transfer files between your local computer and the hosting provider's server.
- FileZilla — if you need a standalone FTP client, this is the widely-accepted tool. Free, and fairly easy to use, it is also reliable.
Testing
A couple of steps toward improving cross-browser functionality, your visitors' experience, and your search ranking are: making sure your code is valid HTML and checking for broken links.
- Nu Html Checker — validates HTML5 code against current standards to help you find errors and make sure the page works as you expect. I use this tool whenever I make code changes to a web page.
- dead link checker — this tool looks through your website, page by page, identifying links that take too long or don't display a page. This is a good tool to run every 6 months or so on your website (depending on how often you make changes).
Design
Color
When selecting colors, remember that colors do not look the same across all screens and all devices. Try not to get too fussy about the exact color; rather, select a color that seems to work with other content on the website.
- ColorMania (from Blacksun Software) — this free utility program lets you pick colors and save palettes.
- Color Scheme Designer (authored by Peter Stanicek and now from Paletton) — lets you play with whole sets of theme colors; now also has many ads, but functionality is still full.
Fonts
Don't spend a lot of time on this … it's about the content, remember!
If you don't embed a font with a website (see Google Fonts below), the browser will use either a font that matches the name you select or a font that is defined as default for that font classification. Classifications are: serif (e.g., Times New Roman), sans-serif (e.g., Arial or Helvetica), cursive (e.g., Comic Sans MS), fantasy (results vary widely), and monospace (e.g., Courier New).
- Google Fonts — popular fonts that you can reference from Google's site or embed on your website, so visitors don't have to install it on their devices in order to see your website as it was designed. Fonts here have open source licenses and can be used on any project.
- Common fonts — this is a helpful chart of what fonts are commonly found on Windows/Mac computers, alternatives, and their classification. If you don't want to embed a specific font, you can these to set up a font family.
Images
With the advent of mobile-friendly design, images for websites became a bit more flexible as well as more complicated for the developer. For faster page loads, less bandwidth usage, more flexibility in design options, and improved mobile performance, images should be both sized to fit the design and optimized/compressed to use as little disk space as is practical. Depending on the site, it may also make sense to have different sized images or even different images altogether for different devices.
- Bulk Image Resizer — this free, online tool will resize one or more images. It is very easy to use and very fast. Be cautious about how much disk space is associated with varying levels of quality … higher quality will take considerably more disk space.
- TinyPNG — free, online tool to compress JPG and PNG images.
- Optimizilla — free, online tool to optimize and compress JPG and PNG images.
- For Windows, Paint and Paint 3D — if you are developing on a Windows computer, you can take advantage of these tools for one-by-one image cropping or resizing. You'll still want to optimize the image before publishing it to the server.
HTML
- MDN Web Docs — wonderful resource for learning about HTML, finding tutorials, getting guides to developing skills, seeing examples, and more.
- HTML5 Living Standard — HTML5 is the current standard for web pages and this is the continuously updated version from the Wordwide Web Consortium (from W3C).
- HTML named entities — special characters like a non-breaking space or a copyright symbol are so frequently used on web pages that there are codes for them; this is the guide to those codes.
- HTML Validator — clean code gives better browser compatibility, easier Google search indexing, and faster maintenance. This tool will help you find coding errors.
CSS
- MDN Web Docs — wonderful resource for learning about CSS, finding tutorials, getting guides to developing skills, seeing examples, and more.
- CSS-Tricks — essentially a blog about CSS, this site has interesting examples and medium-level explanations.
- RichInStyle.com CSS2 tutorial — offers basic and some advanced concepts in relatively short segments (from RichInStyle.com).
- CSS Tutorial: Starting With HTML + CSS — very simple examples (from W3C).
- Can I Use? — specific information about browser support for any CSS feature.
Hosting providers
Look for the following items when evaluating services:
Some popular hosting providers are very difficult to work with. They may have a lot of upcharges or add-ons, making their initial very low entry price inflate as you try to get the features you need for your website. They may also have complex or convoluted procedures for doing basic tasks like transferring a domain registration from them to another registrar.
Note: Microsoft no longer provides Expression Web — a relatively user-friendly web development tool. Expression Web may continue to work on computers where it is currently installed, although some of its features may degrade or fail. If you are an Expression Web user, you may choose to decide on an alternative approach for your next website migration. Migration options include: a new toolset (options here are typically harder to use and require more technical skill), a website builder, a new platform, customized changes of the design for easier content updates, etc. The only tool I have found so far that is somewhat comparable to Expression Web is Adobe Dreamweaver, although it is less user-friendly (it has a steep learning curve), requires more technical skill, and is currently available only by subscription.
Microsoft®, Windows®