Posts

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

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