How To Make A Website With Sliding Text Using HTML And CSS Step By Step Tutorial

Подписаться 1 млн

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

50% 1

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
👉 easytutorialspro.com/go/course/
-------------------------------------
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.com/file/d/12tO_...
------------------------------
Recommended Videos:
Learn Complete HTML and CSS from Beginning
► • HTML And CSS Tutorial ...
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
👉 easytutorialspro.com/
-------------------------------------
◼️ 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:
◼️ RU-vid: goo.gl/tTFmPb
◼️ Facebook: goo.gl/qv7tEQ
◼️ Twitter: / itsavinashkr
◼️ Instagram: / iamavinashkr

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

13 сен 2020

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

love these videos: to the point and well created. Keep up the great work!

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

Short but packed with value..👍👍👏

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

Thanks for this awesome video and all your efforts!

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

Thanks! You Mr for this best video.

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

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

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

Thanks indeed. You are the best!

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

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

@that_it.1 2 года назад

u can be a good teacher in future i've to say that your skill is just insane😎👍🏼👍🏼🔥🔥

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

great tutorial please make more like this, i, love the wat to explain it in such a simple way...

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

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.

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

Thank you very much, really help me this video!

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

This is great. Thanks for sharing

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

Excellent indeed !

@planet-x4791 3 года назад

Lovely sir .Really helpful.

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

bro really amazing video loved it

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

i love this channel , i need subtitles because i dont speak english

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

I really love your work keep it up ..Bro

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

I love your videos. Simple clear explanations. Thank you.

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

But they are retarded. With 1 line of gsap a real developer does that. Learn the tools bro

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

Very good simple thanx

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

u are doing great

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

video was very helpful

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

thanks ..keep up !!

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

This is great stuff

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

Thanks guru ji

@soft-coding 3 года назад

Awesome design 💛💛💛💛💛💛💛

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

Excellent 👌

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

Amazing...

@7cn.i 3 года назад

amazing 😲

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

Really Cool😍😍

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

Nice man👍🌹

@PHALsothea. 3 года назад

Good for learning

@ravikumar-vc7jb 3 года назад

your video and ur presentation is nice bro. plz bro create a video on a matrimonial website

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

Nice video

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

Awesome!

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

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

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

Amazing

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

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

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

super

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

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

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

So good, TnQ brother , Love from Bangladesh

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

thx a lot this is amazing and very perfect

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

Thanks

@AsimKhan-qy5we 3 года назад

Already subcribed

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

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

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

Thanks teacher for the tutorial please complete all project from php and complete please please please please

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

Cool!

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

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

@Mr.JoydipBanerjee 3 года назад

Wow!

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

which text editor do you use can you pls tell me

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

All of your webdesign skills amaze me

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

Thanks Taki Tachibana

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

@@GreatStackDev thank you for sharing man

@n-world9351 3 года назад

Please tell me if i use html css javascript jquery Book by John ducket will gives the same interactive web page?

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

bro i am so love your videos because eazy and usefull

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

Thank you so much 😀

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

@@GreatStackDev np 😀

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

Bro please make PSD to HTML Video, Love From BD

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

What is the software you used?

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

Ok thats good

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

Please create a tutorial of full 5-6 page travel website

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

Please position example k sath samjhain

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

you shoud continue this website..

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

Boss make ecomerace multi vendor website .thank you

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

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

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

Hi sir can i used your some codes for my vlog😇😊

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

active.style.transform = 'translate(0px)' explain this line bro

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

Hello Please the pixel and size of the logo should be what

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

I tried to get inspiration for you code example and unfortunately, i think i can't use javascript with angular ...

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

Your videos are amazing 👍 Can you share the code?

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

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

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

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

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

@@thais7667 thank you man

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

why not wor k radius in visual studio why plz plz ans meeeee

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

Bhaiya web dev k fundamental clear karne k liye 2 month bohot h kya

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

Haan.

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

Sir can I sell flipkart products on my affiliate website???🤔🤔🤔🤔

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

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

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

Hey, try giving { margin-left: auto } to user element

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

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

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

What theme you use in brackets?

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

Dark mode

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

Is it mobile responsive?

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

If I want to do auto slide?

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

Translatex 25% for text kaise aya kyounki apne width 600px set ki hai

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

I like your video . But pc showing nice but mobile and tablet not show perfectly. And now i am using php wordpress theme .

@SalmanKhan-ow8hp 3 года назад

Bro why are you not Using vs code??

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

Mention sources from where you get those cool backgrounds and images.

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

@@aryan_dixit he has mentioned in description

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

see in video description

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

drive.google.com/file/d/12tO_wmrp3YkwRDRwahv7SgXzmmaGc3Or/view

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

Hi, i'm from Brazil How do i apply autoplay in this slider? I try but doesn't work...Plsssss Help

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

Can you make a video to teach us how to make the navbar of HudaBeauty.com ?

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

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

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

I can help you with that. Is very easy.

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

@@Julio860JVL plzz guide me then or suggest me some videos related to it ok.. Plzz 🙏🙏

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

@@sarthakgautam_ ok thank u 🙏

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

@@priyankasonar5628 Welcome!

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

How to make this compatible to mobile

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

bro can u say me what editor are u using for code plzz I subscribed

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

He is using brackets😁.

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

@@sarthakgautam_ thanks bro

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

Please share usefull image links

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

Bro why don't you embed your github account link so we get also the free source code for each and every project

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

How am I going to publish the website

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

how the user name and his photo go to right without any code ??

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

Is it responsive

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

Sir can I get MEAN STACK project?

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

Sir ap hight:100vh deten hen "vh" kia hota hai px ya % me hight deten hen na?

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

vertical height . pura page ko cover kar ly ge height

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

vh means viewport height.

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

maybe it will be better if it working on scroll

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

You all should check Wizzy Alex Web development Channel

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

you have not written JavaScript in the video title but you are using it.

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

How to add menu button

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

With out any buying domain How can we publish in internet?

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

github pages, read about it.

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

@@oskarpuchalski link pz

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

How can i get code plz

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

best indian that i ever heard :)

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

How can the slider be made to automatically move every 5s?

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

maybe using animation I guess. by declaring animation duration or delay I think.

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

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.

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

Couldn't agree more.

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

@MA_GaMeR Still, very unconventional way of teaching - that is what a tutorial is, right?

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

ye iska source kaha milega

@HumayunKabir-mj1fx 3 года назад

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

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

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

@HumayunKabir-mj1fx 3 года назад

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

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

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

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

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