Using cPanel, File Manager, and FTP
Yesterday, I realized I didn’t like CSS coding very much. After reviewing HTML, it was repetitive. It seemed like yet another way to do the same things I learned how to do in HTML. It also seemed very complicated, once I got deeper into it.
Since this is all review, anyway, I realized I could blitz through the rest of the book. I observed how the code worked and how it displayed. The nuts and bolts of how everything works can be looked at another day—if I need it at all. In my research, I learned about Bootstrap. It is a way to standardize CSS. I can learn how to write that code if I really need to code in CSS.
I made a sandbox on my web server to practice HTML, CSS, and now programming.
I’m a beginning programmer. You might be a beginning programmer. You might not know what a sandbox is and how to create one.
A sandbox is a place on a web server to upload and play with code. This location has no ties to your actual web site, so you are free to write broken code without danger of messing up a main site. Ideally, this will have a domain name, so you can practice “live.”
These instructions assume that you are paying for a web site, and that you have a web host running cPanel. Most sites are.
You can set up a local sandbox, on your personal computer, but I don’t really know how to do that one.
Go fish, if that’s the case.
How to set up a sandbox on your web server
Most hosted web sites come with a control panel for managing the back end. This is where you install programs (like blogs), manage email addresses, and check stats.
Usually, this control panel is using cPanel software. Different versions look slightly different.
If you don’t know how to get to your control panel, look at the documentation that came from your web host when you first signed up.
Step One: Go to your cPanel
The instructions for doing this on your web server might be different. Check your documentation or contact your web host. On my last two web hosts, the address of cPanel was http://yourWebSite.com/cpanel. Then you enter your user name and password to get inside.
Once inside, you will see a collection of icons that represent different parts of your control panel. Again, there are many different versions, so don’t worry if my screenshot looks different (above).
Step Two: Open File Manager and create your sandbox
The icons may be different, but look for the name “File Manager.” Open it.
Your screen should show a lot of files and folders. It should look very similar to my screenshot above. Double-click on the “public_html” icon. This is where all of your website files live (also known as “document root”).
Step Three: Create a new folder called “sandbox”
Click on the “+ Folder” icon. A window will pop up and ask you for a name. Put in the name “sandbox” and click the button “create new folder.”
Success (kind of!)
Now, you have an empty sandbox. Your new space is set up at the web address:
If you go to this page, you might find an empty file list or you might get an error from your server (Forbidden!). Don’t worry. That just means you don’t have anything in your folder to look at.
Step Four: Create a blank file to be your web page
Back in File Manager, double-click on your new “sandbox” folder to open it. It will be empty, of course. Click the “+ File” button at the top. In the new window, create the file “index.html”. When a web address opens, you are looking at either the index.html page, or the index.htm (or if you are a programmer it could be index.SomethingElse).
Finally, open this blank file so you can edit it and practice.
Step Five: Edit your new “web” file
Right-click (Windows) or Ctrl-Click (Mac) on your new file and click “Edit.” You will now have a window where you can type computer code.
Open the actual web address in a new window (or new tab). Remember, the address of this new location is:
You can include or leave off the /index.html part. A web server assumes that’s what you mean.
Every time you write some code you would like to test, put it into the “index.html” file, save it, and then refresh to browser window.
Try it out! Put in some dummy code to test out your new sandbox:
<h1>My first headline!</h1>
<p>I’ve even got some body copy. Radical!</p>
Step Six: Set up FTP for transferring folders
This is great for working with files one at a time. You can create single files or folders with ease. You will soon find out that File Manager will only work with single files or folders. Once you start programming, you will be working with multiple files and complex folder structures.
For this job, we’ll need FTP. That’s File Transfer Protocol, for those of you that don’t know. It doesn’t matter much here. We could call it the Thing that puts the Thing on the Thing (TTT).
Open your main cPanel window. The icons will look different, but find the FTP Accounts section.
Use this area to make an FTP account. This will be a name and password combination like an email address.
After you have created the account, it may tell you the “FTP settings” to connect. Mine were available under “Configure FTP Client.” It will be a combination of:
- FTP Host name: like ftp.yourWebSite.com
- FTP port number: like 69, dude
- FTP username: like firstname.lastname@example.orgWebSite.com
- FTP password: like, you just created it, or something
Step Seven: Download and fire up FileZilla
I’m using Windows, so the free program you use may be different. I am using FileZilla (no affiliation). Once you download it and open it, you can enter your above server details and connect to your server. I have an option called “Quick Connect.”
All of my local files (on my computer) show up in the left window. All of the remote server files (on your web host) are in the right window. Browse to the file/folder you would like to upload in the left window. Browse to where you want that to go in your right window. Double-click a file/folder in the left window to move it to the remote server. This also works in reverse, if you want to download a file/folder from your server.
Step Eight: Crack a beer, you’re done!
I’m sorry there’s so many steps, but you only have to set this up once. Now that it’s set up, I can open two tabs in my web browser. One shows the edit page of my code. The other shows my resulting web page.
If I need to move around a folder, I can do that through FTP.
When I started working with CSS, there were three tabs to open. One tab for my index.html text, one for my CSS text, and the output on a web page. There might be even more when I start to program, but we’ll get there when we get there.
Bunny Trail: Password-Protect Your Sandbox
We are experimenting here. Our code might be broken and insecure. We should password protect our sandbox from lurking eyes (like search engines and hackers).
Matt is on a noble quest to grow into the next level of web developer. Let the battle begin! Sign up for the M.W. McCabe newsletter.