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