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

82 Comments/by
YouTube player

Please subscribe on YouTube 😊

Download Starter Files

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.

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!

You might also like
Introduction to HTML and CSS With A Two Column Websitew3newbie.comResponsive HTML5 Web Design Tutorial – How To Make A Website From Scratch
How to use Duplicator with Mampw3newbie.comHow To Use The Duplicator WordPress Plugin With MAMP
82 replies
  1. ahsan
    ahsan says:

    do you releave “Create a responsive website from scratch with html5, image slider, drop down menu”
    thisa viseo ?please tell me.

  2. Michael
    Michael says:

    Looking forward to your version of this. Assuming it’s a work in progress as the source files are available, however there is no accompanying YouTube video unless I’m missing something, which is entirely possible.

    • Drew Ryan
      Drew Ryan says:

      Hey Michael, you were right, uploaded the video to this a few days ago! It was a long time coming.

  3. Bassel
    Bassel says:

    Hello and thanks a lot for the valuable tutorials,but regarding this one you haven’t post the video yet nor the html code..Waiting for it and thanks a lot again

  4. Ton Buasri
    Ton Buasri says:

    Thanks man, for sharing I’m a newbie and this is the first time visiting your site.
    Keep going, You do a good job. Take care,

  5. Drew Ryan
    Drew Ryan says:

    Hey you can download the videos from youtube and source code from the website here. Or do a search for youtube video downloads, the file is too large to email.

  6. Marc
    Marc says:

    Hi Drew,
    I’m having an issue with the nav icon displaying in the ipad size. I’ve gone through the code but cant find the mistake. any ideas where to look closer?

    Nice tut i’m getting my head into it following what you do. Cheers

    • Marc
      Marc says:

      Hi Drew,

      Thanks for sorting that out I was scratching my head, I guess I get a bit code blind after a few hours in front of a screen lol

      Now for the fun stuff and changing things up to fit my website (fingers crossed)

      Thanks again

      Marc

  7. Husain
    Husain says:

    Hi Drew,

    Thanks for your awesome tutorial. I am trying to learn from your tutorial that’s way I downloaded your
    source code but when I try to extract it. It’s show me this message “The archive is either unknown format or damage. ” I try to solve it with zip repair software and online zip repair service but it’s not working. Please help me .

  8. BC
    BC says:

    Hey Drew, I would like to thank you for creating this video. I have looked at so many and found your video to be very clear. Is there somewhere where I can download your css and html files. I am having a couple of issues and I would like to compare them. Keep up the good work, these are awesome videos.

    • vinny
      vinny says:

      I second that! The slider is not working correctly, I’d like to compare my code with yours see where the mistake was. Would save a lot of time.

      Awesome job by the way, thank you for taking your time on sharing the video.

  11. Tim
    Tim says:

    I am trying to move the internal .css over to external .css so all of the pages on my site have the same layout and it will cut down on my workload. I moved the .css into an external sheet but the slider no longer works.

    Any thoughts?

    Thanks,

  14. Amolak
    Amolak says:

    Hey there,

    Great video btw! It was awesome! It helped so much! I was doing the site and Im having problems with the footer. Problem one is: its not staying in the middle, its on the left and problem two is that the icons for the social site are not showing up but I can see them on Dreamweaver.

    If there is anyway you could help me that would be great. If a google hangout is needed I dont mind paying for your time.

    Amo

    • Amolak
      Amolak says:

      Ok so silly me forgot a colon for the footer but the social icons are still not showing.

  15. Dean Lapinel
    Dean Lapinel says:

    Having trouble with header/footer and other odd code on live view. I’m only up to 48min 49 sec into your video but I’m lost somewhere. Do you have the coding available for comparison? It’s hard to check for errors on the video.
    Thanks!

  16. scott salvatore
    scott salvatore says:

    this was informative but I am having problems aligning the class=section the 3 columns wont align any suggestions?

  17. Banuka
    Banuka says:

    Hello,

    I have done the tutorial. Bur after adding the jqery slider css n js , my slider images was dissapeared. What will be the reason for that.

  19. ramses
    ramses says:

    Thank you bro, but i need image section in tutorial. Please give link download image like in tutorial.

  22. kam
    kam says:

    Hi Drew,

    Your video is very informative. I did the gym webpage with your tutorial, but my slider is not working. I also downloaded your zip file. please help. thanks – kam

    • Drew Ryan
      Drew Ryan says:

      Hey there, as long as it watches the video it should work properly. Double check the jQuery references in the HTML, this is what would cause this (some mishap connecting with the js properly).

  23. Carey Wolfe
    Carey Wolfe says:

    Hi,
    Thanks to your wonderful tutorial my site is now all built – but I have a problem with the menu icon. If I resize the screen it shows as it should but no menu options show if it is clicked or hovered – what should it be doing?
    Thanks!

  24. Michael
    Michael says:

    Hello,

    I have a question, how and where did we create that drop down menu on the tablet view? How did it pick up the opacity as well?

  25. Michael
    Michael says:

    Hello,

    Sorry for the miscommunication. At one point in the tutorial — once we started the media query elements — we set the style for nav ul, nav:active ul ….etc. Then all the sudden I notice the mobile menu appearing on hover at the mobile breakpoint. I am unsure of how we got that mobile menu to work based on the styles we set. Was just confused on how that got working.

  26. Liviu
    Liviu says:

    Thanks for the tutorial and continued good luck. I promise to follow the other tutorials.
    Liviu

  27. Nicole
    Nicole says:

    Dear Drew,

    This is a great Video I have ever seen. Thank you for your sharing. I want to download source of your website sample. I provided my email to you but I didn’t receive any email from you. Please help me for this. Thanks a lot in advance.

    Regards,
    Nicole ^_^

  29. pallavi
    pallavi says:

    It was really a great tutorial, clear and easy to follow . Thank u for such great tutoiral and looking forward to great tutorials ahead

  30. willie mae
    willie mae says:

    stilling working on it. I don’t understand how to make he top part with the name called “The Gym” larger. And how do you make the image full with? thank you.

  33. john
    john says:

    Please I would like to run this downloaded file but i cant see any html file or php.
    I have followed the you tube videos but my photos dont display in the browser. thanks I am so grateful for your help

  35. emmanuel
    emmanuel says:

    Hi Drew
    I have downloaded the jquery and css to the folder I am using… But the slider isn’t working.
    I used I different photo from what you use, could that be the problem?
    Kindly respond ASAP.
    thank you

  36. Tiago
    Tiago says:

    Man, i came from Brasil to congratulate you, for this amazing attitude of sharing. I do appreciate yours videos on html5 and css responsive design.
    Keep up the good work and be Blessed.
    Hugs from Tiago, Brasil

      • Nahid
        Nahid says:

        I got an email from you after I got an email from you. I can’t find the zip file to down load them to my machine.

        Would you please let me know where I can find them?

        Thank you for the time you put in to make this tutorial.

  37. samson
    samson says:

    Hello

    Thanks for the video
    but my slider passes on top of the header when i scroll down, the menu icon has failed to appear and the body content has failed to center

    Please help

    thank you

  38. Arnaud
    Arnaud says:

    Hello Drew,

    thanks for your work and sharing web design knowledge with us. However I am not able to download the tutorial files. I entered my email address in the form to receive download links but did not get the email confirmation. How can I get the files otherwise?

    Arnaud

  40. Raffat
    Raffat says:

    Hi Ryan,
    Thanks a lot for sharing this insightful video with the web design community. However, when I tried to download the slider script from the link you provided it was not successful. Could you please help me get this rectified.

    Thank you.

  42. Will
    Will says:

    how can I put an logo in the header area where the nav is at on the top left corner? how can I put an post comment area on my site?

  43. Jeff
    Jeff says:

    Hey Drew,
    Awesome tutorial! Couple questions:
    1. On the media query, why the “position: absolute” on the body at 478px and the header at 740px?
    2. What are your thoughts on “Mobile First” design?
    Thanks again for a great video.

  46. Kathy
    Kathy says:

    Enjoyed your tutorial but am having trouble with the #menu-icon displaying in the mobile browser. I have the pop up menu but the icon does not show at all in mobile mode. I read that “display: hidden;” is not html 5 code. I checked W3. Can you help me solve this?

    • Embrys
      Embrys says:

      Hi Kathy. Did you get the image slider running using the blueberry.css and jquery.blueberry.js file, if so I want you to help me on that I’m stuck. ..

    • Drew Ryan
      Drew Ryan says:

      Hey Rezaa, the templates are for people to customize and make their own websites with – yes you can!

  49. Kenrugah
    Kenrugah says:

    hey Drew…
    Lemme say that first of all what a great job the gym was..I followed it to the last bit of it and could not imagine I could go that far..you made me proud of my own self..
    the thing is that I am making another website though using the same steps you did…the thing is I used the same steps but unfortunately the css and JavaScript still ain’t working on my project could you kindly assist

  51. Raymond
    Raymond says:

    Ur tutorial is great I must commend……..but plz am having problem with d image slider, I mean d point where u downloaded a zip folder from a website…

    first of all how and where did u insert d downloaded file?
    And is their any other way I could put the image slider to work rather than downloading that file?
    thanks for ur reply in advance……..pls answer me as soon as possible:)

  52. Embrys
    Embrys says:

    Hi Drew. Thanks for this very great tutorial.
    I am a beginner programmer and I’m stuck on where you added the blueberry.css and jquery.blueberry.js files ….how can I get the files and what are the changes to be made on it. ….Thanks for your great help to us. I appreciate

  53. nathalie
    nathalie says:

    thanks a lot for the great assistant to create this web but i have a problem cause the image slider is not working

  54. https://bonusslots.work
    https://bonusslots.work says:

    * First of all, you must be aware of the local laws related to gamble.
    Remember, although you’re gambling on your money, you must not gamble on the selection of casino.
    Online bingo deposit bonuses are becoming more generous due to increased competition.

  55. yash chavan
    yash chavan says:

    hey sir slider image is not working in and its not connecting in my first index.php page as well what to do

  58. Maneza F8
    Maneza F8 says:

    It is really great i enjoyed watching it and i implemented some of the styles i was always struggling with the clear styling and z-index and the slides but how can i include next and previous?

    • Machin
      Machin says:

      just follow keenly what he says as from the 56th minute of the above video .download the js and css file ,unzip and save it at the folder you have ur html code sure it will work trust me

  60. Vincent Cheembe
    Vincent Cheembe says:

    Well just what i wanted to start my website adventure. Though my image slider isn’t working.

  61. Joseph
    Joseph says:

    Hello Sir Drew nice video am having problems with the menu-icon is not coming up whenever i resize the page of my browser , i will appreciate if u can help me out thanks

Comments are closed.