Recreating the Windows Settings Page UI with Search – Pure HTML, CSS, and JavaScript

Inspired by the sleek UI of Windows, I built a mock Windows Settings Page using pure HTML, CSS, and JavaScript. The goal was to practice modular code separation and basic JavaScript logic like dynamic filtering.

This project simulates how the Windows settings interface works — allowing you to search for a setting and immediately see matching options.

Here’s how I did it 👇

🧱 Technologies Used

• HTML (Structure)


• CSS (Styling & Layout)


• JavaScript (Search Functionality)

⚙️ Features:

✅ Clean layout inspired by Windows 10


✅ Responsive cards for settings (Device, Network, Privacy, etc.)


✅ Functional search box


✅ JavaScript filters settings dynamically


✅ All settings reappear once the search input is cleared

💡 What I Learned:

• How to structure a project using separate files (HTML, CSS, JS)


• How to use JavaScript to dynamically show/hide elements based on input


• How important it is to organize image paths and project folders.

Window UI

I’m still improving this layout, and would love your feedback!


Let me know how I can improve the UX/UI or add more interactive elements.

Also thinking of making a dark/light toggle version soon! 💡