Animated Expandable Search Bar with HTML & CSS Tutorial | Md Ali Reza posted on the topic | LinkedIn

1mo

Build an Animated Expandable Search Bar with HTML & CSS (No JavaScript) | Day 5/100 Projects In this tutorial, we build a modern animated expandable search bar using HTML and CSS only. This project is part of my 100 Days Web Development Challenge, where I create real frontend projects to improve my coding skills and help beginners learn HTML, CSS, and JavaScript through practical projects. In this video you will learn: • How to create an expandable search bar UI • CSS transitions and smooth animation effects • How the :focus-within selector works in CSS • Modern UI design using pure HTML and CSS This project is perfect for beginners who want to practice real frontend development projects and build a strong portfolio. 📁 Source Code: https://lnkd.in/gw3JzN5x Follow the full 100 Days Web Development Projects Playlist to learn step-by-step frontend development. 📅 Challenge Progress: Day 5 / 100 📢 Connect With Me GitHub: https://lnkd.in/g_ej-272 LinkedIn: https://lnkd.in/g6mqgEfv Facebook: https://lnkd.in/gdQGzdwn X {Twitter}: https://lnkd.in/gJSiMPf5 #100DaysOfCode #WebDevelopmentProjects #CSSAnimation #HTMLCSSButton #FrontendDevelopment #ExpandableSearchBoxCSS

Transcript

Hello everyone, welcome back to the channel. This is day five of my 100 days web development challenge where I build real projects using HTML, CSS and JavaScript to improve my front end development skills. In today's project, we are going to create a modern expandable search bar using only HTML and CSS. At first, the interface shows only a search icon button, but when the user clicks on the search bar, the input field smoothly expands, creating a clean and modern animation effect. This type of UI component is commonly used in navigation bars, landing pages, dashboards and modern web applications. And the best part is that we will build. Without using any JavaScript O, let's start building this project step by step. Before we start writing the code, let's quickly look at the final result of this project. Here you can see a small circular search button in the center of the page. When I click on the search icon, the search input field smoothly expands to the right side. This creates a modern and minimal user interface. This effect is created using a simple CSS focus selector and transition animation. Now let's see how we can build this step by step. 1st we start by creating the HTML structure of our project. We begin with the doctype declaration which tells the browser that we are using HTML5. Next we open the HTML tag and set the language to English. Inside the head section we add the meta charset tag to ensure proper character encoding. After that we add the viewport meta tag which helps our page display correctly on mobile devices. Then we set the title of the page which in this case is expandable search bar. Next, we link our external CSS file using the link tag. This file will contain all the styling for our project. After that we include the Font Awesome CDN link. This allows us to easily use icons, including the search icon for our search bar. Now let's move to the body section. Inside the body we create a container division with the class name search box. This container will hold the input field and the search button. Inside this container we add an input element with the type set to text. We also add a placeholder text that says search which will appear inside the input field before the user types anything. Next we create a button element. Inside the button we place a Font Awesome search icon. This icon represents the search functionality and makes the interface more user friendly. Now our HTML structure is complete. Now let's move to the CSS file and start styling the project. First, we apply a CSS reset using the universal selector. We removed the default margin and padding from all elements. We also set box sizing to border box, which helps us manage element sizes more predictably. Next, we set the font family for the entire page. In this project we are using a monospace font which gives the design a clean developer style appearance. Next we style the body element. We set the height of the body to 100 viewport height which makes it take the full height of the screen. Then we use flexbox to center the search bar horizontally and vertically. We do this using three properties display flex. Justify Content Center. Align items center. Finally, we alley a dark background color to the body. This dark theme makes the search bar stand out clearly and creates a modern UI look. Next, we style the search box container. We select the class search box. First we set its position to relative. Then we use display flex so the input field and button stay aligned in one row. Next we center the elements vertically using align items center. We alley a dark background color to the container and add a large border radius to create a rounded search bar shape. We also add some padding and alley a transition effect so that any size changes will animate smoothly. Now we style the input field. First we remove the default border and outline. Then we set the background to none so it blends with the container. We set the text color to white so it is visible on the dark background. Next, we set the initial width of the input field to 0. This is the key trick that allows the input field to stay hidden initially. We also add padding and a transition animation so that the width change will animate smoothly. Next we style the search button. We remove the default border and apply a blue background color. Then we set the width and height to 40 pixels to create a perfect circle. We add a border radius of 50% so the button becomes fully rounded. Next we use flexbox again to center the icon inside the button. Finally we change the cursor to pointer so it feels interactive. Now comes the most important part of this project, the expand animation. We use a special CSS selector called focus within. This selector targets the parent container when any child element inside it receives focus. In this case, when the user clicks inside the input field, the search box becomes active. Then we increase the width of the input field from zero pixels to 220 pixels. Because we added a transition property earlier, the input field expands smoothly instead of instantly. This creates the expandable search bar animation. And that's it. Now, when the user clicks the search bar, the input field expands smoothly, creating a modern and interactive UI effect. This project demonstrates how powerful C transitions and focus selectors can be, even without JavaScript. This was day five of my 100 Days Web Development Projects challenge. If you enjoyed this tutorial, make sure to like the video and subscribe to the channel so you don't miss the upcoming projects. Also check the GitHub link in the description to download the source code. See you in day six with another web development project. Happy coding.

To view or add a comment, sign in

More Relevant Posts

Abhay Arya
1mo Edited
Report this post
💡 Interactive Light Bulb with Click Sound using HTML, CSS & JavaScript 🔊 Ever wanted to bring a simple UI idea to life with a touch of realism? I recently built a fun mini-project where a light bulb turns ON and OFF with a click — complete with a satisfying switch sound! ⚡ Here’s what this project covers: 🔹 HTML – Structure for the bulb and switch 🔹 CSS – Styling the bulb glow effect and smooth transitions 🔹 JavaScript – Handling click events and toggling states 🔹 Sound Integration – Adding a realistic click sound for better user experience ✨ Key Features: Toggle light ON/OFF with a single click Visual glow effect when the bulb is ON Realistic click sound for interaction feedback Beginner-friendly and great for practicing DOM manipulation 🚀 This is a great project if you're starting with JavaScript and want to understand how interactivity works in real-world UI elements. 💻 Concept: Use an image or div for the bulb Toggle a CSS class on click Play audio using JavaScript when switching states Small projects like these make learning fun and practical! If you'd like, I can share the full code snippet as well. Let me know in the comments! 👇 🚀 Here Check my GitHub repo: 🔗 https://lnkd.in/g6MgHkh2 🚀 Day 19 of #100DaysOfcode #WebDevelopment #JavaScript #HTML #CSS #Frontend #CodingProjects #LearningByDoing
Like Comment
To view or add a comment, sign in
Vaibhav S.
1mo
Report this post
🚀 Built a Background Changer using HTML, CSS & JavaScript Excited to share my latest mini project where I created a Background Color Changer 🎨 💡 With just a click, the entire background changes — simple idea, but a great way to strengthen core concepts! 🔹 What I used: • HTML for structure • CSS for styling • JavaScript for interactivity 🔹 Key Learnings: • DOM manipulation in JavaScript • Handling events like clicks • Writing clean and interactive UI logic • Improving user experience with small features 🔗 Live Demo: https://lnkd.in/eSmF8Qdw 💻 GitHub Repo: https://lnkd.in/eU-N3P2J This project reminded me that even small builds can teach big concepts 💯 I’m focusing on building consistently and improving step by step 🚀 💬 What was the first JavaScript project you built? #WebDevelopment #JavaScript #HTML #CSS #Frontend #CodingJourney #BuildInPublic

4 Comments
Like Comment
To view or add a comment, sign in
Abhay Arya
1mo
Report this post
⏰ Build Your Own Digital Clock with HTML, CSS & JavaScript! Ever wondered how a live digital clock works on a website? I recently created one from scratch using basic web technologies — and it’s a great beginner-friendly project! 💡 What I used: HTML for structure CSS for styling JavaScript for real-time functionality 🚀 Key Features: Displays current time (hours, minutes, seconds) Updates every second automatically Clean and responsive design 🔧 What I learned: Working with the Date object in JavaScript Using setInterval() for real-time updates Improving UI with simple CSS styling This project is perfect if you're starting your web development journey and want to understand how dynamic content works. If you're learning JavaScript, give this a try — small projects like this build strong fundamentals! 🚀 Here check my GitHub repo: 🔗 https://lnkd.in/gCz98WpX 🚀 Day 15 of #100DaysOfCode #WebDevelopment #JavaScript #HTML #CSS #Coding #FrontendDevelopment #100DaysOfCode

1 Comment
Like Comment
To view or add a comment, sign in
Asfak Ahmed
1mo
Report this post
🚨 𝐂𝐒𝐒 𝐢𝐬 𝐧𝐨 𝐥𝐨𝐧𝐠𝐞𝐫 𝐣𝐮𝐬𝐭 𝐬𝐭𝐲𝐥𝐢𝐧𝐠. With CSS Wrapped 2025, we're seeing CSS evolve into something much closer to a UI programming language. Things that once required JavaScript can now be done natively with CSS and HTML: • 𝑩𝒖𝒊𝒍𝒅 𝒊𝒏𝒕𝒆𝒓𝒂𝒄𝒕𝒊𝒗𝒆 𝒄𝒂𝒓𝒐𝒖𝒔𝒆𝒍𝒔 𝒘𝒊𝒕𝒉 ::𝒔𝒄𝒓𝒐𝒍𝒍-𝒃𝒖𝒕𝒕𝒐𝒏 𝒂𝒏𝒅 ::𝒔𝒄𝒓𝒐𝒍𝒍-𝒎𝒂𝒓𝒌𝒆𝒓 • 𝑺𝒕𝒚𝒍𝒆 𝒏𝒂𝒕𝒊𝒗𝒆 <𝒔𝒆𝒍𝒆𝒄𝒕> 𝒆𝒍𝒆𝒎𝒆𝒏𝒕𝒔 (𝒇𝒊𝒏𝒂𝒍𝒍𝒚!) • 𝑪𝒓𝒆𝒂𝒕𝒆 𝒉𝒐𝒗𝒆𝒓 𝒑𝒓𝒆𝒗𝒊𝒆𝒘𝒔 𝒂𝒏𝒅 𝒕𝒐𝒐𝒍𝒕𝒊𝒑𝒔 𝒘𝒊𝒕𝒉 𝒊𝒏𝒕𝒆𝒓𝒆𝒔𝒕-𝒇𝒐𝒓 • 𝑾𝒓𝒊𝒕𝒆 𝒄𝒐𝒏𝒅𝒊𝒕𝒊𝒐𝒏𝒂𝒍 𝒍𝒐𝒈𝒊𝒄 𝒖𝒔𝒊𝒏𝒈 𝒊𝒇() 𝒊𝒏 𝑪𝑺𝑺 • 𝑼𝒔𝒆 𝒄𝒐𝒏𝒕𝒂𝒊𝒏𝒆𝒓 & 𝒔𝒄𝒓𝒐𝒍𝒍 𝒔𝒕𝒂𝒕𝒆 𝒒𝒖𝒆𝒓𝒊𝒆𝒔 𝒇𝒐𝒓 𝒔𝒎𝒂𝒓𝒕𝒆𝒓 𝒍𝒂𝒚𝒐𝒖𝒕𝒔 • 𝑪𝒓𝒆𝒂𝒕𝒆 𝒔𝒕𝒂𝒈𝒈𝒆𝒓𝒆𝒅 𝒂𝒏𝒊𝒎𝒂𝒕𝒊𝒐𝒏𝒔 𝒘𝒊𝒕𝒉 𝒔𝒊𝒃𝒍𝒊𝒏𝒈-𝒊𝒏𝒅𝒆𝒙 • 𝑹𝒆𝒐𝒓𝒅𝒆𝒓 𝑫𝑶𝑴 𝒆𝒍𝒆𝒎𝒆𝒏𝒕𝒔 𝒘𝒊𝒕𝒉𝒐𝒖𝒕 𝒍𝒐𝒔𝒊𝒏𝒈 𝒔𝒕𝒂𝒕𝒆 𝒖𝒔𝒊𝒏𝒈 𝒎𝒐𝒗𝒆𝑩𝒆𝒇𝒐𝒓𝒆 • 𝑩𝒖𝒊𝒍𝒅 𝒑𝒐𝒑𝒐𝒗𝒆𝒓𝒔, 𝒅𝒊𝒂𝒍𝒐𝒈𝒔, 𝒂𝒏𝒅 𝒊𝒏𝒕𝒆𝒓𝒂𝒄𝒕𝒊𝒗𝒆 𝑼𝑰 𝒘𝒊𝒕𝒉𝒐𝒖𝒕 𝑱𝑺 𝗜𝗻 𝘀𝗵𝗼𝗿𝘁: CSS is becoming stateful, logical, and interaction-driven. The web platform is shifting toward native UI capabilities, reducing the need for heavy JavaScript for common patterns. If you're a frontend developer, this is a moment worth paying attention to. The platform is getting seriously powerful. Explore all the features visually from official docs: https://lnkd.in/dnXM6tcR #CSS #Frontend #WebDevelopment #WebPlatform #ChromeDev #FrontendEngineering
9 Comments
Like Comment
To view or add a comment, sign in
Solaiman Islam SEAM
1mo
Report this post
🚨 𝐂𝐒𝐒 𝐢𝐬 𝐧𝐨 𝐥𝐨𝐧𝐠𝐞𝐫 𝐣𝐮𝐬𝐭 𝐬𝐭𝐲𝐥𝐢𝐧𝐠. With CSS Wrapped 2025, we're seeing CSS evolve into something much closer to a UI programming language. Things that once required JavaScript can now be done natively with CSS and HTML: • 𝑩𝒖𝒊𝒍𝒅 𝒊𝒏𝒕𝒆𝒓𝒂𝒄𝒕𝒊𝒗𝒆 𝒄𝒂𝒓𝒐𝒖𝒔𝒆𝒍𝒔 𝒘𝒊𝒕𝒉 ::𝒔𝒄𝒓𝒐𝒍𝒍-𝒃𝒖𝒕𝒕𝒐𝒏 𝒂𝒏𝒅 ::𝒔𝒄𝒓𝒐𝒍𝒍-𝒎𝒂𝒓𝒌𝒆𝒓 • 𝑺𝒕𝒚𝒍𝒆 𝒏𝒂𝒕𝒊𝒗𝒆 <𝒔𝒆𝒍𝒆𝒄𝒕> 𝒆𝒍𝒆𝒎𝒆𝒏𝒕𝒔 (𝒇𝒊𝒏𝒂𝒍𝒍𝒚!) • 𝑪𝒓𝒆𝒂𝒕𝒆 𝒉𝒐𝒗𝒆𝒓 𝒑𝒓𝒆𝒗𝒊𝒆𝒘𝒔 𝒂𝒏𝒅 𝒕𝒐𝒐𝒍𝒕𝒊𝒑𝒔 𝒘𝒊𝒕𝒉 𝒊𝒏𝒕𝒆𝒓𝒆𝒔𝒕-𝒇𝒐𝒓 • 𝑾𝒓𝒊𝒕𝒆 𝒄𝒐𝒏𝒅𝒊𝒕𝒊𝒐𝒏𝒂𝒍 𝒍𝒐𝒈𝒊𝒄 𝒖𝒔𝒊𝒏𝒈 𝒊𝒇() 𝒊𝒏 𝑪𝑺𝑺 • 𝑼𝒔𝒆 𝒄𝒐𝒏𝒕𝒂𝒊𝒏𝒆𝒓 & 𝒔𝒄𝒓𝒐𝒍𝒍 𝒔𝒕𝒂𝒕𝒆 𝒒𝒖𝒆𝒓𝒊𝒆𝒔 𝒇𝒐𝒓 𝒔𝒎𝒂𝒓𝒕𝒆𝒓 𝒍𝒂𝒚𝒐𝒖𝒕𝒔 • 𝑪𝒓𝒆𝒂𝒕𝒆 𝒔𝒕𝒂𝒈𝒈𝒆𝒓𝒆𝒅 𝒂𝒏𝒊𝒎𝒂𝒕𝒊𝒐𝒏𝒔 𝒘𝒊𝒕𝒉 𝒔𝒊𝒃𝒍𝒊𝒏𝒈-𝒊𝒏𝒅𝒆𝒙 • 𝑹𝒆𝒐𝒓𝒅𝒆𝒓 𝑫𝑶𝑴 𝒆𝒍𝒆𝒎𝒆𝒏𝒕𝒔 𝒘𝒊𝒕𝒉𝒐𝒖𝒕 𝒍𝒐𝒔𝒊𝒏𝒈 𝒔𝒕𝒂𝒕𝒆 𝒖𝒔𝒊𝒏𝒈 𝒎𝒐𝒗𝒆𝑩𝒆𝒇𝒐𝒓𝒆 • 𝑩𝒖𝒊𝒍𝒅 𝒑𝒐𝒑𝒐𝒗𝒆𝒓𝒔, 𝒅𝒊𝒂𝒍𝒐𝒈𝒔, 𝒂𝒏𝒅 𝒊𝒏𝒕𝒆𝒓𝒂𝒄𝒕𝒊𝒗𝒆 𝑼𝑰 𝒘𝒊𝒕𝒉𝒐𝒖𝒕 𝑱𝑺 𝗜𝗻 𝘀𝗵𝗼𝗿𝘁: CSS is becoming stateful, logical, and interaction-driven. The web platform is shifting toward native UI capabilities, reducing the need for heavy JavaScript for common patterns. If you're a frontend developer, this is a moment worth paying attention to. The platform is getting seriously powerful. Explore all the features visually from official docs: https://lnkd.in/dnXM6tcR #CSS #Frontend #WebDevelopment #WebPlatform #ChromeDev #FrontendEngineering
Like Comment
To view or add a comment, sign in
Joshua Innocent
1mo
Report this post
After my last post about Vanilla CSS, a few people asked: "But how do you handle the 'click' state without JavaScript?" The answer is simpler than you think: The Checkbox Hack. By using a hidden <input type="checkbox"> and the :checked pseudo-class, you can: Toggle menus with zero JS. Keep your HTML semantic. Ensure 100% performance on low-end devices. Here’s the 3-step logic: 1.HTML: Wrap your menu in a label connected to a hidden checkbox. 2.CSS: Set the menu to display: none (or transform: scale(0) for better animation). 3.The Magic: Use input:checked ~ .menu { display: block; }. Modern CSS features like :focus-within and the new popover API are making JavaScript "glue code" a thing of the past. Are you still writing document.querySelector for basic UI toggles, or have you explored these native CSS alternatives? Let’s chat in the comments—I’m looking to connect with more devs who love building lightweight, high-performance web apps! #WebDevelopment #CSS #Frontend #CleanCode #ProgrammingTips #VanillaCSS

2 Comments
Like Comment
To view or add a comment, sign in
Muhammad Bilal
1mo
Report this post
Day 16 of rebuilding my Frontend foundations from Talha Tariq. I just deployed my portfolio. Built with pure HTML, and CSS — no frameworks. 🔗 Live: https://lnkd.in/dKG_72ER 💻 Code: https://lnkd.in/dpaPq3KY What I focused on: Most beginners jump straight into React and Next.js. I did the same. Then I realized — I was using powerful tools without understanding the basics behind them. So I went back to fundamentals. This portfolio is the result. 3 things I learned building this: 1. CSS animations need no library @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } Just two lines. No JavaScript. No library. Built into every browser. 2. One line fixes the most common CSS bug *, *::before, *::after { box-sizing: border-box; } Without this — padding increases element width unexpectedly. Every professional project starts with this reset. 3. CSS variables keep everything consistent :root { --accent: #2dd4bf; } Change one value → updates everywhere. This is how real design systems work. What is visible in the video: → Smooth entrance animations on page load → Hover effects on project images → Fully responsive on mobile → Clean dark theme Built without copying. Understood every line. That is the only way foundations actually stick. What did you build when you were learning the basics? 👇 #webdevelopment #frontend #html #css #buildinpublic #developer #portfolio

3 Comments
Like Comment
To view or add a comment, sign in
Abhay Arya
1mo
Report this post
🚀 Project Showcase: Dark Mode Toggle (HTML, CSS & JavaScript) I recently built a Dark Mode Toggle feature using HTML, CSS, and JavaScript to enhance user experience by allowing users to switch between light and dark themes effortlessly. 💡 Key Highlights: 🌗 Smooth Light/Dark mode switching 🎨 Clean and responsive UI design using CSS ⚡ JavaScript functionality for real-time theme toggling 💾 User preference can be easily extended to local storage for persistent settings This small project helped me better understand DOM manipulation, event handling, and UI state management in JavaScript while improving front-end design practices. 🔧 Tech Stack: HTML | CSS | JavaScript Projects like this show how small features can significantly improve usability and accessibility in modern web applications. I’m continuously exploring and building more front-end projects to strengthen my development skills. here checks my GitHub repo: 🔗 https://lnkd.in/gCz98WpX 🚀 Day 6 of #100DaysOfCode #WebDevelopment #FrontendDevelopment #JavaScript #HTML #CSS #DarkMode #Coding #LearningInPublic

2 Comments
Like Comment
To view or add a comment, sign in
Bolivar Alexander A.
1mo
Report this post
For 25 years, the <select> element has been impossible to style. Every project ends the same way -- you reach for React Select, Headless UI, or some custom div-based dropdown. 30KB of JavaScript just to make a dropdown look good. That era is ending. With appearance: base-select (Chrome 134+), you can now fully customise the native <select> using pure CSS: -- Style the dropdown panel with ::picker(select) -- Replace the arrow with ::picker-icon -- Put images, icons, and descriptions inside <option> -- Animate open/close with @starting-style -- Full keyboard and screen reader accessibility -- built in Zero JavaScript. ~20 lines of CSS. And browsers that don't support it still get a working native select. I wrote about the new elements, real code examples, and when you still need a JS library: https://lnkd.in/eT5i3VTC #CSS #HTML #WebDevelopment #FrontEnd #DesignSystems #Accessibility

Customizable select — Stop Using JavaScript Dropdown Libraries medium.com
Like Comment
To view or add a comment, sign in

Md Ali Reza

5,578 followers

View Profile Connect

More from this author

Explore content categories