Newbie guide to setting up your PC for learning web development
These instructions are for PC with Windows 7 or 8. I’ve written them to be able to answer questions related to this subject which come up frequently in the forum.
These instructions are for you if:
- You have not set up any web development software on your PC yet.
- You want to be able to create and/or edit HTML files.
You will need some software (text or code editor) to do that. You can use the basic text editor notepad that comes with Windows, but there are also several more sophisticated and free text editors specifically designed for code writing. I have written a list of free text editors in this post: http://wibbi.uk/notes-free-text-editors/
Pick one, download from the link and install it on to your computer.
Now open up the program, create a new file, type in “Hello World” and then Save As hello.html in a folder that you are using to keep all of your training files together eg C:/users/yourname/desktop/myweb/lesson1
Use Windows Explorer to open the folder (eg C:/users/yourname/desktop/myweb/lesson1) that you have saved the file in.
Right-click on the hello.html file, then select open with from the menu that appears.
Click on the ‘choose default program‘ from the list that appears.
Make sure that the “Use this application for all .html files” is selected. Then select your chosen text editor from the list that appears.
Now whenever you want to open a file in your editor all you need to do is either double-click on it OR right-click and select Open.
If you want to see how any .html file looks in a browser, right-click and select Open With, and this time select a browser of your choice (eg Firefox, Chrome, Internet Explorer), but don’t set it as your default, as that will mean your editor won’t open next time.
This is now your web development environment on your computer.
To transfer your files on to your host web server, you will need a File Transfer Protocol (FTP) program. On this course, the suggestion is to use the FireFTP plugin for Firefox. If you have followed the instructions above, you should now be able to open any html files from the server (via FireFTP) in your text editor to modify them. Right-click on the file in the FireFTP server window (the pane on the right side) and select Open from the menu list.
If you want to open, create and edit other types of files (eg .css, .js, .php) with the same text editor, you can go through the same process outlined above, only using the relevant file ending instead of html.
If you want to see what a file that is on your web server looks like in a browser from FireFTP, you need to set up the default “View on Web” URL option shown in the image above. I have written separate instructions for that (see link below). Alternatively you should be getting to know what the URL of your file is anyway and can type or copy and paste that direct into any browser address bar.
Other posts you may be interested in:
- How to Add a Shortcut key for FireFTP to Firefox
- How to change the default “View on the Web” URL in FireFTP
- Free Text Editors