Essential Tools

First, we will need a text-editor to write our code in.

I suggest Atom because it’s free, accesible, and the editor that I use.

But, ultimately, choosing a text-editor comes down to personal preference. Feel free to explore your other options:

Next is the browser. If you don’t already have Chrome downloaded, go ahead and download it. We’ll use it as our primary browser to test our websites (for consistency and its developer tools).



A single file or collection of files contained within a folder and hosted on a server.


Stands for “HyperText Markup Language”. HTML serves as the basic structure and holds the raw content of the webpage. If the webpage were a house, the HTML would be the structural elements, like the foundation and frame.


Stands for “Cascading Style Sheets”. CSS is a set of rules that define the visual appearance of the webpage. The CSS would be the designed elements of the house, like the siding, window shape, curtains, etc...


Javascript is a scripting language that is used to add interactive and functional elements to the webpage like buttons and animations. It would be the doorbell, the garage door opener, or the little strings that open the blinds.


Folder Organization

It’s important to keep all files related to a website in the same folder. Decide on an organizational structure early on that won’t change much and is scalable. This will help with locating files as the website grows and will prevent references to files (like webpages and images) from breaking when you re-organize things.

File Naming

File naming is crucial! When it comes to file names and websites, only use lowercase letters, numbers, dashes ( - ), or underscores ( _ ). Don't use uppercase letters, spaces, or symbols as they may be misinterpreted when you host your website on a server. Make sure to keep file extensions lowercase as well—use “.html” instead of “.HTML” and “.jpg” instead of “.JPEG”.