Create a Website With Video Background | HTML & CSS

Create a beautiful, custom landing page for a Travel website using HTML, CSS and a little JavaScript
Code:
codepen.io/bra...
Find a list of my latest Udemy courses at:
traversymedia.com
💖 Support The Channel!
/ traversymedia

[@TraversyMedia]

In the intro it says "never stop to exploring the world" sory about that. I know that makes no sense lol. The "to" is a mistake

[@MrYossell]

Np np, never stop to making great tutorials Brad.

[@samvaarvshrestha7810]

Happy new year... And please can you tell how to comple different scss file into a single css file. I am having trouble in there and I know you have showed it in one of your video but couldn't find exactly which one though.. Sorry for the trouble but could you please.... give us the solution??🙂😄 In VS code..

[@shokhrukhshomurodov9473]

You are not only teaching us web development but also English grammar😂😂😂. Thank you very much👏👏👏

[@donphelix5266]

Hi Brad -: Please do a video of Drupal CMS

[@williamoliver9743]

No probs

[@aadityaghag8085]

Going to tell my kids about you Brad, that this guy made your dad a good developer. What I am now is because of you Brad. I started my web development journey by watching your video of ACME WEB DESIGN Website design and now I am a Full Stack Developer. Thanks for everything Brad ❤️. Love you !

[@kishoregowda5551]

Bro can u guide me , I have started with html css js but after that what should I do whether to go nodejs or js framework like react which will be good for getting a job early?

[@manojkarthick5068]

@@kishoregowda5551 I also stuck at the same point...Waiting for their reply

[@kishoregowda5551]

@@manojkarthick5068 👍

[@aadityaghag8085]

@@kishoregowda5551 I think you should now learn -> React JS Framework, Bootstrap 5 and then later you can start with backend stuff like -> Node.js, Django, Rest Apis

[@kishoregowda5551]

@@aadityaghag8085 thanks

[@d.r1775]

As a Tourism professional and a web dev student, this is gold for me. A lot of thanks for the tutorial and the explanation.

[@mihirs2548]

This man has helped more than 100k people get job as well as helped more than a million students to pass tests.

[@jordancullen4135]

I'm starting my journey into SEO and wanted to build a strong foundation on how websites work and I've been using a lot of your videos to help me along my journey. thank you so much.

[@chloeperalta4776]

I followed the first 5 mins, then went to the link and downloaded the code source and looked for a video on PEXELS, and created the landing page in about 30 mins. This is awesome man thank you so much.....

[@alejandrocarvajal9068]

two years without listening to that intro. the quality of the content has increased so much since last time I was watching any of your videos, great contribution for the education of others.

[@a14n.s]

Me: Searches how to do something for my website, spends hours searching and testing but finally gets it done. Brad: Releases a good video on how to do it the next day

[@angrybadger6761]

I have been away from this for over 3 years and needed to remember what to do! Thanks Brad.

[@onuberonly7846]

I really appreciate your commonsensical none complicated approach to building these pages

[@Alphabet7]

Dude I'm so glad that you have a voice I hate watching tutorials without a voice

[@EverydayOrdeals]

Ok so, I've watched thousands of videos on development, never was I so impressed with the way you explained your progress, from code standards to optimization to the way you think abt a problem, I really learned a lot, Thanks!

[@programmer4047]

It's 1AM here in India.. And, I am Watching your video

[@virtualbrian]

The best part of Brad's videos is there is always some kind of CSS gold nugget. For me today, that was the transition property. Thanks so much!

[@الإسلامدينالحق-خ5ت]

My friends, search for your life purpose, why are we here?? I advise you to watch this series 👇 as a beginning to know the purpose of your existence in this life kzbin.info/aero/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-

[@sodiumsulfur2779]

I learnt many things from this video rather than using a video background...☺♥

[@rstorms5782]

I don't know if you'll ever read this, Brad, but I truly hope you do. You helped change my life from living out of my car to making six figures. I'm glad you took that break and took your health in priority. The real fans are always gonna follow you. Happy new year, dude.

[@jworld9]

What an amazing tutorial. Brad is showing us the power of HTML and CSS, and most importantly, that the tools that we use matter just to an extent.

[@lapluong928]

ok you kzbin.info/www/bejne/m5SzaZZ7jLCKa7M

[@jenglish1986]

The best teacher by far. Amazing clarity on every topic you present. Thank you so much for all of your excellent content here and on Udemy. Really well done!!!!

[@farflebfarfle]

Brad, you make great content and I really appreciate the high quality of all your videos on YT and Udemy. I'm a new web developer, in the middle of a six-month bootcamp, and I find your instruction to be very helpful to me for clarifying concepts that we only quickly touch on in class. You describe what you are doing really well. Thank you!

[@الإسلامدينالحق-خ5ت]

My friends, search for your life purpose, why are we here?? I advise you to watch this series 👇 as a beginning to know the purpose of your existence in this life kzbin.info/aero/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-

[@swing-o-gram]

this video finally made me understand the "position" attribute. If you ever wanted to make a follow-up to this video: 1. When clicking on one of the menu links, close menu again 2. Make it so the menu doesn't move the video over, but just overlays it Thanks for helping us beginners :)

[@federicodelvalle1227]

hi, how can i do to make the menu not move to the side the rest of the page??

[@federicodelvalle1227]

can you help me, how did you do to make the menu not move the video over? u would help me a lot

[@TheCodingOdyssey]

I always found that video background on websites look so cool!

[@TraversyMedia]

Yeah, as someone else mentioned, there can be performance issues, but it does look damn cool and there are ways to optimize

[@TheCodingOdyssey]

@@TraversyMedia wow, can't believe you replied to me :D today was a good day :D

[@RAZR_Channel]

U... FUCKI'N - ROCK!!! ... I've been looking for a CLEAN way of doing this for a while... and as soon as I hear your intro theme : I know I'm going to get a direct and solid answer to what I am looking for...

[@yashwantraghuwanshi982]

This is a great css video. Really loved it.... Learned so many things: 1. Positioning 2. How to add overlays 3. Video playback 4. Sliding menu's

[@destroyedtelephone4124]

????

[@MotM200]

This project looks FREAKING RAD! It's wonderful!! Keep up the marvelous work!!

[@gambomaster]

That's a good little project there. Thanks Brad and Happy New Year Sir. 👍

[@TraversyMedia]

Happy new year

[@presidoeokuguni9272]

@@TraversyMedia Hey Brad, thanks for sharing your wealth of knowledge. I realized that the video works fine on laptop and desktop but never displayed on mobile. To be sure if i was doing the right thing or not, decided to open the codepen for this project on mobile and changed it to full screen mode, it doesn't display the video but displays dark background. I am having the same problem. Any solution will be really appreciated, thanks again.

[@lewvardy1145]

You motivate me a lot as an aspiring full stack dev

[@asherintech]

Thank you Brad! Just gone into a new lockdown for the next 6 weeks here in the UK, this came at the best time and the dev community would be lost without you! 😂 ❤️

[@rachelmoore5255]

I am learning how to code and I second many people here when I say your stuff is outstanding. Thank you so much!

[@nathanielfinn7911]

Shout out to you Brad. Used your instructions to help me build my best work so far. Much luv

[@salzee]

Keep up the great work Brad! Thanks for sharing your Uber skills with us.

[@asadbekbozorov5714]

You tutorials are the best on You Tube.Respect you bro

[@davescorneroftheworld1147]

Yes, Brad, we all can hope 2021 will be better than in 2020. Another GREAT job I have followed along in VS Code and have learned a few tricks I did not know. My wish for you this year is much better health. You are an inspiration to me and I am sure to many others out there in KZbin land. THANK YOU AGAIN, Brad.

[@ibrahimkconteh]

at first, I thought this video is useless to me as I have seen series of videos before this but I turned out to be wrong there is always something valuable to learn from Brad Traversy thank you for the tutorial.

[@tibzdankan]

Tutorials on this channel have helped me learn a lot as a beginner programmer . Am requesting Mr. Brad to make a crash course on sockets

[@kiranfrancis7397]

First course in 2021 from travesery....good

[@SZOKE19940321]

very nice, using videos on pages really make them stand out, especially such a beautiful one of the coast

[@odhranmahony8658]

Excellent video Brad - perfect to code along to, going back over HTML/CSS before cracking into JS next week and this is perfect.

[@TheCodeAngle]

A good project to begin the year with! Well done!

[@DeeporbitAdventures]

10,000 Hands up! The best video on this subject ever!

[@lisarogers5873]

I am definitely checking out your Udemy courses. You are easy to follow along with and you show what your coding does. I also like the layout of your code because it is easy to go back and make changes because you can FIND IT! Some instructors do not lay out their code as well as you do. Thank you for providing this easy to follow content. I was mesmerized and stayed with you through the entire video.

[@pixelprogrammer6756]

Even though I am a react developer I still watch the css videos because they teach me a lot

[@fonncatalina6464]

3:40am now, me trying to sleep. Then this video just came out of the oven, me: okay later.

[@TraversyMedia]

It’s not going anywhere, get back to sleep 😊

[@imamalievumarbek5434]

@@TraversyMedia 😂😂😂

[@Allformyequine]

HAHA luv that comment I feel that!!! Go Brad Go!

[@patriotact3729]

Thanks for this video. Greetings from Burundi (East Africa) 🇧🇮

[@Kubaturi]

Your honestly the best youtuber to help me with coding. Thank you so much!

[@codingwithbasir]

A nice tutorial to learn CSS technics like positioning elements, using video, and adding visual effects. Good job Brad.

[@lapluong928]

ok kzbin.info/www/bejne/m5SzaZZ7jLCKa7M

[@tz2014]

Great Brad, looking forward for more interesting contents this year, one of the best channel for web Development. Shout-out from Tanzania

[@christian-schubert]

Aw, a chill coding session creating some small project with Brad - no bells, no whistles - these are my absolute all time favs! Happy New One Everyone

[@Firex64]

I have recently started to learn to code. My cousin, who is a programmer, recommended me your channel first. And you make this look so easy haha. Let's see how long it will take until I become as smooth as you (probably forever)

[@two-zero]

Thank you Brad, for making things easier for us

[@FilipeFreire]

mix-blend-mode... well that's new! Worth watching even if just for that bit! Keep up the amazing work on the channel, loving it so far 😄

[@historymobile6210]

Lets goo. Hopefully this year will be better than last year

[@AbhishekBM]

The like to dislike ratio is just insane!

[@AbhishekBM]

@Traversy Media you might want to consider properly aligning the logo first if you're gonna scam people like this.

[@sahajranipa]

good to see you back brad please make more videos like these it refreshes our minds.

[@damisaalex4137]

Happy New year traversy ♥️♥️♥️

[@TraversyMedia]

Happy new year buddy

[@programmingwithdipayan7280]

@@TraversyMedia 😀

[@Galaxy_World]

Ty

[@Galaxy_World]

@@programmingwithdipayan7280 :)

[@Galaxy_World]

@@TraversyMedia yaa

[@onkar10046]

Bro u have no idea but I have learned a lot of things from just one video of urs

[@fesko76]

Best tutorial, great work. I had some trouble with the menu showing up, but I probably missed something. Thank you.

[@hlayisanidiamond7300]

life saving....easy and straight forward..brother..keep us the good work

[@ethelchinedu7397]

Thank you for this tutorial 💕. Had tried several videos just tried yours once & it worked 🎉

[@ayaneshsarkar7804]

This is good. Maybe I'll do something like this in the front-end. I'm just doing the API part.

[@dannybee6473]

I always find the front end to be more annoying

[@DJxMaster2]

Great video man and great voice, I really enjoyed watching and listening to you while making this site!

[@andrewclarke6916]

I love this project and it's great for beginners. It also shows how adding a simple video clip to a web page can totally transform a landing page into something really beautiful.

[@kelvin_1m1]

Off-topic - Has anybody ever told you your voice sounds like Tomas Haake from Mershuggah (if you know such)!? Especially in earlier days, if you search "Meshuggah interview - Tomas Haake about Bleed" his interview. I was trying to focus on this video but was so blown away, feels literally like Tomas is tutoring this topic..

[@nicumirs253]

Thanks ,with you programming is so easy,You are the best

[@latikawagh926]

i was thinking why i dont get notif from this channel...but then i realised i havent clicked on bell icon😝

[@son_sowhat]

Very educational Video. Im trying to self learn HTML and CSS coding. Extremely helful

[@ЕвгенийОлейник-в1ь]

Merry Christmas and Happy New Year!!! Thanx a lot for the video!

[@Nits21386]

This video cleared my doubts on css overlay and other properties. Thanks for sharing. 👍

[@reloadscript2156]

:-0 excellent website building sir...i think you are the boss of website construction... ; -) : -)

[@manny9639]

Simple and Beautiful, Thank you Brad, you stand at the side of all inquisitive minds!

[@الإسلامدينالحق-خ5ت]

My friends, search for your life purpose, why are we here?? I advise you to watch this series 👇 as a beginning to know the purpose of your existence in this life kzbin.info/aero/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-

[@sylvanusjoseph1140]

Thank You . You are a great teacher. Thanks again for your kindness in sharing this unique information.

[@starmix7579]

this was uploaded on my birthday :D

[@seyilawal5871]

How do you add additional information at the bottom?

[@andywebber8749]

What was a great video especially with the Css explanations with the little tweaks ,and the Video back ground really sets the landing page off.. I am in the Philippines on lock down and that's going to do me well as a starting points to pass the time and stick a DB on it.

[@kittoeebenezer7067]

This is beautiful in all aspects. I have learned a lot of new things. Thank you sir

[@barshadpoudel6066]

One of the best teacher out there ❤ Love you man

[@johnjensen9522]

Brad, thank you for your videos. Your clear and concise tutorials have really helped me to finally get some of the results I was hoping for. Liked and subscribed.

[@hamzahouri8647]

this is the best channel in web development in the youtube, very powerful and helpful content, i learned a lot and i still learning from this chanel. can you expand the content and making courses about cyber Security

[@kevyyar]

I'm going to do this in React to practice my React skills. Make it a full site and maybe fullstack with a blog

[@bestwebsolution]

Just been following you all along, am thankful to God I came across your channel last year am now trying my best as a JavaScript Dev thanks very much, would love it if always recommend all to God in your video, he is has been Good in your life.

[@bamartist4437]

[@atunwaemmanuel9712]

Thanks for this video, I'm new to web dev. this really helps a lot

[@TravelTourTaste]

Hey bro great to see you again. Hope you had a great Christmas and just wanted to wish you a very Happy New year and may 2021 bring you much success.

[@old-codermj-channel]

Awesome design brother... watched it full

[@batica81]

mix-blend-mode: mind-blown !

[@batica81]

@Traversy Media Nice try. I doubt that will work on a geek channel though.

[@shokhrukhshomurodov9473]

Brad you are very generous !!!

[@julianmanuel5804]

Awesome design and great project to practice some css

[@robertolee4954]

good to see you again, i hope 2021 will be an excellent year for you and your family thanks for the lessons

[@piyush9555]

Hey Brad, this design looks brilliant but these days I'm looking at landing pages with more technical animations, you'll exactly understand if you look at those landing pages yourself. Some of these are GitHub, Stripe, Strapi, etc. They've moved on from designing landing pages the same old way like putting some text and images here and there to more technical design and animations. It would be very helpful if you make a clone or something like that. Btw Happy 2021 :)

[@cromuelbarut9859]

who else want a topic about how Brad started FREELANCING while having the ANTI-SOCIAL personality?

[@0xusman1]

Thanks brad for this awesome tutorial (as always 😉) hope you are doing great ❤️

[@malithsenanayakentgl-1052]

Happy new year Brad... Seems you have given us few pleasant surprises in this new year. Thank you for that. Like all the other videos of yours this is also Great...

[@tchalakeleleng6933]

Thank you for the explanation. It is very clear and important for me.

[@CodeWithTomi]

Great video Brad.... Happy New year

[@unchart_d]

Happy new year to you too Brad.

[@Endrit719]

that mix-blend-mode is so fucking cool

[@ismailvedia17]

Nice traversy ♥️ nice overlay on video 😍👌.

[@royanhilmy5446]

amazing tutorial .. easy to understand ..i learn a lot .. thankyou so much

[@jhmpeters]

Great video again Brad. I like this showcase video with hamburger menu project. Well done Brad! Many thanks.

[@mateuszz9063]

this video with blend mode looks amazing

[@freaxwoz2802]

Wow thats amazing video to start our year 2021 Traversy! wish you more blessing to come happy new year! your a great motivation to us thank you