Monday morning kicked off Week 2, and the focus shifted completely from backend terminals to frontend web design. Until now, all our chatbot outputs were printing inside a boring black command prompt. Today, we started building a real visual interface.
1. The Skeleton and the Skin: HTML & CSS
We went over the basics: HTML gives your page structure (the chat window container, message history box, text input, and send button). CSS gives it style. We built custom chat bubbles—aligning the user's messages to the right in a nice accent color, and the bot's replies to the left in a sleek dark gray.
2. Making it Look Great on Phones
Most people view websites on their phones, so we made sure the layout was responsive using flexbox. We set maximum widths on the chat bubbles so long paragraphs don't stretch awkwardly across the whole monitor, and made sure the text input sticks cleanly to the bottom.
3. The SagarAI Demo
During practice time, while others were still wrestling with basic tags, I showed one of my classmates a custom bot I had built called 'SagarAI'. It was funny, smooth, and programmed to reply with witty, charming answers that treated the user like a princess. She was genuinely blushing and had a blast testing it out. It was a fun reminder that software isn't just about code—it's about how it makes someone feel when they use it.