Creating a Stylish Search Bar for Your Website: HTML & CSS Tutorial

Поделиться
HTML-код
  • Опубликовано: 2 окт 2023
  • In today's video I'll show you how to add this styled search bar to your websites or web projects using HTML & CSS.
    Google Material Symbols 👇
    fonts.google.com/icons
    🏫 My Udemy Courses - www.udemy.com/user/domenic-co...
    🎨 Download my VS Code theme - marketplace.visualstudio.com/...
    💜 Join my Discord Server - / discord
    🐦 Find me on Twitter - / dcodeyt
    💸 Support me on Patreon - / dcode
    📰 Follow me on DEV Community - dev.to/dcodeyt
    📹 Join this channel to get access to perks - / @dcode-software
    If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
    #dcode #webdesign #css

Комментарии • 25

  • @Sayvai
    @Sayvai 8 месяцев назад +5

    💡I think we need to leverage the power of modern and widely supported CSS flex "gap" and "grow" property rather than still relying on margins as spacers between flex child elements.

  • @josiahclarke8328
    @josiahclarke8328 2 дня назад

    Tysm i learned alot more than ever
    Plz keep making these easily digestible vids for us
    They're helpful as hell🤟

  • @beinyourguard
    @beinyourguard 8 месяцев назад +2

    very simple and nice. love it

  • @kobayashimauro
    @kobayashimauro 3 месяца назад

    It inspired me a lot, thank you!

  • @kyd1762
    @kyd1762 2 месяца назад

    It really helped me for my project work, thank you so much

  • @_____vieve
    @_____vieve 8 дней назад

    this helped me, thanks!

  • @serbanpascovici913
    @serbanpascovici913 4 месяца назад

    Thanks a lot!

  • @minecaftlichking
    @minecaftlichking 16 дней назад

    thank you this helped

  • @nokky070
    @nokky070 Месяц назад +2

    Hello. Can i ask how do you change the color of the x when typing into the search box. The color is blue and i dont know how to change it.

  • @aannjjoouu
    @aannjjoouu 5 месяцев назад

    thanks for this!!

  • @TheRandomGameOfficial
    @TheRandomGameOfficial Месяц назад

    But how do you get the input of the user? PS your vids are very cool!

  • @user-mc1xc6vt7n
    @user-mc1xc6vt7n 4 месяца назад +1

    can i switch the icon form left to the right if possible which part should I change?

    • @Jaspertje
      @Jaspertje 2 месяца назад

      Use float: right;

  • @user-mc1xc6vt7n
    @user-mc1xc6vt7n 4 месяца назад +1

    can i switch the icon from left to right If possible, which part should I change?

    • @hi-kj3eu
      @hi-kj3eu 3 месяца назад +1

      just put the code of the icon after the input, that should work

  • @VivekYadav-up7uu
    @VivekYadav-up7uu 8 месяцев назад

    nice

  • @hi-kj3eu
    @hi-kj3eu 3 месяца назад +3

    how do i make it so it uses google as a search engine

    • @Idk65789
      @Idk65789 Месяц назад +1

      Just make it so it takes you to the Google search link or embed it

    • @hi-kj3eu
      @hi-kj3eu Месяц назад +1

      @@Idk65789 ty

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

    Bro, why the same old thing over and over. Can we see something innovative or something that is full with a functioning search component? Search in RUclips and we get hundreds of the same thing. This is like teaching all dogs old tricks. I am so sorry to be open and frank. If we see more old stuff, my friends and me my friends may soon have to unsubscribe as we see really no value. I hope you understand. Thank you, bro.

    • @dcode-software
      @dcode-software  8 месяцев назад

      Yeah I understand, though it can be difficult to make existing subscribers happy as well create helpful content for those searching on RUclips. Appreciate you sticking around 🙂 I have some new content coming up soon (maybe React)

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

      @@dcode-software Tq bro for replying. I think even React is over done. So many people giving beginners course. What would be interesting is creating full functional components let it react or anything else.