How To Make A Search Bar Using HTML And CSS In 10 Just Minutes

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

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

50% 1

Learn How To Make A Search Bar Using HTML And CSS In 10 Just Minutes Step by step tutorials for beginners
In this video we will create a search bar where you can see the Blur Effect in the search field. When we write anything in the search bar and click on the search icon. It will open the google search result. We will make this search bar using HTML And CSS only in just 10 minutes
For Domain and web hosting
Visit Bluehost: bluehost.sjv.i...
Bluehost tutorial:
• How To Make A WordPres...
-----------------------------------
Download images used in this tutorial:
drive.google.c...
-------------------------------------
Recommended Videos:
Learn Complete HTML and CSS from basics:
► • HTML And CSS Tutorial ...
Make A Complete Website for college using HTML & CSS:
► • How To Make A College ...
How to make a Business website step by step:
► • How To Make Website Us...
How to make personal resume website step by step:
► • How To Make A Website ...
How to make an Ecommerce Website Design:
► • How To Make eCommerce ...
How to make travel website design with HTML CSS Bootstrap:
► • How To Make A Website ...
-------------------------------------
◼️ 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
-------------------------------------
Like - Follow & Subscribe us:
◼️ RU-vid: goo.gl/tTFmPb
◼️ Facebook: goo.gl/qv7tEQ
◼️ Twitter: / itsavinashkr
◼️ Instagram: / iamavinashkr

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

29 сен 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@fluenscene Год назад

how do you have the search bar search through a particular file or library rather than a general web search?

@Kodiebeatz_OfficialBeatChannel 8 месяцев назад

You'll create tag link for it

@chigozieobialor1245 13 дней назад

You can do that using JavaScript or other programming languages like php, node.js etc

@naymurrahman8993 Год назад

amazing video tutorial really help me thank you so much......

@ahmeduogg6781 9 месяцев назад

Thank you so much for this Amazing tutorial Gracias ❤

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

That is very good video , you are better creator 👍👍👍

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

Thank you so much 😀

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

Very nice sir plzz make the same video for navigation bar 👍

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

I'm a Fan of your easy tutorial. Keep it up

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

Thanks a lot!

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

When we search , it only opens google but not searched page sir Howto overcome from that

@rayberjany7064 Год назад

Hi, It was pleasant to follow you as usual, though I'm having a little trouble changing the background of my search icon. I really don't know why this isn't producing the same results as in your video?

@tranzok538 Год назад

exactly

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

Sir really super 👍

@rijonkhan6059 Год назад

Wonderful video

@GreatStackDev Год назад

Many thanks Rijon

@eraykabalak4275 Год назад

Thanks!

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

Great Job! When I tried to change the value of the Name attribute from "q" to anything else, it did not work! Hopefully, you have the time to tell me why.

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

I noticed that too

@Rickmonas90 Год назад

because after "search?" in the URL there's "q=" where q is the name attribute

@devakvashisht 11 месяцев назад

Thanks bro

@giorgimindiashvili3810 Год назад

thank u so much bro

@Arundevvb1 Год назад

Thank you😇

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

Excellent

@Shaurya513 Год назад

thank you for this i needed it very much!

@gayathri-8-i6s Год назад

is this responsive?

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

love from pakistan ❤❤❤❤❤❤❤

@محمدصدراعباسنژاد 2 года назад

the besssst

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

last get methode not working when i am searching anything then i type in search section and after clicking sarch button it just open google search page....not showing the result

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

Hi do you have courses for beginners?

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

Here it is: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-GAZVvpjxYQY.html

@AnilSaini-yw7mp 2 года назад

@@GreatStackDev sir G aap ky number mil skty h kya

@AnilSaini-yw7mp 2 года назад

Where

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

Hi bro Plz upload python video using this html,Css,PHP and SQL explanation methods.

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

Pls how do make a search button where by when clicked the searched result will be displayed on another page with only the searched item or letter appearing

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

Sir, Can you please do a video to make website for Game developer?

@freemanproductions555 Год назад

Hi I try to make some of the website but the image is showing up. If you have free time can you walk me through? new to coding and will appreciate your help. we can setup a zoom.

@Okkkkk11-p7q 11 месяцев назад

can give full codding...

@johnathannel7885 6 месяцев назад

Hilarious how they forget to check the grammar on the video title before posting (10 Just Minutes) (Just 10 Minutes)

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

Hii bro....i made search bar from this video but whenever I try to search something...it saying that Google is refused to connect....how can I resolve this

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

Connect to the internet and then search

@tonytodd7011 7 месяцев назад

No search history?

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

Hi bro can you make a search engine website like google ?

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

that would take months even years to collect the information

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

How can u find this images pls tell

@RajPal-i2w Год назад

Pls give source code

@BengaliwithIsha 3 месяца назад

hello sir your microshoft hash bin scamed.

@GreatStackDev 3 месяца назад

What does it mean?

@winzxp Год назад

bro leaked his ip 💀

@MrMaytang Год назад

what are u going to do about it

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

pls help

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

why you had not given the images link in description?

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

Just added the link in the description, Please check

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

@@GreatStackDev Thanks

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

And can you please bring tutorial on RU-vid channel website

@mow-khaliifa995 2 года назад

Thank you🥰

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

I also used this action and method but it is only sending me to Google box.

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

Please bring tutorial on RU-vid channel website

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

how could i make the search bar search for words in my website? so for example, if I have the word safety on my page how could I make the search bar redirect to the page with that word when they search it?

@S-Lomar Год назад

😍😍🤩🤩🤩🥰🥰🥰🤩🤩😍😍😍😍🤩🤩🤩🤩🥰🥰🥰🥰🤩🤩😍😍😍😍😍🤩🤩🤩🤩

@topcomments107 Год назад

Bro I'm very happy 😊 I'm seeing your codes that is amazing 😍 very easy steps.....God bless you Bro.....

@gigadesign5624 8 месяцев назад

very imazing tutorial for begginers and hope that you will gives very god tutorial for beigganers. 😘😘❣❣❣

@Mst.Sakiyakaosar-mu9nh 6 месяцев назад

you used google for searching but I want to show any file they search from my own website. then what will I do? suppose i have made a website for listening songs. if anyone search a song, i want to show the song from my own website, not from google search. then what will i do

@florencemuganda6005 25 дней назад

Hello , awesome tutorial. Unfornately when I click on the search button it only takes me to google but does not include my search tterms.

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

You didn't explain the concepts that you were using, for me as a beginner, you I rewatched the video 9 times, but still didn't get anyshit that you were typing

@Unknown_harrison_with_dj9 Месяц назад

bro its not working in 2024

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

Please make Google related search engine create tutorial upload 🙏🙏🙏🙏🙏🙏🙏🙏🙏

@Techyou-zp5qj Год назад

How can i make it work when some one search foe an exercise the search results giv them the exercise videos please

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

You're video is intresting unique and different so If you make tutorial video of html css js youmake we more happy

@Foxey777 2 месяца назад

Most of the people who is watching this video is rookies/begginers and it includes me too lemme know if anyone wanna create a group or discord

@ProsperTulambe-lh8ju Месяц назад

Let's create it

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

You can also use live server extension to preview you html code, no need to go to manager

@emmanuelopoku-ameyaw2268 2 года назад

Yo got it bro!! That's what I use to preview my code.

@eugotavias9967 2 месяца назад

God bless you sir, thank's for this job.

@MovieStudio2.05 2 года назад

Thx bro 💓 සුපිරි ලන්කාවේ කවුද ඉන්නෙ මේකේ 💭💭

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

🇱🇰🇱🇰

@putrawahyudi5307 Год назад

sorry, what the function of sir, thank you❤

@sonubarot7821 6 месяцев назад

Sir I am a beginner and notepad++ me same code likha lekin bg image hi nahi aa rahi please reply 😢

@GreatStackDev 6 месяцев назад

please check this video for most common error with background image: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-XOuGqClpnCk.html

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

Sir,,,please help me. I have just a bank account. No payoner, paypal etc. But Questions If i send bank account name and account number, byer can send me doller in my bank account???

@bzybplrhealthandwellness2730 8 месяцев назад

First off, GREAT VIDEO!!! How can I tie my search engine results to only the content on my website/ on my app? Like keywords that link to keywords in my content? Thank you so much in advance!

@manas9994 Год назад

That is not working

@eduardo_nune3s Год назад

Me too sr

@unknowncoder12.59 Год назад

OH SIR TUM SIKHATE ACHHA HO but sir Jo bhi aap code kartain ho uska result direct dikhane ka aap to pura code karnain ke baad dikhate ho toh isse confusion sir hota hai

@Tradit_it Год назад

Can we link same search with more website like Google, Amazon, Flipkart etc . If anyone knows please reply.

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

when I enter the text from Google Chrome memory, it becomes white background in search text box. How can I fix it ?

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

I'm adding your search bar to mine and it's not behaving. lol I'm not using a container and I have more content on my page.

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

Amazing, thank you very much!

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

in your video how to make a RU-vid environment you do not write how one selects an icon in index.html and the associated html file opens in the top window of the video-play.html. I guess it will be an but I do not how to connect both, Only the video.mp4 opens. Thanks Dr. Costas Pappas

@billm.700 2 года назад

I copied your code exactly as shown in the video and it did not work. The problem was with the CSS. I change the CSS for Input to this and it worked: input[type=text] { width: 400px; height: 50px; padding: 12px 20px; box-sizing: border-box; border: 2px solid red; border-radius: 20px; font-size: 30px; background-color: aqua;

@Status_Lover9359 Год назад

Bro first learn css and html perfect! And for your kind information css is only use for designing!

@deepaksharma5831 Год назад

this page not go to direct site link

@mufidaja6696 Год назад

di tempat ku tataletak nya berantakan

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

mne yeh code as it as follow kjya but mera na background pic show horhi na style.css wala kam web arha css ko html se link b kya he as it as yahi code follow kya he pr kch nhn horha show

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

Sir action is not working when I am giving url of Google in action it doesn't work only Google page is open

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

Sir i am from Bangladesh.. in our country the membership option is not available 😟

@Melalewcodingwithmobile Год назад

How to download search bar

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

Hello sir. I want to join in your monthly subscription may i know sir if i can copy all your code if i join ?

@ZeroBlog Год назад

this is good but how to search website only and not google

@gangaghosh4726 Год назад

where is the source code

@StessloveTorres 6 месяцев назад

Wow, thank You so much! This video is so great for begginers like me! You are awesome! :)) Best regards from Varna, Bulgaria!

@adedamolaarasanyin1002 Год назад

I tried this and it just takes me to google without inputing the text i searched

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

Sir nowadays instagram search bar is showing like placeholder texts are sliding. So how to make that Search bar where we can slide our placeholder texts. Pls help?

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

If you share the file in the description that would help, thanks

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

Bro i have one doubt. What is that meta key word I don't know that can u tell me bro

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

Can you please make an updated HTML crash course.

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

Here it is: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-GAZVvpjxYQY.html

@allanabude5192 Год назад

can you show some more sample for search then display results of search in a listbox

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

can you do a fix on the backward search on a website like if type 'easy' it will be typed on the search bar like 'ysae'. Please thank you

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

good stuff. If I may ask though... Instead of a search icon image, can you use a font awesome search icon?

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

I tried it for myself it works. Thank you

@noobgamingxp489 Год назад

Use entities

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

Awesome bro 👌👌👌 super i found exactly wat i searched..thqqq so much

@-30h-work-week Год назад

Please add a tutorial on how to add a search bar on a simple HTML page where the search function will index the hidden text (that extra info pop-up when pressing a button). Thanks.