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!
 

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.