You can use a UI framework to improve the user interface very quickly. Common UI frameworks are:
- [Bootstrap](getbootstrap.com)
- [Material Bootstrap](https://mdbootstrap.com/docs/standard/getting-started/installation/)
- [Materialize](https://materializecss.com/getting-started.html)
Load these from CDN by copying the relevant CSS link from the "getting started" page and pasting it the `<head>` tag of your index.html file and copying the relevant script link above any other JavaScript at the bottom of the `<body>` tag. (It's best practice to import JavaScript files at the end of the body to reduce page load time). Alternatively, there may be code for a full DOM from which you can start your project. You may also need a meta tag and link to fonts or icons, read the docs for whichever framework you choose.
The common workflow for using these frameworks is to navigate to the type of element you need, copying the code, and pasting it into your project before customizing it for your use case. If you need additional information, you can use the Inspector (F12) in your browser to see how they implemented their examples on the page.
These frameworks often rely on a grid system and set of pre-defined classes that you should familiarize yourself with.
Before selecting a framework, review the available components to make sure it has what you need and look at the styling of those elements to make sure you like how it looks.
> [!Tip]
> Check out the Materialize [autocomplete](https://materializecss.com/autocomplete.html) function as an affordance for easier search/select of options. You pass the list of options to the `data` property as an object with optional icon strings. You'll need to load those options on page load. See [this tutorial](https://www.youtube.com/watch?v=GhAmyLukD6o) for a walkthrough.