Applications

Applications are like tools. You have a Word Processing application on your computer, and that is a tool that lets you write letters, essays and so on. Tools are things that we can use to create and improve what we are doing and how we do it. There are a number of tools that are useful for learning to code, and complement many of the resources in the Tutorials section. The tools here are divided between ones that you can use to create websites and related artefacts, and some that you can use to error-proof and test your code. Some must be downloaded and installed on your computer, and some are cloud based. You will likely encounter many of them if you are doing a course in web design! We are only going to show the ones that are free, but there are many similar options that can be quite costly. When starting out, we figure you don't want to invest too much cash until you decide if it's for you, or not.

WYSIWYG

A WYSIWYG (pronounced "wiz-ee-wig") editor or program is one that allows a developer to see what the end result will look like while the interface or document is being created. WYSIWYG is an acronym for "What You See Is What You Get". There are many such editors available, both free and paid-for, and online.

A word of warning however: while it is a short-cut route to developing web-pages, it is very important that a web developer can understand the code "under the hood". This means developing an understanding of HTML, CSS and Javascript.

The following suggestions include tools that you can use to build a website with little to no knowledge of the underlying technologies (WYSIWYG), to tools that require an understanding of the components, followed by tools you can use to manipulate images for use in your pages, and finally- tools that you should use to check that the site you have created meets the current standards for web design. There are additional tools that can be used to offer improvements over the current design.

All of these are just that- tools- that you can use or choose not to, but certainly the text editors and graphics tools should be installed on your machine if you want to become a skilled web developer. There are links to tutorials on another page to show you where you can start this exciting journey, and some links that may allow you to meet like-minded people in your locale on the contacts page. Good luck!

Online

Wix

This is one of the easiest ways to build a website, and will certainly suit anyone that just wants to have their own hobby or small business website. Today Wix is the biggest player in the website builder landscape and hosts a massive 80 million websites.

The visually impressive layouts are designed for hobbyists, small businesses, restaurants, online stores and artists such as musicians and photographers. They are optimized for mobile devices and can be spiced up with one of the numerous apps available from the Wix App Market.

Wix is available for free for as long as you want, but if you require professional features like your own domain name or priority support, you can choose from one of their premium plans.

You will not become a professional website designer using Wix, but you will have a pretty cool website in very little time!

Online

Wordpress

A common misunderstanding with Wordpress is that there are two versions of Wordpress. Wordress.com and wordpress.org.

Wordpress.com

The most popular is wordpress.com, which is where you get a free sub-domain and hosting, along with a WYSIWYG editor and thousands of themes (both free and commercial). It is really a blog, but a blog is just a website that is updated more frequently, and many would argue- more easily.

Hosting with WordPress.com means that your site will be free forever, but you can also pay to upgrade your site to achieve your specific needs. It also means your site will be well looked after with top of the line spam-fighting power and automatic security updates. All you need do is sign up and choose your blog name, then design your site. You won’t have to worry about installing the software since it’s all managed for you instantly.

Wordpress.org

WordPress.org is where you can grab your own copy of the WordPress blogging/Content Management System (CMS) software for free. It currently powers 24% of the web. With the software comes the responsibility of finding your own hosting company to house your WordPress site along with your own domain name to point visitors to it. You’ll also have full control over the WordPress software and your site. WordPress.org includes documentation and a community forum where you can ask questions if you get stuck. It’s also the site to go to if you would like to get involved and join many other volunteers in contributing to the WordPress core code, mobile apps, translations, and accessibility. You can visit it here.

Download

Windows only

Kompozer

This is a free sitebuilder that still does a very nice job of creating web pages. It hasn't been updated since 2010 but that doesn't mean it doesn't work well, in fact it's one of the nicest pieces of software I've used for creating web projects. KompoZer may not be using the latest incarnation of HTML but the pages created display just fine in all browsers. WYSIWYG editor using W3 CSS and HTML 4.01

I would highly recommend Kompozer for the novice looking to get their feet wet in the world of web page creation, as you can code using formatting tools similar to those found in MS Word, but you can also switch to the code view and learn how a change in the WYSIWYG look makes changes "under the hood". KompoZer has a relatively simple (albeit old-fashioned) interface, good documentation, lots of videos on YouTube as well as courses that use it (try Alison.com) and is fairly easy to get started. You just download it and run it to start you first webpage, but do check out some tutorials first

Online / Download

Windows
Mac
Android

Mobirise

This is the "New Kid on the Block" when it comes to designing websites from an application that you install on your computer. It is certainly impressive! Mobirise runs on Windows and Mac devices and can be used on or offline to create entire websites, landing pages, resumes, portfolios, and most of the other types of online content you can think of. Mobirise is a free, responsive website builder that fundamentally differs from its contemporaries. Rather than follow the freemium web-hosted model that has practically become the industry standard, Mobirise is an offline program, available as a free download. Mobirise is the first serious offline website builder with these features that I’ve come across, so I was happy to be able to explore something that differs fundamentally from the pack.

This website builder has been created to be easy to use for non-coders, while also aiming to enable developers to work faster. It’s also free to use, with premium extensions available if needed. If you want a tool to help you create professional looking websites more efficiently, this solution could be just what you’re looking for. One of the key features of Mobirise is its drag-and-drop, point-and-click user interface. Once you’ve fired up the app, you can simply start creating your web page designs by clicking on the canvas and then interacting with the context-sensitive controls that are displayed.

Code Editors

There are many, many text editors out there for coding with, and they range from very, very simple editors, to applications that are full-blown IDEs (Integrated Development Environments). There is not enough time here to go into all the pro's and cons here, but here is a selection of some of what we think are the better ones.

Download

Windows

Notepad++

Notepad++ is a powerful, feature-packed text editor that more or less has everything Notepad needs but lacks (it can replace Notepad in Windows). It supports 27 programming languages, searches regular expressions, and supports syntax highlighting and folding, synchronized edits and views, and much more.

Notepad++ is open source, so if you’re working directly with HTML or CSS, Notepad++ can do lots of things fancy HTML editors can do, and it is free to download. Notepad++ does document comparisons: You can see two documents at the same time, and have the differences highlighted. This could really be handy. Think about all the times when you have a newer version of an older file and need to see if you can safely ditch the old one. You need to compare the differences side by side. You can do this in Microsoft Word, but it’s kind of clumsy. Notepad++ can do this very easily, with .txt, .html, and .xml files.

A great code editor very popular with those new (and old) to coding.

Download

Windows
Mac
Linux

Sublime Text

Cross-platform- will work on many Operating Systems. Sublime Text is way up there with the very best. At $70, it is also incredibly expensive for a text editor; in fact, it's $21 more than JetBrains' excellent WebStorm JavaScript IDE. But for those who prize a simple approach with plenty of power under the hood, it might be worth it.You can downloads and install it for free though! Part of the appeal of a text editor is its leanness and simplicity. Sublime Text certainly feels lean on the surface, with no toolbars or configuration dialogs. It's also very, very fast. What's so nice about Sublime Text is that it lets you slowly grow into using its power. You can run it and just start typing, Notepad-style. But ask for more, and Sublime Text shall deliver.

Another benefit of using Sublime Text is that it looks the same across Linux, Windows, and Mac OS X. This is because it uses its own custom cross-platform UI framework, which also lends it some unique controls you won't find in other editors. The most noticeable one, and the only one you'll see at first glance, is the minimap - a miniaturized bird's eye view of your code, which runs along the right-side gutter of the editing pane. When working on long files, you can use the minimap as a visual scrollbar and instantly scrub around the file for points of interest. You can try it out for free, and the only thing about that is that it will ask you to buy it every now and then. A great editor!

Graphics Editors

These are used to edit/resize pictures, make logos, make icons, make banners, and possibly even to make buttons. Once you learn to use them, you can manipulate graphics, make icons, logos and so much more. Unleash your creativity!

Download

Windows
Mac
Linux

Gimp

GIMP, which stands for GNU Image Manipulation Program, is a freely distributed, open source image composition and photo retouching application. It is available for a variety of operating systems including Mac, Windows, and Linux. The goods news about the Mac version is that X11 is not required. According to the GIMP website, GIMP has been running natively on OS X since version 2.8.2.

Whether you are actively considering a move away from Photoshop, or simply hoping there is a non-proprietary tool for reading your Photoshop images if you ever decide to stop subscribing to Adobe’s cloud, you’ve probably wondered about GIMP. A free, open-source, image editor, the GNU Image Manipulation Program (GIMP) has been a go-to tool for Linux users for years, but has a reputation for being hard to use and lacking many of Photoshop’s features. The reality has changed dramatically over the last couple years. GIMP now has a very competent user interface, as well as an extensive and powerful set of features. Its openly extensible nature means that in some areas, like running well-known image processing algorithms on your photos, it actually outshines Adobe Photoshop.

A powerful and flexible graphics editor very popular with designers.

Validators and cleaners

Whether you design your web page using a visual web editor like Dreamweaver or BlueGriffon, or you code HTML directly with a simple text editor, the generally recommended practice is to validate it after you finish designing it. For those unfamiliar with the term, "validating" a page is just a jargon-filled way of referring to the use of a computer program to check that a web page is free of errors.

There are a number of reasons why you should validate your page.

1. It Helps Cross-Browser, Cross-Platform and Future Compatibility: Although you may be able to create a web page that appears to work on your favourite browser (whatever that may be), your page may contain HTML or CSS errors that do not show up with that browser due to an existing quirk or bug. Another person using a different browser that does not share that particular bug will end up viewing a page that does not show up correctly. It is also possible that later versions of your browser will fix that bug, and your page will be broken when people use its latest incarnation. Coding your pages so that it is correct without errors will result in pages that are more likely to work across browsers and platforms (ie, different systems). It is also a form of insurance against future versions of browsers, since all browsers aim towards compliance with the existing HTML and CSS standards.
2. Search Engine Visibility: When there are errors in a web page, browsers typically try to compensate in different ways. Some may ignore the broken elements while others make assumptions about what the web designer was trying to achieve. The problem is that when search engines obtain your page and try to parse them for keywords, they will also have to make certain decisions about what to do with the errors. Like browsers, different search engines will probably make different decisions about those errors, resulting in certain parts of your web page (or perhaps even the entire page) not being indexed. The safest way to make sure the search engines see the page you want them to see is to present them an error-free page. That way, there is no dispute about which part of your page comprises the content and which the formatting code.

Online

W3C Markup Validator

An HTML validator checks to make sure that the HTML code on your web page complies with the standards set by the W3 Consortium, the organisation that issues the HTML standards. There are various types of HTML validators: some only check for errors, while others also make suggestions about your code, telling you when it might lead to (say) unexpected results. The W3 Consortium has its own online validator which you can use for free. The great thing about it is that it will tell you, in it's own cryptic way, what the error is so that you can fix it

It's important to validate all web pages that you create.

Online

W3C CSS Validator

A CSS validator checks your Cascading Style Sheet in the same manner. That is, it will check that it complies with the CSS standards set by the W3 Consortium. There are a few which will also tell you which CSS features are supported by which browsers (since not all browsers are equal in their CSS implementation). Again, you can get free validation for your style sheets from the W3 Consortium.

There are numerous other validators around, both free and commercial, focusing on different aspects of your web page.

Limitations: What Validation Does Not Do

Validating your web page does not ensure that it will appear the way you want it to. It merely ensures that your code is without HTML or CSS errors. If you are wondering what the difference is, an analogy from normal human language will hopefully make it clear. Let's take this sentence "Chris a sandwich ate" which is grammatically incorrect when used in a non-poetic context. It can be fixed by simply reversing the order of the last two words so that the sentence reads "Chris ate a sandwich".

But what happens if you write a sentence that says "Chris ate a pie" when you meant that he ate a sandwich? Syntactically, the sentence is correct, since all the elements of the sentence, subject ("Chris"), verb ("ate") and object ("a pie") are in the right order. Semantically, however, the sentence describes a different thing from what you meant. HTML and CSS validators are designed to catch the first type of error, exemplified by the grammatical error of my first sentence. So if you write HTML code that has (say) the wrong order, the HTML validator will spot it and tell you. However, it cannot catch errors of the second kind, where you get the spelling and order and all other technical aspects correct, but the code you used does not match the meaning you intended.

Ensuring that your code does what you want it to do requires you to actually test it in a web browser. Depending on the complexity of your code, you may even want to test it with different browsers to make sure that your site looks the same in all of them, since it's possible that you are using features of HTML and CSS that are only implemented in some browsers but not others.