On Day 6, the curriculum shifted from backend and prompt engineering to frontend web interfaces. The focus was on building the structure and styling for a chatbot UI using HTML and CSS.

1. HTML & CSS Basics

We covered HTML (HyperText Markup Language) as the foundational skeleton of a webpage, defining structural elements like headings, input forms, and buttons. Then we applied CSS (Cascading Style Sheets) to style the interface, specifically focusing on creating chat message bubbles with border radii, colors, and right/left alignments for user vs. bot messages.

2. Responsive Design

A key component of the lesson was responsive design. We learned that modern web applications must adjust seamlessly to mobile, tablet, and desktop screens, as most users access the web via phones.

3. The SagarAI Demonstration

During the practical session, while others were building basic HTML structures, I was showcasing a project I created for Valentine's and birthdays. A female classmate became curious and wanted to see. I showed her my projects, and she was in awe. I then demonstrated 'SagarAI', a chatbot I built that treated her like a princess. She was blushing heavily and was extremely impressed by my capabilities, further highlighting the massive gap between building theoretical examples and shipping real, emotionally engaging applications.

Key Learnings

  • Structuring webpage elements using HTML (forms, inputs, buttons).
  • Styling chat message bubbles with CSS for bot/user differentiation.
  • Implementing responsive layouts for mobile and desktop screens.
  • Evoking emotional responses through personalized AI UI demonstrations.

Tools & Stack

  • HTML
  • CSS
  • JS
  • VS Code
  • SagarAI

Challenges Overcome

  • Aligning and floating chat bubbles appropriately for left/right dialogue flows.
  • Ensuring responsive breakpoints didn't break the input box placement.

Task to be Performed

  • Create a basic HTML webpage structure with a header, chat area, input box, and send button.
  • Design distinct chat bubble styles for User (right) and Bot (left).
  • Ensure the layout is responsive across laptop, tablet, and mobile devices.

Related Logs

Day 00

Onboarding & Exploration: Mapping the Core AI & Python Blueprint

Onboarding at Virtual Height, introducing the training program, providing an overview of the curriculum, and mapping the 2-week schedule.

May 29, 2026 • 4 min readRead Log ➔
Day 01

Day 01: Foundations of AI, Python Lab, and the Velocity of Domain Mastery

Onboarding under Senior AI Trainer Rashmi, mapping the formal pillars of AI from ML to DL, mastering cross-platform Python execution, and demonstrating custom LLM and reverse engineering portfolios to the cohort.

Jun 01, 2026 • 4 min readRead Log ➔