Responsive Website Design | With Background Video Slider - Travel Website - HTML CSS & Javascript
HTML-код
- Опубликовано: 16 май 2024
- In this video, you will learn how to design a responsive travel website design with a background video slider using HTML, CSS, and Javascript.
+ Like and Subscribe 🔔 for More! ❤
∎ Get This Project Source Codes - www.buymeacoffee.com/codingsn...
📚 Chapters
------------------------
0:00 - Intro
2:15 - Files
2:25 - Header
5:46 - Home Section
11:13 - Responsive Media queries
13:16 - Responsive Navigation Menu (With Menu Button)
18:46 - Background Video Slider
30:50 - Outro
Book Me 🔖
-----------------------
∎ Book me to Fix your project Bugs & Issues - www.buymeacoffee.com/codingsn...
∎ Book me to Convert your Figma, PSD, and XD Design to an HTML Website - www.buymeacoffee.com/codingsn...
∎ Source Codes & Videos Links - codingsnow.com
∎ Download All Source Files On Patreon - / 50061060
∎ Facebook Page - / codingsnow
∎ Instagram - / coding.snow
∎ Support From Paypal - paypal.me/codingsnowget
Support My Works ❤️❄️
--------------------------------------------
∎ Buymeacoffee - www.buymeacoffee.com/codingsnow
∎ Patreon - / codingsnow
🔗External Sources
------------------------------------
∎ Videos From - pexels.com
#CodingSnow #WebDesign #Website
____________________
Copyright Disclaimer under section 107 of the Copyright Act of 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, education, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing.
I spent hours looking for ways to do this, thank you so much !
This is simple, beautiful and wonderful at the same time.
Boss level stuff.
You are absolutely amazing. Thank you for another great video. I am learning JavaScript and it is proving difficult but your videos are a great source of help.
****THANK YOU****
Simple and exactly as advertised from preview of first few seconds. Your tutorials are concise and fun too!
Can this land me a job as a simple web developer? I don't know how much shit i need to learn to be a basic front end worker lol
muito lindo, amei!
já vou recriar a minha.
wow, I just learned so much from this video bless your soul
Your partition is simple and perfecto ♥️
You're a legend, excellent tutorial, I only can say "wow".
I love you man! You just save me for my school project
I was looking for exactly same thing. Thank you very much ❤
This is very good. Much love from Jamaica!
Very beatiful job, thanks so much.
May I know which tool you used to compress the video from pexel ? and which format and bit rate or other compression configuration you applied. ?
I'M JUST LEARNING HTML AND CSS, THIS IS THE BEST VIDEO I'VE EVER SEEN. THANKS :)
you're the best teacher for code. thank you.❤
Thank you - great video and produced a great result
Just Perfect 😍😍😍
Amazing
it's amazing, congratulations for to work, thank you so much for share.
Awesome. I gained a lot of new information!
Thanks you brother. You did it great
Great work! Keep the snow coming!
Thank you very much! Always! ❤
Thank you! This video makes me happy!
Great job my friend. Super!!!
Thank you so much sir for providing your experience and knowledge
It's my pleasure, you're most welcome!
bro this is cracy, it made my page so clean and modern. Thanks bro
amazing creation man simple and beauty!!!!!!!!
thanks! i was not able to do slide videos on my html!!! YOU HELPED
Wow! 🔥
Beautiful, Awesome & Elegant.. 💫✨
Thank you! ❤️
Thanks bro, it helped a lot
Wow amazing tutorial.. i hope you always stay in code while create website.. thank you man
Thank you!, I will
Excellent Tutorial to create video background websites
God bless you sir, I learnt something new today
Glad to hear that! God bless you!
Wow this is awesome 💕👍
I have completed the whole session. Fruitful Result Sir. Why not you add on session to add transition pages with this? will be a complete handson module Sir.
Amazing! Thanks!
rodou lindao mano, parabens
Thank you so much Sir
thank you sir your code is very helpfull
Your the best bro...
Just epic🔥🔥🔥🔥
Thank you bro..❤️
Thank you very much sir, there is a lot to learn and gain experience from you.
You're most welcome!
The best tutorial about header with video, thanks friend ...
You're most welcome! :)
Hello my friends how are you ? I am From uzbekistan . Your lessons the best
Muchisimas gracias!
Really great job... ❤️❤️ thank you 👏👏
Thank you my friend! ❤
I will keep supporting you good content this video inspired me a lot to become a web dev
Thank you very much! So glad to hear that!
Wow this is so cool
Amazing
thank you
You Got A New Subscriber Sir.
Damn !😭😭 The Website Looks Cool ..
sir one question ! How you mastered this all ?
i been doing this since a month but i got nothing .. plz tell me how you mastered this frontend skills sir ?
Creative and perfect content...nice👏
Thank you..my friend! ❤
Thanks a lot
your video is really helpful with our project, it really helps us especially for a beginners in codinnggg.
thanks a lot.
You're most welcome ❤️
Perfect! anyway i could get already written codes for slider?
the best
amazing
beatifull
You are a revolutionary. Thank you! #subscribed
I do have a question: Does anyone know how to continue making the video autoplay while removing mute? I'd like the video to autoplay with volume.
Thanks and welcome! ❤✌
Very good video! how to make it so the sliders automatically go to the next one after a few seconds?
Thank youu
Nice sir 😮
This is awesome project. Can you show us how to do this in ReactJS or NextJS?Thank you so much
the content is amazing but music... i can't coding with this beautiful music, I use this music for sleeping hahaha... beautiful bro
Nice work 👌🏻
Thanks man!
👍👍👍👍👍🔥🔥🔥🔥
Hello, how can i use the navigation bar instead of slider navigation buttons? btw thank you for the videos :D
muy bueno bro
Thank you!! i love it. Can I use RUclips video instead of mp4?
i hop to show us how to use youtube video
Awesome 👏
Thank you!
Could you show us the extension you use for the HTML tag ? It looks awesome.
It's built-in in VSCode it's name is emmet
Thanks a lot.... Ill be your follower that usually take my web reference from here.
Amazing .How can I get these videos of your project in pixels?
This is very helpful tutorial sir....thank you much for making this tutorial video..and sir if I want to autoplay video slider so what code I have to add ?
let i = 0;
const interval = setInterval(function() {
sliderNav(i);
if(i
Where do I put it? Exactly??76
@@green_dot7886 thank you!
Very Great 💕👍
Thank you! ❤️
I am curious. Can I use all your code for my own purpose if I become a patron of your site "coding snow"?
🔥🔥🔥 Cray 🔥🔥🔥
❤️❤️❤️Coding❤️❤️❤️
❤❤❤
@@CodingSnow
Can u make a gameing website 🔥🔥
@@anshut-rex6522 Sure in future uploads!
@@CodingSnow
Thanks ❤️❤️
Where u live Iam from india
Lots of love (lol) from india
@@anshut-rex6522 You're welcome! ❤ I love Indian culture.
Currently, I live in Australia, I'm a Srilankan your Neighbour.
can we change the this slider videos to any youtube videos , ?
Nice 🎉🎉
Thank you!
Great job as always! I wanna ask you something, I have read in many sites that is recommended (as a good practice) to design websites in mobile first but you prefer desktop first, why? Greetings!
Thank you very much! I prefer to focus on the desktop design first because the desktop version will include all of the required content. It's easy for me to better focus on the mobile version.
@@CodingSnow can you explain the btns[manual] bit
How to make it responsive on mobile devices? Also, thanks for the video
Great Video 😊
Thank you my friend! 😊
@@CodingSnow No Problem
Hi, would you be able to make a complete website (movie on the hero, about us and gallery website)?
Can we make auto slider when bg video r complete ??
Good morning.
The menu and close icons are not being displayed in the browser, when I do the responsiveness test, and I'm following the video step by step.
I was able to do the same with 2.30 hours of work. I got a total of 4 different errors and it took me 30 minutes to resolve one. Get a code that can be written in 2 hours at 0.5x speed and start coding. Thank you.
Can you share the code
Hello. Please I need your help
Can you share how you fixed your problem
Question, when I add the other videos, in the slide just show the last one, I checked the code, but still nothing! I'm stuck on that.
Hi sir my live server is showing error it's not showing the changes I don't know whether my codes shows error or not what should I do?
part 2 pleasee
where do I find the menu button?
Awesome but try to keepit more simply
hi. I adjusted the buttons, but there is no video transition, only the last video is shown. I couldn't set videos to buttons, how can I do it? I would be happy if you help.
is it possible to make the slides represent the "home, about" etc. and when u click on one of the nav links that u go to that slide?
Yes, you have to use JavaScript to write a function for that,
hello why is that when am trying to add the video using the same procedure it doesn'
t work from my end just appears a picture
Hi, Ive become a member but this isnt available?
If I want the video scrolling be automatic, instead of manual, can I set "auto" on the js?
Can you fix that?
HOW DO I ADD A NEW PAGE ON THE HOME ETC. HYPERLINKS
Same to same I am going with coding but most of the code is not showing can you tell me the reason why when I try to install media icon but it doesn't show I went to install video but it is not showing can you tell me what is the problem
5:35 Whenever I hover just over a single element all element becomes underlined, how can I fix that?
hello sir! excellent video, but I don't know why I can't see my bar png and close png show up! Can you please help me?
does anyone has same problem in the menu bar and brand name? they keep moving with the navigation items!
got the same problem. I dont know how what went wrong. The menu bar doesnt show eventhough I followed the step by step tutorial
Just like u create AUTO-PLAY IMAGE SLIDER plzzz do make AUTO-PLAY Video SLIDER do in this slider i know u can add some script so pllzzz done this.. Bro
how do you do the script externally TvT i need help
why can't I have the FB, Instagram, Twitter icon at 6:48 ? Do I have to import anything more than those 3 lines of code?
you need link font awesome cdn top of it