Web Development Intensive

All development work in this class will follow the same general work flow procedure.

1. Edit a file(s).
2. Upload that file to the web server
3. View the file in the web browser

Edit a file

To edit a file, we will always use Notepad++.

1. Open the file in Notepad++
   • If editing an existing file, click the “File” menu, and select “Open”.  Then find the file you would like to open in Notepad++ and click the “Open” button.
   • If creating a new file, click the “File” menu, and select “New”.  This creates a blank document.
2. When you are finished making changes to the file…
   • If editing an existing file, simply click File->Save to overwrite the existing file.
   • If editing a new file, click File->Save As.  This allows you to navigate to the folder where you want to save the file, and then enter the filename you want to give it.  Click the “Save” button when done.

Upload that file to the web server

To upload a file, we will always use WinSCP.

1. Connect to the server by entering in the correct hostname, username, and password in the initial WinSCP connection screen.  These credentials should have been given in class.
2. WinSCP will now show you a screen with two panes: on the left are the files on your client computer, on the right are the files on the web server computer.
3. Navigate on the files on client side (left side) so that you are “in” the folder where you have saved the file you want to upload to the server.
4. Navigate on the server side so that you are “in” the folder where you want to upload the file on the server.
5. Drag the file from the client-side (left pane) and drop it on the white-space on the server side (right-pane).
6. If WinSCP asks for confirmation, give confirmation.

View the file in the web browser

To view the changes to a web page, we will always use Firefox.

1. At the top of the server-side pane (right pane) in WinSCP, you will find the path where the file is stored on the server. For example, the fiel may be stored in a folder called /home/scps/onepotcooking.com/georgewashington/class10/test/.
2. In the address bar in Firefox, type “http://” followed by everything after and including the onepotcooking.com/ folder from that path you see in WinSCP.  Continuing our example, we would type http://onepotcooking.com/georgewashington/class10/test/
3. Append to this the filename of the file you want to view.  So, if we want to view a file called “index.html”, the full address for viewing this page in Firefox would be http://onepotcooking.com/georgewashington/class10/test/index.html

Repeat all these steps as many times as necessary until your web page is perfect.

Related posts:

1. Class 1 – Typical web development cycle
2. Class 1 – Required software and useful websites for web development
3. Class 1 – Web Development Summer Intensive Syllabus
4. Class 1 – Recommended Mac Software for Web Development

Tagged: class 1, workflow