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

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:
◼️ TH-cam: goo.gl/tTFmPb
◼️ Facebook: goo.gl/qv7tEQ
◼️ Twitter: / itsavinashkr
◼️ Instagram: / iamavinashkr

[@eugotavias9967]

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

[@gigadesign5624]

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

[@fluenscene]

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

[@Kodiebeatz_OfficialBeatChannel]

You'll create tag link for it

[@topcomments107]

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

[@naymurrahman8993]

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

[@StessloveTorres]

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

[@ahmeduogg6781]

Thank you so much for this Amazing tutorial
Gracias
❤

[@yaminivijay4739]

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

[@emmanuelopoku-ameyaw2268]

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

[@saugatpaudel9446]

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

[@vismodeb]

Amazing, thank you very much!

[@opieststudent440]

Please bring tutorial on TH-cam channel website

[@toxicans7777]

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

[@ziadhodeeb9056]

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

[@GreatStackDev]

Thank you so much 😀

[@MovieStudio2.05]

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

[@gimhana_malith]

🇱🇰🇱🇰

[@itstechshow7747]

you illustrated with very simpley thank you ❤

[@gabegamez1018]

Thank you so much! Now I just need a logo

[@GlixedYouTube]

THANK YOU SO much!

[@sanskarverma4600]

hello bro i am sanskar verma you solved my issue

[@GreatStackDev]

Thanks sanskar for your comment

[@GOPI-et9wp]

thanks and did it

[@smartlivingwithmuneeb6449]

Advanced congratulations for 600k sir.

[@Melalewcodingwithmobile]

Good continue by this make another video

[@ThefakeLukaias]

Thanks man

[@clouds6762]

I was going to copy and paste, but I learnt a lot. Ahah, thanks!

[@Sk_Quotes04]

OOO🤭

[@AmericanCube]

really appreciate you !

[@GreatStackDev]

thank you!

[@putrawahyudi5307]

sorry, what the function of sir, thank you❤

[@BIO-SERVER]

thank you very much

[@whelve13]

thank you

[@opieststudent440]

why you had not given the images link in description?

[@GreatStackDev]

Just added the link in the description, Please check

[@opieststudent440]

@@GreatStackDev Thanks

[@opieststudent440]

And can you please bring tutorial on TH-cam channel website

[@AbhaySingh-vh1mu]

I always like your video it's too awesome

[@Mecal21]

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?

[@HarshMehra]

Thanku So Much 🥰

[@educationalpoint2017]

Thabk You sir..

[@gopalloharnew5948]

Amazing man

[@zeineldeinwaleed5572]

You are very rare now❤️

[@durgeshphulari222]

Thank you sir

[@rajdeoyadav273]

good easy tutorials

[@GreatStackDev]

Many many thanks

[@ParmodKumar-em6sh]

thanks bro it is working

[@karna5998]

Thanks for the video brother

[@giorgimindiashvili3810]

thank u so much bro

[@FGA-47]

Thanks for your help ❤❤❤❤

[@coderpro731]

Thanks this helps 👍

[@ameeamee3495]

Nice job❤

[@GreatStackDev]

Thanks 😄

[@Shaurya513]

thank you for this i needed it very much!

[@gayathridevip4632]

is this responsive?

[@ViLife16]

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

[@Arundevvb1]

Thank you😇

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

[@AyazKhan-ri9gq]

Zaber10 yaar

[@nazrinnasimiart]

Thank you

[@Jimil_soni]

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

[@Ahthaf]

Sir really super 👍

[@princemalongo9303]

You're great bro

[@eraykabalak4275]

Thanks!

[@martin_vnencak]

Thank you :D

[@onlineintermedia2671]

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

[@logoquotes3737]

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

[@GreatStackDev]

Thanks a lot!

[@SarvaRuchi]

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

[@ravijain1511]

Osm sir 👌👌

[@mow-khaliifa995]

Thank you🥰

[@emmanuelopoku-ameyaw2268]

Well done sir!

[@oliverkammel3237]

Very Good Tutorial

[@bzybplrhealthandwellness2730]

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!

[@eralak]

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

[@eralak]

I tried it for myself it works. Thank you

[@noobgamingxp489]

Use entities

[@hashemimdrafsanjani8447]

Excellent

[@2O7R1EOODOSubhaSree.P]

tq

[@Mst.Sakiyakaosar-mu9nh]

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

[@rijonkhan6059]

Wonderful video

[@GreatStackDev]

Many thanks Rijon

[@spslak7453]

The video is very useful for students of this subject

[@GreatStackDev]

Glad you think so!

[@gayathridevip4632]

is this resposive?

[@aneesdeveloper110]

love from pakistan
❤❤❤❤❤❤❤

[@Techyou-zp5qj]

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

[@bdmizan360]

Can't but thank you.😘🌱

[@ramalingamv1820]

Thanks to u bro

[@GreatStackDev]

You are welcome

[@maurov6861]

thanks

[@mdasadulasadul2448]

nice

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

[@itstechshow7747]

Amazing video thank you so much❤️

[@mmazatae]

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]

I noticed that too

[@Rickmonas90]

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

[@devakvashisht]

Thanks bro

[@sahenuredits6320]

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]

Hi do you have courses for beginners?

[@GreatStackDev]

Here it is: th-cam.com/video/GAZVvpjxYQY/w-d-xo.html

[@AnilSaini-yw7mp]

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

[@AnilSaini-yw7mp]

Where

[@inaxos9]

in your video how to make a TH-cam 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

[@mohdsokeen6760]

osm sir

[@Deus-lo-Vuilt]

Thanks video

[@GreatStackDev]

Welcome!

[@webcoding8333]

Osm

[@user-tz8ep4ux9h]

the besssst

[@mehdiamaadour]

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

[@Foxey777]

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

[@johnathannel7885]

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

[@billm.700]

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;

[@StatusLover9359]

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

[@LUCA_fan_made_Luca_B17]

bro its not working in 2024

[@musaronnie6649]

Can you please make an updated HTML crash course.

[@GreatStackDev]

Here it is: th-cam.com/video/GAZVvpjxYQY/w-d-xo.html

[@ilay288]

how did you create the container div so fast is it an extension?

[@allanabude5192]

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

[@fortune4826]

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

[@tinimeh5490]

I dont see a title on the preview, is it supposed to be there or not?

[@mikeharris1041]

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

[@tirimen3505]

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

[@ZeroBlog]

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

[@artsprojm]

You can make a videos also using javascript, and thx

[@pilotgaming4703]

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

[@romeocaptain9226]

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?

[@psadicodes]

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

[@mazesigma]

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