Build a Responsive Search Bar in 30 Minutes | HTML & CSS

To arrange the icons and input field horizontally and responsively, Flexbox is introduced. A wrapper div with the class 'input-wrapper' is created around all elements. Applying 'display: flex' to this wrapper aligns its children horizontally. 'align-items: center' is used to vertically center the items.

The video introduces building and styling a search bar using HTML and CSS, focusing on input styling, search bars, and working with icons. The development environment used is Codepen.io for its rapid updating capabilities.

The search bar is broken down into four main components: an outer container, a magnifying glass icon, the text input field, and an 'x' icon. The instructor emphasizes building these individual elements first before styling.

An HTML 'input' tag with 'type="text"' and a 'placeholder' of 'Search' is created. Initial CSS styling is applied to increase the font size to 1.5 rems, explaining the concept of 'rem' units for responsive sizing.

The video explains how to add scalable vector graphics (SVG) icons from Font Awesome. It details importing the Font Awesome CSS file into the document's head (via Codepen settings) and then using 'fa fa-search' and 'fa fa-times' classes to display the search and close icons respectively.

To add space between the input field and the icons, margin is applied to the input. The use of 'margin: 0 0.5rem 0 0.5rem;' is demonstrated to add horizontal spacing efficiently, clarifying the difference between margin and padding.

To make the search bar take up the full width of its container and spread the elements, 'justify-content: space-between' is applied to the 'input-wrapper'. Additionally, setting the 'input' width to '100%' ensures it fills the available space, making the search bar fully responsive. The option to set a fixed width for the 'input-wrapper' is also discussed.

Unwanted default input styles like borders and outlines are removed using 'border: none' and 'outline: none'. The 'input-wrapper' is given a background color (an orange hex code) to create the perceived single container effect. The same background color is then applied to the input field to create a seamless look.

Padding of '0.5rem' is added to the 'input-wrapper' for internal spacing. 'border-radius: 0.5rem' is applied to give the search bar rounded corners. The font color for all elements within the 'input-wrapper' is changed to white. The placeholder text color is specifically targeted and changed using the '::placeholder' pseudo-class.

The final aesthetic touch is adding a box shadow to the 'input-wrapper' using the 'box-shadow' property. The tutorial explains the attributes of box-shadow: horizontal offset, vertical offset, blur radius, and color. A specific blur and offset are applied to create a distinct shadow effect, completing the visual design of the search bar.