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!
 

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!