Microsoft Teams Clone

Overview

This project is a from-scratch recreation of the Microsoft Teams calendar built with plain HTML, CSS, and JavaScript. I hand-coded it as one of my first projects after getting back into web development, using it to practice core JavaScript, DOM-driven state, and interactive UI behavior without relying on a framework.

How It Works

• The interface recreates a weekly calendar view in static HTML, with CSS handling the visual structure, spacing, and recognizable Teams-inspired layout.
• JavaScript drives the interactive behavior, updating the UI dynamically so the page behaves like an application instead of a static mockup.
• The project is entirely client-side, which kept the focus on fundamentals: layout, reusable styling, DOM manipulation, and organizing growing front-end code without framework tooling.

Technical Highlights

• Framework-free UI recreation: Rebuilding a familiar productivity interface in plain web technologies required translating a fairly structured desktop UI into raw HTML, CSS, and JavaScript.
• Direct DOM interaction: Instead of relying on component abstractions, the app logic works against DOM elements and reusable references directly, which made state changes and event handling explicit.
• Codebase cleanup through modularization: As the project grew, the implementation was reorganized into more manageable pieces, improving readability and making future changes easier to reason about.

What I Built

• The weekly calendar layout and front-end styling needed to recreate the overall Teams calendar experience.
• The client-side JavaScript that powers the page’s interactive behavior and turns the calendar into a working interface rather than a static design.
• A more maintainable front-end structure by breaking up styling and logic patterns as the project expanded.