How To Make A Website With Sliding Text Using HTML And CSS Step By Step Tutorial
ฝัง
- เผยแพร่เมื่อ 15 ก.ย. 2024
- Learn How To Make A Website With Slider Text Using HTML And CSS Step By Step Tutorial
❤️ SUBSCRIBE: goo.gl/tTFmPb
❤️ Complete website Using HTML and CSS
✔️ 8 Complete website step by step
✔️ Source Code Download
✔️ 76 Lectures, 12 Hours Video
✔️ Course Completion certificate
👉 easytutorialsp...
-------------------------------------
In This video I will create a website with a Sliding Text and slider controller using HTML and CSS. As you can see on this webpage, we have one navigation bar with a logo, some menu, user's name and user image.Then we have this sidebar with some icons. Then we have some text and a button which is sliding when i click on this slider controller. You can see this slider indicator is also sliding when we go to another slide.
We will create this complete webpage with HTML, CSS and Simple JavaScript.
So before starting this video, Please HIT the like button and subscribe to my channel Easy Tutorials if you are new on my channel.
Download Images: drive.google.c...
------------------------------
Recommended Videos:
Learn Complete HTML and CSS from Beginning
► • Complete HTML & CSS Co...
Create Contact us page using HTML, CSS
► • How To Make A Contact ...
Make Website With SVG Animation using HTML & CSS
► • How To Make Website Us...
Create Range Selector on website using HTML and CSS
► • How To Make Range Slid...
Web Design with Flying Drone Effect using HTML, CSS and JS
► • Make Website With Anim...
-----------------------------
My recommended tools and tutorials
👉 easytutorialsp...
-------------------------------------
◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
Join Channel Membership:
► / @greatstackdev
-------------------------------------
Images Credit:
unsplash.com/
-------------------------------------
Like - Follow & Subscribe us:
◼️ TH-cam: goo.gl/tTFmPb
◼️ Facebook: goo.gl/qv7tEQ
◼️ Twitter: / itsavinashkr
◼️ Instagram: / iamavinashkr
![HIWWHEE | OHM [Official MV]](http://i.ytimg.com/vi/OJJLtTLqLag/mqdefault.jpg)
love these videos: to the point and well created. Keep up the great work!
Really helpful and clear, however if you could add the "responsive" part into it i would much more better, so that we could use it for the mob.
Thank you so much...
Short but packed with value..👍👍👏
u can be a good teacher in future
i've to say that your skill is just insane😎👍🏼👍🏼🔥🔥
Thanks for this awesome video and all your efforts!
Hello sir, your explanation and teaching skills are awesome and you do provide a lot of resources to practices the stuff, highly appreciated. Well done...
great tutorial please make more like this, i, love the wat to explain it in such a simple way...
Thanks! You Mr for this best video.
I hit the like button before you speak cos I know you come around with valuable content. see I wouldn't mind if you did private online tuition
video was very helpful
Plz sir can u create design like vertical 3 part, left, middle, right n if I scroll left part thn only left is moving if I scroll middle thn only middle one is moving. Plz can u do this 🙏🙏
i love this channel , i need subtitles because i dont speak english
It would really be appreciated if u could share logo description and also a complete full website that has dynamic functionality with some backend stuff...
u are doing great
Good for learning
Hi. Your videos are amazing. But, for the images, I think you should upload them in svg format if you can so people who want to use them can easily edit them to fit their brand. And they could easily customize it for RWD.
This tutorial covers most of CSS
Thank you.... can you please add media query for this video to fit into 340, 570, 800 viewports screens
Please guys, don’t follow these tutorials if you’re developing a website. You need to learn how to build with responsiveness in mind. Using position absolute to position a div is old school. Get with the times.
Couldn't agree more.
@MA_GaMeR Still, very unconventional way of teaching - that is what a tutorial is, right?
Awesome design 💛💛💛💛💛💛💛
This is great stuff
All of your webdesign skills amaze me
Thanks Taki Tachibana
@@GreatStackDev thank you for sharing man
I really love your work
keep it up ..Bro
now i can understand 20% after a couple of videos and explanation, before nothing
man you work very fast with no mistakes, very good presentetion
Lovely sir .Really helpful.
I love your videos. Simple clear explanations. Thank you.
But they are retarded. With 1 line of gsap a real developer does that. Learn the tools bro
bro i am so love your videos because eazy and usefull
Thank you so much 😀
@@GreatStackDev np 😀
Nice video
your video and ur presentation is nice bro. plz bro create a video on a matrimonial website
Very good simple thanx
Thanks indeed. You are the best!
Thank you very much, really help me this video!
Thanks teacher for the tutorial please complete all project from php and complete please please please please
super
Wow!
bro really amazing video loved it
active.style.transform = 'translate(0px)' explain this line bro
is it possible to use autoscroll or normal scrolling too? i like the vid but it's really inconvenient if it just works by clicking
What is the software you used?
which text editor do you use can you pls tell me
Excellent indeed !
Excellent 👌
thanks ..keep up !!
This is great. Thanks for sharing
Thanks guru ji
Bro if you explain the attributes and values simply...than it could be more easier to understand...as 99% of the viewer of this video are beginners .😔😔😔
But this isn't a html css tutorial, there's plenty on youtube if you don't know what the tags or elements are. This is a how to produce a similar looking site to upgrade your dev skills
@@PeachiiWubs I didn’t say that it is a tutorial......but It is a tutoril....and if he explain shortly than ot would be better for everyone....not everyone is Professional like u...so mind it.
@@HumayunKabir-mj1fx nah Cory is right, this isn't a basic tutorial at all... that last part (implementation of slider) was actually a JavaScript code
@@TheAksont exactly and he didn't even link it with a script tag in it's on js file. If it was a tutorial that wouldn't happen
Mention sources from where you get those cool backgrounds and images.
@@aryan_dixit he has mentioned in description
see in video description
drive.google.com/file/d/12tO_wmrp3YkwRDRwahv7SgXzmmaGc3Or/view
Awesome!
Nice man👍🌹
I like your video . But pc showing nice but mobile and tablet not show perfectly. And now i am using php wordpress theme .
Please create a tutorial of full 5-6 page travel website
Bhaiya web dev k fundamental clear karne k liye 2 month bohot h kya
Haan.
Thanks
Hello
Please the pixel and size of the logo should be what
Really Cool😍😍
Hello sir i want to make home appliances website ... How should i display the products on first webpage of website .. Plzz guide me sir.. 🙏 plzz make a video on it sir plzzzz 🙏🙏🙏🙏
I can help you with that. Is very easy.
@@Julio860JVL plzz guide me then or suggest me some videos related to it ok.. Plzz 🙏🙏
@@sarthakgautam_ ok thank u 🙏
@@priyankasonar5628 Welcome!
Please position example k sath samjhain
amazing 😲
Amazing
you shoud continue this website..
Amazing...
Please tell me if i use html css javascript jquery Book by John ducket will gives the same interactive web page?
best indian that i ever heard :)
Hi, i'm from Brazil
How do i apply autoplay in this slider? I try but doesn't work...Plsssss Help
Already subcribed
Hi sir can i used your some codes for my vlog😇😊
Bro why don't you embed your github account link so we get also the free source code for each and every project
Boss make ecomerace multi vendor website .thank you
is it possible to do one video about how to upload the css and html to make a live website. will be appreciated. I just started learning html and css and I have no idea after I am done with the css and html, how to make it go live
@@thais7667 thank you man
Hey, can anyone tell me why did user img appear at the end of navbar when it was imported? He literally only had to change its size and align it to the center.. He didn't have to adjust its position at all? When I add items usually they appear in the left side of the page at the beginning. Same happened for logo img, he only needed to change its size and position was already perfect? I'm missing something in regards to flexbox it seems, can anyone help me understand this? Also, why did a links (navbar ul li) appear on left half of the navbar since navbar was set to display: flex; and only element had flex-grow: 1, shouldn't it spread across whole navbar since there is only 1 flex item? It seems to be divided in 2 but there is only 1 flex item ().. And then user img appears on the end of navbar without flex: 1.. What am I missing guys?
I'm struggling with positioning items everything else is under control :D
Hey, try giving { margin-left: auto } to user element
@@shubhambhavsar23 thanks for replying, but I have completed the page following this tutorial. Only problem is that I do not fully understand it. Maybe I didn't write well enough, but still, thanks.
So good, TnQ brother , Love from Bangladesh
I tried to get inspiration for you code example and unfortunately, i think i can't use javascript with angular ...
Your videos are amazing 👍
Can you share the code?
instagram pe active nhi or na comment ka reply ye kya chutiya pa he source code ke lye membership kisi ni membership liya he kya
Sir can I sell flipkart products on my affiliate website???🤔🤔🤔🤔
Cool!
Bro why are you not Using vs code??
bro can u say me what editor are u using for code
plzz
I subscribed
He is using brackets😁.
@@sarthakgautam_ thanks bro
How can i get code plz
thx a lot this is amazing and very perfect
Sir can I get MEAN STACK project?
Bro please make PSD to HTML Video, Love From BD
how the user name and his photo go to right without any code ??
How to make this compatible to mobile
why not wor
k radius in visual studio why plz plz ans meeeee
Is it responsive
Is it mobile responsive?
What theme you use in brackets?
Dark mode
Ok thats good
How am I going to publish the website
Background image not adding to the webpage
If I want to do auto slide?
you have not written JavaScript in the video title but you are using it.
How to add menu button
Can you make a video to teach us how to make the navbar of HudaBeauty.com ?
Please share usefull image links
With out any buying domain How can we publish in internet?
github pages, read about it.
@@oskarpuchalski link pz
Translatex 25% for text kaise aya kyounki apne width 600px set ki hai
ye iska source kaha milega
You all should check Wizzy Alex Web development Channel
Please send me software source.
maybe it will be better if it working on scroll