Building the Layout
Cloning Google's web page is not just about making the page look similar, it is also about arranging every element in the correct position. The search bar, logo, icons and buttons all depends on proper HTML structure and CSS styling. Simple tags like div, span, img and textarea plays a major role while creating the layout. Flexbox is useful to align elements properly and keep the spacing consistent. Small changes in padding, margin and width can completely change the final appearance of the page.
Positioning and Styling Elements
Some elements cannot be placed using normal layout alone. position: relative and position: absolute helps to overlap one element on another and place icons exactly where they are needed. SVG icons taken from Google's page may not appear directly because they use Google's own CSS variables, so replacing the fill value or styling it correctly is required. Image alignment, textarea styling and controlling the left spacing of elements also helps to match the original design more closely.
Debugging Small UI Issues
