Adding Downloads to Your Website: A Tutorial for Beginner's

I have spent the last seven years of my life learning everything I possibly could about graphics and web design, as well as the coding and building blocks to create a website as a whole. I would not have been able to get where I am today without the help of some well written and easy to follow tutorials. Now that I have learned so many tricks of the trade, I love spending my time to help others so that they can enjoy the world of design as much as I do. I will be writing a series of tutorials, starting with those designed specifically for a beginner. I plan to have at the very least five tutorials per skill level with four skill levels including beginner, intermediate, advanced, and expert. Most of these tutorials will require at least basic knowledge of HTML, PHP, and CSS coding.

Before we begin this tutorial, there are a few things you will need. They are: an FTP program of your choice, a zipped file that you wish for people to be able to download from your website, a preview graphic for your download file, and optionally, a graphic for your download link.

In this tutorial, I am explaining how to add downloads to your site, with your own hosting so you don't have to deal with external download sites that may have pop-ups, wait times or even delete your files.

If you host everything on your own server, it makes things super simple!

I suggest making 2 separate folders to hold your download previews and your actual .zip or .rar files. These folders can be added
by going into your FTP program of choice and adding new folders inside your public_html folder. Mine are simply named "zip" and "preview".

1. Once you have your folders set up, upload the images & files you wish to host in their respective folders.

2. Now you don't have to waste time writing out long links or copy/pasting links from another hosting site.

3. In order to get your preview image to show, all you have to type is
picture#1
Make sure you add the border part or your image will have an ugly blue box around it if it contains a link.

4. Next, we will add the download link for the .zip or .rar file.
picture#2

5. Alternately, you can add a download button underneath the preview image.
picture#3

6. For example, this code
picture#4

would show on your site as this:
picture#5

7. Hope this was helpful & if anyone has any questions, feel free to leave a comment.

There are many examples of what can be done with this tutorial located at my website, Lemonbirdy Designs, as well as call my contact information if you need to get in touch with me about this tutorial or anything else I may be able to help you with.