Introduction to HTML and CSS With A Two Column Website

YouTube player

Please subscribe on YouTube 😊

One mistake made by newbies like myself in HTML and CSS is to run down a list to learn specific HTML tags and CSS rules in the beginning rather than attempting to create a workable project where all of the pieces come together. My most valued learning experiences when I started on introduction courses to HTML and CSS were where I simply followed and copied code through book and video tutorials.

In this video tutorial, you will see how to make a two columned one page layout with some styling within the HTML document to give the website some flare. All you need to participate in this tutorial is a text editor and the links to the images I provide below if you don’t want to use your own.

How To Use The Duplicator WordPress Plugin With MAMP

YouTube player

So you’ve created an awesome looking WordPress website on the server with your hosting account and your wondering how the heck you can backup and restore your website on a different domain name or on your computer itself. The problem with backing up WordPress websites or moving them to a different location is that they use MySQL databases (interacting with the PHP code that WordPress runs on) so simply dragging and dropping files in an FTP program such as FileZilla won’t cut it. Backing up the database separately, on top of FTP, can be a daunting task so why not cut to the chase and show how it’s done with ease. MAMP is the number one WordPress Plugin for “cloning” and backing up then subsequently restoring a WordPress website. MAMP is for Mac user, WAMP is for Windows users. Check out the video Below or scroll down a bit to get the play by play on how to clone your website.

Step 1. Search for, download and install the “Duplicator” plugin in the backend of your WordPress website that you want to backup, clone or transfer.

2. Go into the Duplicator plugin and select “Package” then on the packages page select the ‘create new package’ icon in the center of the screen.

3. After selecting the new package icon, select “Create Package Set” in the pop-up window.

4. Once the package set has been create, click on the “Installer” and “Package Icons” to the right of the screen. This will download the two zip files we’ll need so make sure your computer doesn’t automatically unzip the files upon downloading them.

5. Now we can close our web browser with the WordPress website in need of backing up and open MAMP (also WAMP or your hosts server if it applies). Make sure the MySQL server is running, open up the “htdocs” folder in MAMP and create a fold with your website name then drop the two zip files into the folder.

6. Next we’ll go into our MAMP start page, PHPMyAdmin, then Databases and create a database (I’ll name it “database”). Go to “localhost:8888/database/installer.php and fill in the following information.

7. After selecting “Run Deployment”, on the following page select “Run Update”. At last, we can go to our local website at “localhost:8888/site”!

How To Use FileZilla FTP Client

YouTube player

Each and every web hosting provider has a section of their c-panel designated to FTP, or File Transfer Protocol, where you can upload files from your desktop to your web host’s server and apply changes to your website instantaneously while it’s live on the web. Files may include an entire static website, a WordPress theme, a single image or a WordPress child theme in the form of a style.css file, for example. Unfortunately, the FTP features many hosts provide are a discernable mess that inevitably restrain workflow and breed confusion!

What makes a model FTP Client? A few much appreciated qualities are, one that works across all platforms and operating systems, is easy to set up with your FTP user info from your host, works seamlessly, is frequently updated and lastly, a quality everyone enjoys, is free. FileZilla adheres to all of the above, then some, and is the most widely used FTP Client available.

After downloading and installing FileZilla, these are the steps you need to take to connect to your hosting account.

  1. Create an FTP username and password with your host and obtain your host’s ip address. For Blue Host use “ftp.(yourdomain.com)”.
  2. In FileZilla, go to “File” > “Site Manager…” > “New Site”  and under “General” > “Host” enter your host’s ip address, change the “Logon Type” to “Normal” and enter your user name and password. Then hit “Connect” and your information will be saved so you can connect to your host with one click. You may also need to enter a port number depending on your host and if you login with “Quick Connect” on the main page, your information will not be saved.
  3. Now that your connected to your host, all of the folders and files on the right side of the screen are those contained by your host and you are free to navigate through your hosted content to download, back up or transfer documents to or from the left, being your computer itself.

How to make a WordPress Child Theme

YouTube player

At some point, in the initial stages of getting to know how WordPress operates, most everyone must ponder how to create their very own theme to accomodate a website or blog.  Instead of learning how to write the complicated code that goes into the making of a theme, we can create our own customized WordPress themes, in a “Child Theme”, by simply using CSS or cascading style sheets.
CSS is used to format and alter the appearance of HTML, which every web page is based on.  With CSS, you can alter your websites color, style, text, dimensions, borders, spacing and the overall layout of a webpage.

To create your child theme you will need to do the following:

  • Download a free text editor, preferably Text Wrangler for Mac, Notepad++ for Windows and Geany for Linux users.
  • Create a new text document and save it as style.css.
  • Insert the following code into your document…

/* Theme Name: Twenty Twelve Child

ThemeURI: http://example.com/

Description: Child theme for the Twenty Twelve theme

Author: Your name here Author URI: http://example.com/about/

Template: twentytwelve Version: 0.1.0 */

@import url(“../twentytwelve/style.css”);

When using a WordPress theme other than the Twenty Twelve theme, you’ll need to change the “import url” folder to fi which ever theme it is your using accordingly. The information after the colons, describing your child theme, do not need to specify anything about the theme for it to work properly and as a matter of fact, you only need the “Theme Name” and “Template” filled out for it to function.

Now you can make your CSS changes and upload the child theme, or style.css file, to the “theme’s” folder in your WordPress directory using an FTP Client. To Find out how to use an FTP (file transfer protocol), such as FileZilla, check out this article.

To activate your child theme look to the backend of your WordPress website or blog, after uploading the style.css file to the appropriate fold, and it will show up along side other themes in appearance > themes.

How To Upload A Website To The Internet With FileZilla FTP

YouTube player

In order to upload your HTML website to the internet using the FileZilla FTP (File Transfer Protocol) program you’ll need three key things from your web host:

1. The IP Address for your web host.
2. Your hosting plan User Name.
3. Your hosting plan Password.

In the video above I’ll show you how to get this information with the Web Host that I use to host all of my websites, Blue Host. Once you have you ip address, user name and password you can connect to the web server using FileZilla to drag and drop your website files directly onto the server so your website is online for everyone to see it at the domain name (dot com name) of your choosing!