From the course: Building Great Forms with HTML and CSS
Unlock the full course today
Join today to access over 24,400 courses taught by industry experts.
Build a growing search bar
From the course: Building Great Forms with HTML and CSS
Build a growing search bar
- [Instructor] We're going to be working on our Green Bird Exotic Plant Nursery website, and this time we're going to modify the search bar, and add a little bit of interactivity. Let me show you what we'll be creating. Here's what our new search is going to look like. So when you first view the page, the search item is just a button with a search icon. If I hover or click on this area, the search bar is going to expand out, and I will have the opportunity to type some sort of value in this field. If I want to continue my search, I can either click Enter or click the button. When I hover away or click away from this item, the search component is going to shrink down to its original size. This is a very interesting space-saving technique that you can use, and it also adds a little bit of fun interactivity to our website. So this is just another option that you might want to explore for your projects. Let's look at how we…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.