Blog Category: Teaching Technology

How to Use Filezilla to Launch a HTML Website

Okay, so now you have written a basic HTML/CSS site, and you want to launch. But, there is only one problem, you have no freaking clue how. Well luckily for you here is a tutorial titled “How to use Filezilla” that shows you how to launch a basic HTML / CSS site onto the interwebs.

There are two ways you can upload your site: FTP and SSH. FTP, or more specifically sFTP, is easier to explain so let’s start there.

Before we begin there are a few basic things you need:

  1. A website domain name
  2. A website host provider
  3. Your host provider login

Your hosting provider will be where you get these items:

  1. FTP host
  2. FTP username
  3. FTP password

All sites need a domain name and host provider. Beginners sometimes think that when you buy your domain name for $9.99 a year at a company like GoDaddy that you are done. Well…. not quite.  You need a hosting package too.

What is hosting? Hosting provides access to a computer (server) that is working 24 hours a day 365 days a year. You “host,” place, your files on this computer (server). The server allows the public to view your files through your domain name.

How does that work? Well, your domain name points to an IP address. IP addresses are like street locations for the internet. For example,’s IP address is 192.123.456.789 is nearly the same thing as saying Bitwise Industries is located at 700 Van Ness Ave, Fresno, CA 93721.

It gets more and more complicated with DNS and NameServers. Blah blah blah. But I will give you the basic version. When starting out, buy the hosting package first. Why should you purchase the hosting package first? Well, 90% of hosting packages online provide a domain name for free if you host with their company. Only small local businesses don’t usually offer this package deal. Technically you can purchase your domain from a company like and host at, but don’t do this. As a beginner, it is just more complications and headaches. If you purchase the hosting package and get a domain name with it for free, they will setup the DNS and NameServers correctly for you.

Now hosting, which hosting packages should you use?

First thing, unless you have a developer writing a fancy application GET LINUX HOSTING. Hosting companies usually offer two types of basic hosting, Windows or Linux.

You want to choose Linux. Odds are you will eventually migrate to a CMS (Content Management System). Most, CMS systems run off PHP and MYSQL. Yes, you can run PHP and MYSQL on a Windows machine. However, most Linux servers run Apache. And blah blah blah technical stuff… boring… sleep. Linux, technically Apache, allows mod_rewrite. Mod_rewrite allows for pretty URLs on WordPress, which is good. You are lost, just trust me. Get Linux, it is cheaper and allows you to run more.

Note* if you are hosting a simple HTML site, or basic WordPress site, generally you can get away with the cheapest option. You can always upgrade 😉

Here are some of my suggested host providers: (I use this provider) (Really expensive but insanely wonderful support)

I bought hosting, now what?

Having been a web developer for 7+ years, I can tell you the most typical mistake client’s make. When you ask for their FTP information or SSH, they nearly always send the username and password to their host account.

Your login for your host provider is not the same information as your FTP information. The login allows you to get into a place where you create the FTP username and password!

So this is where it get’s tricky. I don’t know what host provider you decided to purchase. There are like a billion out there. But what you need to do is login and figure out how to create an FTP username and password. Most will do this automatically for you. Check the signup email they send fir this info first.

I would suggest Googling “Setting up FTP accounts at [enter host name here]”.

Most decent host providers have support documents that will walk you through this process.

In the end, you need to find, or create, three items:

  1. FTP host (which is a URL or IP address)
  2. FTP username
  3. FTP password

Once you have these items, we can connect to your site.

Finally the real question “How to use Filezilla to launch your website”.

You have your FTP information now we need to connect. To connect we need to download an FTP client. There are lots of different ones out there, some cost money, and some are free. I prefer the free ones. Specifically, I prefer FileZilla, it is open source and stable. The only downside is that it seems like there is always a freaking update.

So to upload your site, there are four steps: Install, Connect, Upload, Check

How to use Filezilla, Step 1: Install FileZilla

How do you install FileZilla?

  1. Go to
  2. Click on the button “Download FileZilla Client”
  3. Download and Install
  4. Open up FileZilla

How to use Filezilla, Step 2: Connect via FTP

Now that you have Filezilla open you should see a screen like the one below.

There are two ways to connect: “quick connect” or using the site manager.

Connecting through “Quick Connect”

On the top bar, you should see “Host:,” “Username:,” and “Password.” Place in your FTP information. Don’t worry about port. Add in your Host, Username and Password previously provided by your hosting company. Click the big “Quickconnect” button.

If you are lucky, you will see a bunch of magic happen in the box directly below “Quickconnect” and files appear on the right-hand side where it says “Remote Site.”

Connecting through “Site manager”

The button on the top left allows you to store hundreds of FTP accounts. If you are managing multiple websites, you would want to configure the FTP information using “Site Manager.” Why? “Quick connect” only saves the login credentials for the last 10 FTP accounts you have connected via FileZilla.

Common errors and their meaning

If you see this:

Filezilla Login Error

Then you have the wrong password 🙁

If it is stuck on “Connecting to” then you see this:

Filezilla Connection Error

Your internet is either bad. OR the website is behind a firewall, and the connection is being blocked (this won’t happen with a standard host package). Generally, firewalls issues like this occur with a more advanced host provider.

For a majority of the errors you just need to make sure you entered the information correctly. I would recommend typing in the credentials. NOT copy and paste? Why? Well sometimes when you copy, you accidently grab an empty space before or after an item. FileZilla sees this space and thinks it is a part of the password, username, or host entry. This will cause your site to error.

How to Use FileZilla, Step 3: Upload Your Files

We are almost done! Now we just need to upload your site’s files.

If everything connects, you should see something like the image below. Notice that files loaded under the “remote server” side. You should see “folder” icons. You want to find one that says public_html, or www, or something that sounds website-ish. Double-click on the file to open it.

how to use filezilla

Now find your web files on your desktop. Drag and Drop the files into the website-ish sounding folder. Once this happens, you should see a “Que” pop-up in the bottom of the screen.

Once everything is loaded there should be nothing left in the “Que”.

Final Step Test!

The final step is simple, just load your website page. If it works yay, if not, sorry?


Parse Event Time From String Javascript

I am working on some code to parse event times from messy input use strings. The idea is to find the time and output the start and end time.

I have developed some code, that needs more tweaks, but I am trying to develop it so it can look for various types of user inputs for example:

7:00 till 8:00 p.m.
Even starts at 8:00 a.m. and ends at 7:00 p.m.

Please feel free to use the code or give suggestions on how to tweak my javascript to make faster. I am sure I over-engineered it in more than one way.

var re = /(a.m.|p.m.|pm|am)/g, // Filter By
str = "String blab la bla $22.99 event starts at 12:41 a.m. ends at 10:00 p.m. asdfasdfas"; // String To Test

var timeArray = new Array();
var timeStamp = new Array();

while ((matcher = re.exec(str)) != null) {

// Get Start And End Time
startTime = str.substring(timeArray[0] - 6, timeArray[0]);
finishTime = str.substring(timeArray[1] - 13, timeArray[1]);

if (startTime.length == 2) {
finishTime = startTime.substr(1,2);
startTime = startTime.slice(0,1);
} else {
// console.log(finishTime);
// console.log(startTime);

var matches = /(-|to|till)/g;

if (finishTime.match(matches) != null) {

var splitTime = startTime.split( matches );
var slpitTimeFinish = finishTime.split( matches );

if (timeStamp.length > 1) {
finishTime = slpitTimeFinish[2].replace(/[A-Za-z$.]/g, "");
startTime = splitTime[0].replace(/[A-Za-z$.]/g, "");
startTime = startTime.replace(/[0-9]{1,3}\s/g, "");

} else {

finishTime = slpitTimeFinish[2].replace(/[A-Za-z$.]/g, "");
startTime = slpitTimeFinish[0].replace(/[A-Za-z$.]/g, "");

var breakTime = startTime.split(':')
hours = breakTime[0].replace(/[0-9]{1,4}\s/g, "");
minutes = breakTime[1];

if (minutes == null) {
startTime = hours + ":00";
} else {
startTime = hours + ":" + minutes;


startTime = startTime.replace(/\s+/g, ''); // Remove Spaces
finishTime = finishTime.replace(/\s+/g, ''); // Remove Spaces

} else {
finishTime = finishTime.replace(/[A-Za-z$.]/g, "");
// console.log(finishTime);

var breakTime = finishTime.split(':')
hours = breakTime[0].replace(/[0-9]{1,4}\s/g, "");
minutes = breakTime[1];

if (minutes == null) {
finishTime = hours + ":00";
} else {
finishTime = hours + ":" + minutes;

finishTime = finishTime.replace(/\s+/g, ''); // Remove Spaces
// console.log(finishTime);

startTime = startTime.replace(/[A-Za-z$.]/g, "");

var breakTime = startTime.split(':')
hours = breakTime[0].replace(/[0-9]{1,4}\s/g, "");
minutes = breakTime[1];

if (minutes == null) {
startTime = hours + ":00";
} else {
startTime = hours + ":" + minutes;

startTime = startTime.replace(/\s+/g, ''); // Remove Spaces


// Get Time Stamp

if (timeStamp.length > 1) {
eventStartStamp = timeStamp[0];
eventEndStamp = timeStamp[1];
} else {
eventStartStamp = timeStamp[0];
eventEndStamp = timeStamp[0];

console.log ("Event Starts At "+ startTime + " " + eventStartStamp +" Ends At "+ finishTime + " " + eventEndStamp );

Magento MP Survey Change Default Page Layout

I purchased and downloaded MagePage’s MP Survey. I had a client that need more than the default Magento page and survey system. I stumbled upon, which developed MP Survey. This Survey is awesome and did the trick. I might do a review about it at a later date.

Anyway, I ran into an issue where the default page layout was not what I wanted. By default it was 2 column, I just wanted one. After about 30 mins of messing around I was able to make this to my 1-column layout.

Here is what you do. Go to /app/design/frontend/puroast/default/layout

There back up the file survey.xml.

Now open up and edit this file and look for the following:

Add the following right after this tag.

That should fix the issue. You can also apply this after survey_category_view and survey_index_index if you would like.

That sohuld fix it.

Bxslide Links and Side Navigation

Here is a way to create a dynamic sidebar. The system will count the list items and associate it with the proper slider.

Here is the javascript code.

$.each($('.side-nav li'), function(index, value) {
console.log(index + ':' + value);
$(".story-nav li a").eq(index).addClass('slide-'+index);

$('.side-nav li a').click(function(){
var num_id = $(this).attr('class').match(/\d+/); //

You can then add this html code on your page:

By adding these items, you can create a side navigation that will scroll to the proper slide. You can name the link what ever you want.

Photoshop To CSS | CSS Hat Review

CSS Hat Interface

Costs: $34.99

I am a professional web site developer, mainly a front-end user interface engineer. Most of my day is spent bouncing around photoshop files and sublime text editor, trying to match pixels and recreate mock-up photoshop web sites into working html and css. As most front end developers know, is that this task, without a proper work flow and set of tools, can be daunting, frustrating, and slow. Going from photoshop to css can be a major pain.
[Read more…]

Pages: 1 2

Magento – Fix Payment Authorization Error or Payment Capturing Error

Sometimes when you are creating a new magento store you will run into one of the following errors when trying to connect the cart to

Payment authorization error or Payment capturing error

You will see these pages on the magento checkout page right after you place in your credit card information and attempt to confirm the order. This error can be frustrating but with these few steps you should be able to troubleshoot the problem.

Fix “Payment Authorization error” or “Payment capturing error” in Magento. Step One: Verify your API ID and Transaction Key

Step one, make sure your API Login and Transaction Key are correct.
To do this go to and login to the account.
[Read more…]

Magento Use Custom Product Attributes to Add CMS Static Block to Product Page

The Magento shopping cart has wonderful tools like attributes that makes it easy for users to control custom content on your products. Recently, I have had a client that needs to display the same information over multiple products. So rather than manually adding it on one product, I thought it would be easier to link a custom cms static block to the product page. While this seems like an easy thing to do, Magento makes this a bit complicated to set up. So this tutorial is meant to show you how to do this! After this tutorial you will be able to control static cms blocks from any product in your Magento store.

So let’s begin.
[Read more…]

Add Pinterest “Pin It” Button to Magento Product Page.

Want to add a pinterest pin it button to your magento product page. Well it is quite easy and only takes a few steps. You will have your pinterest button working in no time!
First open up your product view.phtml. This file is located in /app/design/frontend/yourtemplate/default/template/catalog/product/view.phtml. Next find the place you want to place it, I recommend next to or above the Quick Description. Add the following code.
[Read more…]

Magneto – Stop Magneto from write errors logs to /var/report

Sometimes you don’t want magneto to write error reports to /var/reports/. For example, we have nightly back-ups which take multiple magento stores offline while the databases are being backed up on our database server. What is the problem with this? Well whenever someone hits the magneto site, over that 1-2 minute period at 3 o’clock in the morning, we get an error created. What does the error say? “Too many connections”. That makes sense because the database has to be locked whenever it is getting backed up. So this causes some problems. Why? Well if we have multiple magento stores getting taken offline, plus the server is doing a back-up, and if users hit site site what happens? Memory errors. How come, well whenever someone hits the site an apache process is generated to write the silly little file to the server. Plus it takes up disk-space. Boo…
[Read more…]

Visalia Web Site Design

Normally my company and I charge $85 dollars for our services but for now we are going to knock off 20 dollars an hour. Meaning, all Visalia citizens can get professional work at an affordable rate of $65 smackers an hour.

That sounds great but you are probably asking, “Why should I work with you?” I will tell you why:

  1. You will get great customer support
  2. We create killer web site designs at an affordable rate
  3. You receive awesome customer support
  4. We only use ultra clean code to enhance your beautiful web site designs\speed
  5. Personal one on one customer support
  6. We don’t out source to other countries.   We keep the work in the valley.
  7. Did I mention you get the best customer support around?

[Read more…]