How To Upload A Website To The Internet With FileZilla FTP

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!

Basic HTML/CSS Website Layout For Beginners

In this video tutorial we’ll go back to the basics of HTML and CSS to create a simple layout. Our website will include a header area with a logo, a banner section with pictures and text, a vertical navigation on the left side of the screen and a body section with a title and text area!

Create a responsive website from scratch with html5, jquery image slider, css3 drop down menu

In recent tutorials we created responsive websites with HTML5 and CSS3 using just a text editor (“Notepad ++” and/or “Text Wrangler”) yet we didn’t include any flashy elements such as an image slider or responsive drop down navigation. In this instructional tutorial, with the accompanying YouTube video, we’ll make a responsive website with an image slider, “The Blueberry Slider” by Mark Tyrrell, and a responsive drop down menu that will switch to an icon with the website’s responsiveness. Were also going to be using an icon set for images in our responsive website that are from the “Stylistica Icons Set” by Dry Icons but use whichever vector icons you like out of the set.


Download the JS & CSS for the Image Slider


The CSS drop down menu has a single-column drop down effect when the website is 740 pixels or less in width, thanks to the media queries we’ll be adding towards the end of the tutorial. Enjoy!

How To Make A Responsive Website With HTML5 and CSS3

In the video attached to this blog post you’ll learn how to make a simple responsive website with HTML5 and CSS3. For this template, we will have seven different sections running down the page as follows. When laying out the HTML for a responsive website, it’s important to plan out which aspects you’d like to be responsive so you can design for the smallest screen size using the “media queries” in your CSS. Three of our seven sections will not require media queries as the content will remain the same no matter the width.


How to Create a Responsive CSS Drop Menu with HTML5 and CSS3

In this tutorial we’ll take a look at how to create a responsive CSS drop menu with HTML5 and CSS3. The YouTube video below includes the instructions from start to finish on creating the menu but if you want to start where I do in the video simply download the starter source code file below!

Responsive HTML5 Navigation with Drop Down Bars

In this video tutorial we’ll make a fully responsive HTML5 navigation! Our navigation will flex from a horizontal layout to one with vertical bars to give users an easy way to select pages of the website once it’s sized down to a smart phone or tablet.

This CSS drop down menu is a starter template to a fictitious painting company called “Harry’s Painting”. Below is the video tutorial followed by a download link that will bring you ten minutes and thirty-five seconds into the video so your ready to code the navigation.

HTML5 Responsive Sticky Navigation Menu

In this tutorial we’ll take a look at how to create a responsive sticky navigation menu with HTML5!
Most any web designer will tell you that a website’s navigation is one of the most critical aspects of any website and in our pursuit of making websites as user-friendly as possible, ‘sticky navigation’s’ have become more and more common. There’s always the question, though, of whether or not they are more of nuisance than they are useful when using such a small device such as an iPhone! To combat this issue, our navigation in this tutorial will be “sticky” when it sits on a full width screen as well as on most tablet devices, taking up just 90 pixels at the top of the screen, but once it’s sized down to the width of most smart phones, the stickiness will disappear!

How To Use The Duplicator WordPress Plugin With MAMP

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.

Duplicator MAMP server connection in installer

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”!



Responsive HTML5 Web Design Tutorial – How To Make A Website From Scratch

In this video tutorial you will learn how to make a basic HTML5 Responsive Website from scratch using only a text editor. This is for those of you who are just getting started with responsive web design who want to get the feel of how HTML5 and media queries work together. First we will layout all of the html and then move over to our css style sheet to actually design the website.

The text editor I will be using in the tutorial is called “Text Wrangler” which is a free software you can find online and works with any Mac computer. If your on a PC, however, one of the best free text editing softwares you can find is called “Note Pad ++”.

In the video an external style sheet is used for the css of the design but in the free downloadable file it is an internal style sheet. Feel free to download the source code of the HTML5 Template if you do not wish to follow along with the video. All of the images in this website tutorial are uploaded to the web so they do not come with the download.


Introduction to HTML and CSS With A Two Column Website

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.