Build A Landing Page using Bootstrap 5 - Full Tutorial
HTML-код
- Опубликовано: 13 июн 2024
- In this tutorial, we are going to learn how to make a minimalist landing page using Bootstrap.
☕ BuyMeACoffee: www.buymeacoffee.com/RaddyThe...
⭐ Article / GitHub / Downloads:
raddy.dev/blog/how-to-make-a-...
⭐Download UI File (Figma - Desktop Only)
raddythebrand.lemonsqueezy.co...
Chapters:
0:00:00 Introduction:
0:00:47 Bootstrap Setup
0:11:48 Bootstrap Header
0:23:42 Bootstrap DropDown Menu
0:43:19 Hero Section
1:06:07 Steps Sections
1:23:04 3 Columns Section
01:28:06 Footer
Credit:
Photo by Ante Samarzija on Unsplash
Photo by Ante Samarzija on Unsplash
Photo by Rizky Subagja on Unsplash
Photo by Amr Taha™ on Unsplash
Video by Mixkit - Free Video Assets from Pexels
Photo by Nathan Dumlao on Unsplash
Video by Nicky Pe from Pexels
Discounts:
⚡ Hostinger: www.hostg.xyz/aff_c?offer_id=...
⚡ Elementor: trk.elementor.com/26518
Recording Equipment:
◾ Microphone: amzn.to/3Ppp8Ok
◾ Shotgun Mic: amzn.to/3IVqIot
◾ Camera: amzn.to/3z0bxpF
◾ Lens: amzn.to/3Pw4s7d
◾ Lighting: amzn.to/3PGXvzW
Computer Gear:
◾ Keyboard: amzn.to/3PGXvzW
◾ Headphones: amzn.to/3PJl9fg
◾ Mouse: amzn.to/3z1TGPf
Connect with me:
◾ Website: www.raddy.dev
◾ Newsletter: www.raddy.co.uk/newsletter
#elementor
![PADDINGTON IN PERU - Official Trailer [4K] - Paddington Bear is back!](http://i.ytimg.com/vi/lKgitu25ZAg/mqdefault.jpg)
More Bootstrap tutorial please , You are genius
The best tutorial i've ever seen! Thank you so much
Wonderful , thank you Raddy 👌
Such a great video Raddy! I'm just at the beginning of the video but I'm getting to learn so much. Please do more of this. More power to you my man!
Thank you, Nikhil! I'll be making more for sure!
@@RaddyDev much love Raddy!
I found this channel randomly, you are awesome man! you explain everything so nicely. I recently caught sight of you where have you been all this time!!!!!!!
Thank, C3! Glad that you liked the explanation. Merry Christmas!
You're a great teacher!! Great content. Thank you!
I appreciate that!
Wonderful Tutorial, thank you Raddy
Thanks, Gopal. I appreciate your comment
Very informative, bravo... more of this plz! 👏
You got it!
Very usefull video. Thank´s bro!
Thanks, brother!
very good video! sometimes you go fast but thank god there is a pause button :D. Really liked the video! Keep up the good work!
I am glad that you like it, Hamza! I appreciate the feedback as well. I do need to go a little bit slower sometimes
Very well explained and so many bootstrap tricks i didnt knew. %100
Thanks, Juan! I am glad that you liked the video
Having a hard time learning it from school but you made it easier with your tutorials. Thank you so much! 🤗🤗🤗
I was the same at school. Maybe we are more of a visual / kinesthetic learners. I defiantly remember much more by doing
I didn't even think coding would be this fun. 😁Please keep up the good work! 👏
Does school teach you web designing in your country bro!
very useful and great tutorial, thank you for helping me create my first landing page !!
Glad it was helpful!
You can put the JS in the head right below the CSS, but it won't work right unless you add the 'defer' directive to the script tag. It lets you keep all your Bootstrap includes together at the top of the file while giving the same effect as putting the JS file at the bottom of the body.
Excelente clase me encantó aprendió un mundo muchas gracias
Gracias, me alegro que te haya gustado el video
Thank you 💞.. so beautiful video to learn and implement...☺️... & Your voice is so Soothing 😋😋😋
Thank you for the kind words, Anita. I appreciate it!
Good vedio 👍👍
Thank you!
Awesome video! Thank you! 🤗🤩🤩🤩 By the way, the second div under the steps section tag has a typo of "justify-content-md-CENETER", which I think gave you some trouble. Nonetheless, you did a great job fixing it by adding the media query manually. 👏👏👏
Thank you!
Nice
Thanks
Please post the code on how to change the predefine variavle like container, body bg-primary. U use root{
}
But i can i not see it clear , please i need some code, i want to implement it please
Please i need your whasapp number too
Olá eu sou do Brasil belo tutorial nível hard ❤
Obrigado!
for the menu to be on right cant we just use ms-auto for getting the same result?
I don't see it as being a problem
why you didn't use filter : darkness instead of making a div and give it a background for the video?
just curious as to the practice of naming classes with two__understrokes.
Is it so they are easier to notice ?
Initially I presumed it was a BS requirement, but then you used 'bi' for the scroll icon.
also, huge thankyou for the help - I feel like i've actually gotten better !!!
oh I use the BEM methodology. I think that it has become an instinct at this point. It has helped me enormously when working on big projects. It's a way of splitting CSS into Blocks, Elements and Modifiers (BEM) to create reusable components. And thank you, like people say - practice makes perfect.
I have a problem, my hero section goes on top of the of the header, any possibile fix?
You could position the header as absolute to the top and change the z-index. Try
When I first loaded the video it came up exactly as it does after i add the hero_video tag, so why the transforms etc?
Hey Dwayne, it won't be the same. The video won't be full width. Just in case you've missed it I've used two underscores "hero__video". Try it one more time and you will see that without the class name "hero__video" the video won't be full width
@@RaddyDev I can't believe you replied, thank you so much. I love bootstrap Nd I'm packing serious hours in but have so many questions. Is this the best way to get you or do you have discord ?
which vs theme are you using? :P
It should be Dracula, the free version
May I ask why a main.css and not a style.css? Is that just a personal choice?
Just a personal choice. You can name it whatever you like 🙂
@@RaddyDev Thank you, this has been such a help!
Can someone tell me why the transitions don't work in bootstrap
Which transitions is that?
can u put the code in a github file
It should be in the description
Where’s the code for this
Check in the video description
footer wont show
footer text wont turn white
Did you figure it out? Could be a typo. You could reference the code from github if you like
35 min to make a menu? tailwind is better
It does take some time, but that's not too bad considering I was talking. I feel that Bootstrap is pretty good for quick prototyping, especially when you get used to it.
Tailwind UI looks pretty cool. If you were building the same header with the dropdown menu, would you have to write the JS yourself or are there any snippets that come with Tailwind?
@@RaddyDev tailwing to make the design and some lines of code for the toggle with jquery maybe 15 min max.. but thankyou for your tutorial my friend