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: https://bluehost.sjv.io/e414GQ

Bluehost tutorial:
https://youtu.be/5z0i35_oXO8

———————————–
Download images used in this tutorial:
https://drive.google.com/file/d/1arOg7E5-JN7Q31EGIQpZ8_5uSaqRdhYv/view?usp=sharing

————————————-
Recommended Videos:

Learn Complete HTML and CSS from basics:
https://www.youtube.com/playlist?list=PLjwm_8O3suyO2gdXdWHKgM-mO2Y251zzU

Make A Complete Website for college using HTML & CSS:
https://www.youtube.com/playlist?list=PLjwm_8O3suyP5kGKmwS_DM0Hs1j7fshi5

How to make a Business website step by step:
https://www.youtube.com/watch?v=99vHH_6F0Ko

How to make personal resume website step by step:
https://www.youtube.com/watch?v=qCFN8EujbGI

How to make an Ecommerce Website Design:
https://www.youtube.com/playlist?list=PLjwm_8O3suyM_2Lo9aAIw3HqjOPor8j9g

How to make travel website design with HTML CSS Bootstrap:
https://www.youtube.com/watch?v=AiaEqc9UMf8

————————————-

◼️ 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:
https://www.youtube.com/channel/UCkjoHfkLEy7ZT4bA2myJ8xA/join

————————————-
Like – Follow & Subscribe us:

◼️ YouTube: https://goo.gl/tTFmPb
◼️ Facebook: https://goo.gl/qv7tEQ
◼️ Twitter: https://twitter.com/ItsAvinashKr
◼️ Instagram: https://instagram.com/iamavinashkr/

source

37 Comments

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

  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?

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

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

Leave A Reply

Please enter your comment!
Please enter your name here