Setting Up Atom
- What is Atom? It's a versatile open source text editor that can be used for software and web development!
- Download and Install Atom: https://atom.io/
- Open it up!
- Packages extend the functionality of Atom. For example, if you want to use Atom as a web development tool, you can install packages that are specific to web development.
- Directory of Atom Packages: https://atom.io/packages
- Installing Packages
- Go to Atom -> Preferences... (this opens the Settings window)
- Click on Install in the left column
- Type the name of the Package you want to install in the Search box
- Click on the blue Install button to install the package
- This package allows you to connect to a remote server and upload your web pages (very important!)
- Install it!
- Scroll down to Settings (for remote-ftp)
- Set "Auto Upload On Save" to never
- Wait and follow the next lecture notes to set up the connection!
- This adds a menu item so you can right click on a web page you're working on locally and check it in a web browser.
- Install it!
- Projects are a folder (or folders) of documents that are grouped in a window in Atom
- Set up your local folder structure (on your computer)
- Create a new folder called ATKWeb
- Open the ATKWeb folder
- Create a folder called ATK303 (no spaces!) inside the ATKWeb folder
- Create a new Project in Atom: File -> New Window
- Select the ATKWeb folder as your project folder: File -> Add Project Folder...
- A tab called "Project" should open up on the side of the screen.
If it doesn't appear, go to Packages -> Treeview -> Toggle
- You should be able to see your ATKWeb folder with the ATK303 folder inside
- Right click on the ATK303 folder in the Tree View and select New File
- Enter index.html at the end of the path (it should look something like: ATKWeb/ATK303/index.html)
- The blank file index.html should now be open in your Atom window
- Add some HTML to index.html:
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Blank Page</title> </head> <body> <h1>Blank Page</h1> </body> </html>
- See the next lecture on how to set up the connection to your web server!