How to Create a Responsive Product Landing Page | HTML, CSS and jQuery Tutorial 2019

Very very very very poor support – I haver reseller account with host gator. I ask any support, they never reply, never take any issue, never fix my problem. these people. please guys dont take this

In this video I will be showing you how you can create responsive product landing page. I hope you enjoy this tutorial! Make sure to subscribe and to hit the bell icon so that you get a notification whenever I upload a new video.

Don’t forget to like, comment, and subscribe!
More from me:

Disclaimer: To save time, I rarely include css vendor prefixes for cross browser compatibility. If you plan to use this code please make sure that you use a prefixer.

Want to set up your own website?
Get affordable domain and web hosting service by HostGator (Affiliate link):

Save up to 60% off with coupon code:


Video tutorial on how to purchase a domain and hosting plan. Also, how to launch your website online:


Contact info:

landing page,full screen landing page,html landing page,landing page design,media queries,full screen landing page design,landing page tutorial,full screen landing page css,full screen landing page html,responsive landing page,responsive website,responsive design,responsive web design,html,css,html5,css3,web development tutorial,jquery,responsive web design tutorial,how to make a responsive website,how to create a landing page,landing pages

Coding with Julio

  • Coding with Julio
    Posted at 10:01h, 05 February

    I was so caught up with everything else that I did not notice that the 'Cart' icon was missing until after editing the video. The reason for that is because I typed in the wrong class name. It should be as follows <i class="fas fa-shopping-cart"></i>

  • Anonymous User
    Posted at 15:02h, 05 February

    Please, create vertical menu like this

  • Jose Villavice
    Posted at 16:34h, 05 February

    🎉 Thanks for new tutorial 🎉
    Please, can you do tutorial of 3D products or car presentation 🐘 with html5, css3 and jquery or canvas.

  • Turki Othman
    Posted at 18:19h, 05 February

    Very nice

  • Fernando Emmanuel Zamora Jaime
    Posted at 13:05h, 06 February

    nice tutorial, i will need to watch it quite a few times, write the code and try to understand the order of the css. Thank you!!

  • C O
    Posted at 19:55h, 07 February

    What a slice of a brain Julio. Keep doing it clean like this. Active learning this is! Expecting next part on this (the actual transaction). Got your response on that nav will try the suggestions. Thanks a lot.

  • Anais Urlichs
    Posted at 14:16h, 14 February

    Amazing! Thank you for the tutorial! Would be great if you could do more that are focused on JQuery 🙂

  • Adam Got
    Posted at 22:29h, 14 February

    And uhm <3 😀

  • abuhanif jowel
    Posted at 19:00h, 18 February

    send me code plz,

  • Евгений Бутков
    Posted at 05:21h, 20 February

    very impressive, very impressive!

  • paolinho
    Posted at 12:27h, 01 March

    great tutorial mate! I just want to ask how did you get the photo with no background? most of the photos on google have a background of white

  • VK Kapil
    Posted at 02:23h, 06 March

    Subscribed. Waiting for more tutorials from you. Great Work!!

  • Amed Ljkl
    Posted at 21:11h, 16 March

    where can i get the images?

  • Amed Ljkl
    Posted at 01:04h, 17 March

    i like your style for teaching
    how old are you?

  • Amed Ljkl
    Posted at 01:52h, 17 March

    what is the relation between letter-spacing : 3px and margin-right: -3px;?

  • Amed Ljkl
    Posted at 23:45h, 17 March

    what does screen mean(in media query)?

  • Colorblind Creative
    Posted at 18:42h, 22 March

    Great video but just a minor suggestion. It would be awesome if you could show the browser on the right side so that we can see the live updates happening. At least for me, it will help me see what is being changed with what code. It just that, that right side of your screen is being wasted with webstorm dark gray window. I see on some of your videos you do that but on some you do not. Just a suggestion. Great videos none the less. Thank you.

  • smooth nation
    Posted at 15:29h, 23 March

    hey man. drop source code pls

  • Pika chu
    Posted at 19:08h, 30 March

    best video to learn flexbox thank you so much 🙂

  • Autobele Paulino da Silva
    Posted at 15:24h, 31 March

    Can you make the images available for download?

  • sayed akbarali
    Posted at 12:06h, 05 April

    Nice Tutorial Boss Keep It up

  • Cheruiyot Collins
    Posted at 16:45h, 06 April

    Followed this tutorial and its great. I have one problem though. My css property for display none to ".fa-times" is not working unless i use the !important property. everything else is great . Nice tutorial

  • Satu Marwadi
    Posted at 09:40h, 25 April

    Kya Affiliate account link kar sakte he isme ?

  • wandering wanderer
    Posted at 02:46h, 08 May

    You deserve more subs. Maybe could consider submitting a tutorial to the free code camp YouTube channel for some extra exposure. Thanks a lot for the tutorial!

  • Ali Eliaçık
    Posted at 03:07h, 15 May

    Nice video but not for beginners. It's like reading a github code. Lastly I closed that sound and just typed what I saw. You did not explain anything. For example why z-index: 999, or why position: relative? If you share your whole code process with mistakes and solutions it would be better. I think you are reading code that before you clearly finished. Lastly the page is messing up when you reduce height of your browser. It is not good idea to give page's main content position absolute.

  • Yong Jun Jung
    Posted at 03:05h, 17 May

    Thank you Julio. This tutorial made me realize I can utilize position values to be more creative. One question on jQuery script. When I used "this" instead of ".overlay", the men-open class does not seem to go away (weird because it does on yours). When I just used ".overlay", it works fine. I wonder why…maybe jQuery updates >_<?

  • Mukund Madhav
    Posted at 17:25h, 22 May

    source code?

  • Orazberdi Saparov
    Posted at 10:58h, 25 May

    I really thank you for the tutorial, but your "and…umm" really messes with my head. I had to mute the video to finish.

  • Marang Ponto
    Posted at 06:32h, 04 June

    U are my fav tutor on youtube❤❤😊

  • michael castillo peña
    Posted at 02:30h, 06 June

    Espero con ancias el tutorial de la Tienda Ecommerce "CICO", porfavor , gracias…!!!!

  • Rendy Kurniawan
    Posted at 14:29h, 16 June

    Where to the source code sir ?

  • Musical crave
    Posted at 07:02h, 24 June

    Cool bro..great job

  • Miguel Gonzalez
    Posted at 00:16h, 02 July

    Teacher question! i am having a problem with the shoe image its all the way to the left next to the buttons, how do i move it to the right to the dark color tone?

  • Israel López
    Posted at 23:31h, 11 July

    Amazing tut, thanks Julio!!!

  • Kani G
    Posted at 19:20h, 28 July

    Great tutorial but a little confusing for me. I am unable to get the tone-2 color from to the width that you have while being in front of the png I am using. I have a slightly different picture than yours and I tried looking it up. Could it be because my picture has diff width and height than the one you used on kisspng? This is how it looks:

  • Mthuthuzeli Musa
    Posted at 20:21h, 31 July

    You should push the source code to github 😀

  • Sitikantha Muhuri
    Posted at 12:32h, 01 August

    In which operating system you are doing?