HTML, CSS, & JavaScript – Getting Started

Tools to write your first HTML document

To start things off, we will need an application to write our code (a code editor, text editor, or IDE – Integrated Development Environment), and an application to view the result (a browser such as Chrome, Edge, or Safari).

If your time is short, download and install:

Read more below for a detailed explanation.

Code Editor

Although you can use the default text editor on your system (Text Edit or Notepad, not MS Word or some other word processor), it is far more beneficial to use an application to write your code. Set up correctly, the application will color-code correctly formatted text and even complete common instructions you are typing making it much easier to avoid typos and mistakes.

Depending on the editor you choose, you might see the term IDE, which stands for Integrated Development Environment. This simply packages together tools and libraries that aid you in your efforts.

Brackets

I suggest downloading Brackets. It’s a free open-source code editor focused on the modern web. It’s available for Mac, PC, and Linux systems. It’s one of the easiest and most complete setups and includes a wide variety of tools already built in.

Download Brackets

Browser

The browser is where you view a web page. Browsers you might be familiar with are Google Chrome, Microsoft Edge (Microsoft Internet Explorer), Mozilla Firefox, and Apple Safari to name a few of the more popular ones.

Google Chrome

For our purposes, I suggest primarily using Google Chrome for rendering your web pages.

Download Google Chrome

Other Browsers

Practically, you spend most of your time developing with one browser, but you also need to test your work in other browsers as well to make sure things render as you would expect. Ideally, testing on both Mac and PC versions of these browsers is best, and you might start thinking about mobile as well.

Here are other common browsers you should consider testing your work in. For our purposes in this lesson, it isn’t really necessary.

 

For this lesson, you will need a code editor. This could be the default text editor on your system (not MS Word, something like Text Edit or NotePad), however, we prefer Sublime Text as it has a nice project window and there are many supporting packages you can install to make your efforts easier. Check out the following posts for more details:

Before moving on to the next step, be sure to have some kind of plain text editor installed and open.