Essential Tools

First, we will need a text-editor to write our code in.
I suggest Atom because it’s free, accessible, and the editor that I use.


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


Because instruction will take place remotely, I will ask that you use Atom when we are debugging as it has some features (Teletype) that will assist in making the process more fluid.


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).


Terms

Website

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


HTML

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.


CSS

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

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.


Files

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”.


Useful Atom Plugins

There are a lot of plugins available for the Atom text editor. Here are some recommended and handy plugins. To assist in debugging and helping with code remotely I'll ask that you at least download Teletype and Beautify.