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:

  1. You have not set up any web development software on your PC yet.
  2. 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.

Example of menus that appear when right-click (although this is in folder 1 HTML not lesson1 as in text)

Example of menus that appear when right-click (although this is in folder 1 HTML not lesson1 as in text)

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.

Menu list when right-click in FireFTP

Menu list when right-click in FireFTP

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:

1512 Total Views 2 Views Today

You may also like...

2 Responses

  1. S B Java says:

    Karen, Thank you for answering my question at Udemy this morning. You recommended that I go to your blog “These instructions that I have written in my blog may help you.

    http://wibbi.uk/newbie-guide-to-setting-up-your-pc…” I went immediately to your blog and have been having problems trying to view my code in a browser ever since..

    I am still having problem viewing my files I am creating using SublimeText in a browser.

    I am sure it is something simple and I will be embarrassed that I am having these problems but any advise you can provide will be greatly appreciated.

    I am going through this course so I can build my own websites and have spent all day trying to be able to view what I am coding using CSS.

    Thanks

    • karencropper says:

      I’ve tried to answer your question more fully in the course forum. I think when you have a problem you need to try to describe what you are doing, and how it is not working rather than just saying you are having problems or something isn’t working. Try to describe what you are doing, possibly with screen shots if you cannot describe in words and what you are thinking is going to happen, as that helps others to figure out where you are not understanding or what you are doing that you need to do differently. I have some other posts on this blog that might clarify things. I certainly also recommend replaying the first few lectures of the course, which deal with setting things up.

Leave a Reply

Your email address will not be published. Required fields are marked *