Create a Website With Video Background | HTML & CSS
Vložit
- čas přidán 29. 08. 2024
- 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
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
Np np, never stop to making great tutorials Brad.
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..
You are not only teaching us web development but also English grammar😂😂😂. Thank you very much👏👏👏
Hi Brad -: Please do a video of Drupal CMS
No probs
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 !
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?
@@kishoregowda5551 I also stuck at the same point...Waiting for their reply
@@manojkarthick5068 👍
@@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
@@aadityaghag8085 thanks
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
As a Tourism professional and a web dev student, this is gold for me.
A lot of thanks for the tutorial and the explanation.
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.
3:40am now, me trying to sleep. Then this video just came out of the oven,
me: okay later.
It’s not going anywhere, get back to sleep 😊
@@TraversyMedia 😂😂😂
HAHA luv that comment I feel that!!! Go Brad Go!
It's 1AM here in India..
And, I am Watching your video
This man has helped more than 100k people get job as well as helped more than a million students to pass tests.
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.....
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!
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.
ok you czcams.com/video/ecP8cEWKW5Q/video.html
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.
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!!!!
I learnt many things from this video rather than using a video background...☺♥
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.
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!
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
czcams.com/play/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-.html
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!
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
czcams.com/play/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-.html
I have been away from this for over 3 years and needed to remember what to do! Thanks Brad.
Dude I'm so glad that you have a voice I hate watching tutorials without a voice
That's a good little project there. Thanks Brad and Happy New Year Sir. 👍
Happy new year
@@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.
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...
I really appreciate your commonsensical none complicated approach to building these pages
This project looks FREAKING RAD! It's wonderful!! Keep up the marvelous work!!
Excellent video Brad - perfect to code along to, going back over HTML/CSS before cracking into JS next week and this is perfect.
How do you add additional information at the bottom?
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 CZcams land. THANK YOU AGAIN, Brad.
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! 😂 ❤️
Great Brad, looking forward for more interesting contents this year, one of the best channel for web Development. Shout-out from Tanzania
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
????
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.
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.
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 :)
hi, how can i do to make the menu not move to the side the rest of the page??
can you help me, how did you do to make the menu not move the video over? u would help me a lot
10,000 Hands up! The best video on this subject ever!
I am learning how to code and I second many people here when I say your stuff is outstanding. Thank you so much!
A nice tutorial to learn CSS technics like positioning elements, using video, and adding visual effects.
Good job Brad.
ok czcams.com/video/ecP8cEWKW5Q/video.html
Keep up the great work Brad! Thanks for sharing your Uber skills with us.
I always found that video background on websites look so cool!
Yeah, as someone else mentioned, there can be performance issues, but it does look damn cool and there are ways to optimize
@@TraversyMedia wow, can't believe you replied to me :D today was a good day :D
Hi I copied the code and put everyhing how it needs and menu doesnt work for some reasno its shows pointer cursor but when i click nothing happens pls can help me to fix this
You tutorials are the best on You Tube.Respect you bro
Happy New year traversy ♥️♥️♥️
Happy new year buddy
@@TraversyMedia 😀
Ty
@@programmingwithdipayan7280 :)
@@TraversyMedia yaa
A good project to begin the year with! Well done!
Shout out to you Brad. Used your instructions to help me build my best work so far. Much luv
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)
Your honestly the best youtuber to help me with coding. Thank you so much!
Thanks for this video. Greetings from Burundi (East Africa) 🇧🇮
This is good. Maybe I'll do something like this in the front-end. I'm just doing the API part.
I always find the front end to be more annoying
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.
Hey, to fix the clashing between editor "tab" space width and prettier space width for "tabs" you can just click on the button that says "Spaces: 4" on the bottom of VS Code to fix it in the settings walkthrough
ok czcams.com/video/ecP8cEWKW5Q/video.html
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
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..
Thank you for this tutorial 💕. Had tried several videos just tried yours once & it worked 🎉
Best tutorial, great work. I had some trouble with the menu showing up, but I probably missed something. Thank you.
I'm going to do this in React to practice my React skills. Make it a full site and maybe fullstack with a blog
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 😄
Mr. Brad you're such a great teacher. I just started watching your videos a few weeks ago and now I want to join your industry,but kind of confused because I don't know where to start from, kindly advice. Your videos are so inspiring and educative.
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
czcams.com/play/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-.html
The like to dislike ratio is just insane!
@Traversy Media you might want to consider properly aligning the logo first if you're gonna scam people like this.
normal people when they get stuck - *searches google*
Brad - toh toh toh
You motivate me a lot as an aspiring full stack dev
Thanks brad for this awesome tutorial (as always 😉) hope you are doing great ❤️
who else want a topic about how Brad started FREELANCING while having the ANTI-SOCIAL personality?
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
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.
Bro u have no idea but I have learned a lot of things from just one video of urs
good to see you back brad please make more videos like these it refreshes our minds.
Even though I am a react developer I still watch the css videos because they teach me a lot
First course in 2021 from travesery....good
:-0 excellent website building sir...i think you are the boss of website construction... ; -) : -)
Lets goo. Hopefully this year will be better than last year
Very educational Video. Im trying to self learn HTML and CSS coding. Extremely helful
*sees video title*
me: I don't like video backgrounds meh
*still checks the video*
me: Damn, this was awesome!
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 :)
This video cleared my doubts on css overlay and other properties. Thanks for sharing. 👍
i was thinking why i dont get notif from this channel...but then i realised i havent clicked on bell icon😝
Thanks ,with you programming is so easy,You are the best
Merry Christmas and Happy New Year!!! Thanx a lot for the video!
very nice, using videos on pages really make them stand out, especially such a beautiful one of the coast
Simple and Beautiful, Thank you Brad, you stand at the side of all inquisitive minds!
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
czcams.com/play/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-.html
Brad you are very generous !!!
Thank you Brad, for making things easier for us
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
Its wonderful and very well done .
Very impressive!!!!!!!
Its very useful for every developer.
It cleared many conceptions.
Thank you!!!!!
Nice content Brad. Now i want to ask you if you or someone of your guests can create tutorial or list of videos which show how to create full web app with go lang that have some functions like routhing, login and register users, upload images ect. I think it will be good because on youtube this sort of tutorials cant be find easy.
One of the best teacher out there ❤ Love you man
Thanks for this video, I'm new to web dev. this really helps a lot
Great video Brad.... Happy New year
this was uploaded on my birthday :D
life saving....easy and straight forward..brother..keep us the good work
You're just amazing Brad. Just exactly what I need in one of my projects. Thanks a lot, and a happy new year to you and your loved ones. Cheers!
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
czcams.com/play/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-.html
I learned so much from you . Best teacher ever
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
czcams.com/play/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-.html
mix-blend-mode: mind-blown !
@Traversy Media Nice try. I doubt that will work on a geek channel though.
Thanks a ton for this amazing tutorial, Understood each and every single thing you have explained here❤
Hooly Thanks for this lesson now i can improve my english and learn html css you are so good person sir i love you.
Thank you for the great tutorial! Are you enjoying Cyberpunk 2077?
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.
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...
Great video man and great voice, I really enjoyed watching and listening to you while making this site!
love this brad! Looks awesome. Im a bit confused on how I would continue to add content underneath this. I'm still trying to understand positioning. If the showcase is positioned Absolute, what would my next section have to be positioned as? Right now my content is behind the entire showcase area. Thanks in advance!
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
czcams.com/play/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-.html
It's also with JS :) the JS is inside the script tag within the HTML file...
good tutorial brad