Responsive Website Design | With Background Video Slider - Travel Website - HTML CSS & Javascript

Подписаться 50 тыс.

Просмотров 359 тыс.

50% 1

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.

Опубликовано:

8 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 212

@swinginonthespiral8765 2 года назад

Simple and exactly as advertised from preview of first few seconds. Your tutorials are concise and fun too!

@JohnWayneZ 4 месяца назад

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

@TLTechbender Год назад

This is simple, beautiful and wonderful at the same time. Boss level stuff.

@hibaabdelkarim1246 2 года назад

I spent hours looking for ways to do this, thank you so much !

@hackerprime9722 2 года назад

This is very good. Much love from Jamaica!

@sylvanusjoseph1140 11 месяцев назад

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****

@TheCodingOdyssey 3 года назад

Great work! Keep the snow coming!

@CodingSnow 3 года назад

Thank you very much! Always! ❤

@tallissonsantos2521 Год назад

muito lindo, amei! já vou recriar a minha.

@aminebouzaid5971 Год назад

Your partition is simple and perfecto ♥️

@mrankex 11 месяцев назад

You're a legend, excellent tutorial, I only can say "wow".

@FacundoDomeLobo 2 месяца назад

Thank you! This video makes me happy!

@quantumworld854 Год назад

Thank you - great video and produced a great result

@gpalabgeorgia6200 2 года назад

Great job my friend. Super!!!

@t00ntv25 2 года назад

wow, I just learned so much from this video bless your soul

@pranavbakare8922 2 года назад

amazing creation man simple and beauty!!!!!!!!

@merunus8556 2 года назад

Awesome. I gained a lot of new information!

@heunsigjo7484 Год назад

Excellent Tutorial to create video background websites

@SenorKaii Год назад

I love you man! You just save me for my school project

@rajeevranjan5480 2 года назад

Just Perfect 😍😍😍 Amazing

@balramraika7763 10 месяцев назад

I was looking for exactly same thing. Thank you very much ❤

@MarceloGElias 2 года назад

Amazing! Thanks!

@marcosreis2582 Год назад

it's amazing, congratulations for to work, thank you so much for share.

@yakhyobekmamadaliyev6315 2 года назад

Thanks you brother. You did it great

@user-wb7ku7ht4u 7 месяцев назад

you're the best teacher for code. thank you.❤

@bishalsenhdri7655 3 года назад

Wow! 🔥 Beautiful, Awesome & Elegant.. 💫✨

@CodingSnow 3 года назад

Thank you! ❤️

@santiagozanetti7183 Месяц назад

bro this is cracy, it made my page so clean and modern. Thanks bro

@mosesfahmipratama5378 3 года назад

Wow amazing tutorial.. i hope you always stay in code while create website.. thank you man

@CodingSnow 3 года назад

Thank you!, I will

@christine5906 2 года назад

Wow this is awesome 💕👍

@atulgiri1567 3 года назад

Thank you so much sir for providing your experience and knowledge

@CodingSnow 3 года назад

It's my pleasure, you're most welcome!

@kevinhe8188 Год назад

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. ?

@JosiasAlves-wv3du 8 месяцев назад

rodou lindao mano, parabens

@tejaspawar7518 Год назад

Thanks bro, it helped a lot

@technoalvin4086 2 года назад

God bless you sir, I learnt something new today

@CodingSnow 2 года назад

Glad to hear that! God bless you!

@rafaelyahu 2 года назад

The best tutorial about header with video, thanks friend ...

@CodingSnow 2 года назад

You're most welcome! :)

@KVP-DV Год назад

Hello my friends how are you ? I am From uzbekistan . Your lessons the best

@seeker3686 3 года назад

Creative and perfect content...nice👏

@CodingSnow 3 года назад

Thank you..my friend! ❤

@gustavodorado7796 2 месяца назад

beatifull

@warriors000 Год назад

I'M JUST LEARNING HTML AND CSS, THIS IS THE BEST VIDEO I'VE EVER SEEN. THANKS :)

@messiahgiza8694 2 года назад

Thank you so much Sir

@pathmashanthasenanayaka3193 3 года назад

Really great job... ❤️❤️ thank you 👏👏

@CodingSnow 3 года назад

Thank you my friend! ❤

@veronikak513 Год назад

thanks! i was not able to do slide videos on my html!!! YOU HELPED

@ruchiray8557 2 года назад

Wow this is so cool

@alondrahernandez1794 8 месяцев назад

Muchisimas gracias!

@maheshraut8629 3 года назад

Your the best bro... Just epic🔥🔥🔥🔥

@CodingSnow 3 года назад

Thank you bro..❤️

@45-henilmaniya78 2 года назад

thank you sir your code is very helpfull

@3509 Год назад

Thank you very much sir, there is a lot to learn and gain experience from you.

@CodingSnow Год назад

You're most welcome!

@Mr.Zero.22 Год назад

Amazing

@marianobenitez9781 2 года назад

Thanks a lot

@user-tm1hk5mv2x 24 дня назад

muy bueno bro

@reymarkescalante4052 3 года назад

I will keep supporting you good content this video inspired me a lot to become a web dev

@CodingSnow 3 года назад

Thank you very much! So glad to hear that!

@vincentvargas9251 Год назад

thank you

@anneta1526 Год назад

amazing

@batoolzahara4529 6 месяцев назад

Nice sir 😮

@user-ft7ne3kb6c 3 года назад

Very Great 💕👍

@CodingSnow 3 года назад

Thank you! ❤️

@useraat 3 года назад

Nice work 👌🏻

@CodingSnow 3 года назад

Thanks man!

@eduardo0939 3 года назад

Awesome 👏

@CodingSnow 3 года назад

Thank you!

@bl1tz_x 2 года назад

the best

@destinogmg6071 25 дней назад

the content is amazing but music... i can't coding with this beautiful music, I use this music for sleeping hahaha... beautiful bro

@jhasminevillarante6700 5 месяцев назад

your video is really helpful with our project, it really helps us especially for a beginners in codinnggg. thanks a lot.

@CodingSnow 5 месяцев назад

You're most welcome ❤️

@hafidnurfirmansyah2839 2 года назад

Thank youu

@privateinvestigationenterp4403 2 года назад

You are a revolutionary. Thank you! #subscribed

@privateinvestigationenterp4403 2 года назад

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.

@CodingSnow 2 года назад

Thanks and welcome! ❤✌

@sankaranarayanan7847 3 года назад

Nice 🎉🎉

@CodingSnow 3 года назад

Thank you!

@messiahgiza8694 2 года назад

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.

@CreativeTutorialsWeb 3 года назад

Great Video 😊

@CodingSnow 3 года назад

Thank you my friend! 😊

@CreativeTutorialsWeb 3 года назад

@@CodingSnow No Problem

@jufriyadi8706 Год назад

Thanks a lot.... Ill be your follower that usually take my web reference from here.

@Dead1Kid 11 месяцев назад

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.

@lakshmipriya3687 Год назад

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?

@inikoriokeoghene9707 2 года назад

Perfect! anyway i could get already written codes for slider?

@Ssportcy 4 месяца назад

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.

@eduardorios5391 2 года назад

Hello, how can i use the navigation bar instead of slider navigation buttons? btw thank you for the videos :D

@topcoderfullstack 2 года назад

Could you show us the extension you use for the HTML tag ? It looks awesome.

@vice-108 Год назад

It's built-in in VSCode it's name is emmet

@mjs_hacker9591 Год назад

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.

@attract2000 2 года назад

Thank you!! i love it. Can I use RU-vid video instead of mp4?

@AhmedSaadHassan 2 года назад

i hop to show us how to use youtube video

@uodige1 Год назад

Hi, would you be able to make a complete website (movie on the hero, about us and gallery website)?

@joysarker9005 3 месяца назад

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

@haminjourykharaki-cz2tp 7 месяцев назад

Amazing .How can I get these videos of your project in pixels?

@edwardkenway7139 11 месяцев назад

5:35 Whenever I hover just over a single element all element becomes underlined, how can I fix that?

@AngelicaTuyay-od6uj Месяц назад

part 2 pleasee

@anshut-rex6522 3 года назад

🔥🔥🔥 Cray 🔥🔥🔥 ❤️❤️❤️Coding❤️❤️❤️

@CodingSnow 3 года назад

❤❤❤

@anshut-rex6522 3 года назад

@@CodingSnow Can u make a gameing website 🔥🔥

@CodingSnow 3 года назад

@@anshut-rex6522 Sure in future uploads!

@anshut-rex6522 3 года назад

@@CodingSnow Thanks ❤️❤️ Where u live Iam from india Lots of love (lol) from india

@CodingSnow 3 года назад

@@anshut-rex6522 You're welcome! ❤ I love Indian culture. Currently, I live in Australia, I'm a Srilankan your Neighbour.

@ernstine Месяц назад

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

@vproger 3 года назад

👍👍👍👍👍🔥🔥🔥🔥

@GazariZakaria Год назад

I don't understand how the menu-btn was clickable if it's just a div and the background was just a png nothing more and if y put the background in the css and link it to the menu.png it doesn't appear. I don't understand why I'm using vs code and chrome to visualise the website

@Mezereonsantos 2 года назад

I am curious. Can I use all your code for my own purpose if I become a patron of your site "coding snow"?

@radobosstv 2 года назад

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 ?

@green_dot7886 Год назад

let i = 0; const interval = setInterval(function() { sliderNav(i); if(i

@kelvinmillanmillan5986 Год назад

Where do I put it? Exactly??76

@gabrieldefaria1489 Год назад

@@green_dot7886 thank you!

@CodeFull45 Год назад

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 ?

@codequillbaba 2 года назад

Can we make auto slider when bg video r complete ??

@user-ej9bi5zr1f 4 месяца назад

where do I find the menu button?

@ibrahimturk5149 11 месяцев назад

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.

@sarveshbijwe04 10 месяцев назад

Can you share the code

@Alpha_Precious 2 месяца назад

Hello. Please I need your help

@Alpha_Precious 2 месяца назад

Can you share how you fixed your problem

@Paul-oz5se 2 года назад

This is awesome project. Can you show us how to do this in ReactJS or NextJS?Thank you so much

@kit4520 8 месяцев назад

Very good video! how to make it so the sliders automatically go to the next one after a few seconds?

@hamidshawi3982 Год назад

Could someone help me with the menu navigation button. It doesn’t show active and it doesn’t work either when i click on it..

@mustafayurtalan1807 7 месяцев назад

can you solve the problem

@hoanghiem8461 2 года назад

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?

@mohammedriyaz8582 Год назад

you need link font awesome cdn top of it

@Fwsr. Год назад

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?

@user-yg2uy8bc8q Год назад

Yes, you have to use JavaScript to write a function for that,

@jonathanel-aziz7708 7 месяцев назад

If I want the video scrolling be automatic, instead of manual, can I set "auto" on the js?

@asbone9930 6 месяцев назад

Can you fix that?

@thejayvin2609 2 года назад

Hello sir aapne first me href link kinsi di hai

@CodingSnow 2 года назад

Hello there! Can you ask it in English?

@user-sz4mr5fu6h Год назад

how do you do the script externally TvT i need help

@TOXIC-ty9si 6 месяцев назад

HOW DO I ADD A NEW PAGE ON THE HOME ETC. HYPERLINKS

@user-jp7ol1yy6c 6 месяцев назад

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?

@Prathvi.sharma1122 Год назад

i'm facing a problem in js named document is not defined can anyone help me please

@johnnygalder 3 года назад

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!

@CodingSnow 3 года назад

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.