Case Study

AI-Assisted Coding: AI Learning Resources Web Page

Building a polished, responsive, bilingual employee resource site through AI-assisted development with Claude — from a visual mockup to a page live in the LMS, in a fraction of the usual hand-coding time.

Role: Learning Experience Developer / Web Designer
Primary Tools: Claude · HTML · CSS · JavaScript · Google Analytics
Focus: AI-Assisted Development · Responsive Design · French Localization · Analytics

The Challenge

Employees needed a centralized, easy-to-use web page where they could quickly find AI learning resources. The aim was a polished experience that could be built quickly and distributed broadly through the organization’s LMS.

My Approach

I developed the page entirely through AI-assisted coding, with Claude as the primary development partner. I started by giving Claude a visual mockup of the layout I wanted, along with the page content and links to the resources. I prompted Claude to create the initial HTML page; it generated the HTML, CSS, and JavaScript, and I made only minor edits. Several iterative prompts then refined the design and functionality.

Behind the Experience

The page went from a static mockup to a responsive, bilingual site — generated by Claude, refined through prompting, hosted on a web server, delivered through the LMS, and tracked with Google Analytics.

Learner Experience

The page is a simple resource hub that gathers AI learning opportunities in one place. Employees browse the resources and follow links to the corresponding content, with an interface designed to be visually clear and easy to navigate. I also prompted Claude to make it responsive for mobile and to add the language-selection modal for French. The final page was hosted on a web server and delivered through the organization’s LMS.

The language-selection modal offering English or French — Prompted translation and language selection into the build so the page could serve both English and French audiences.

The AI Learning Resources page, a clean resource hub organizing AI learning links into sections — A single, clean hub that organizes AI learning opportunities into onboarding, on-the-job, and explore-further sections.

Technology & Development

Claude / AI-Assisted Coding

Generated the complete HTML, CSS, and JavaScript, refined through several rounds of iterative prompting.

Responsive Design

Prompted Claude to adapt the page for mobile so the experience held up across screen sizes.

Language Support

Added a language-selection modal and a French translation of the page.

Analytics + LMS Delivery

Hosted on a web server, delivered through the LMS, with Google Analytics tracking page usage.

Business Impact

Created a polished AI learning-resource hub without hand-coding the full HTML, CSS, and JavaScript solution.
Used Claude to dramatically reduce development time while keeping control of layout, content, and UX through iterative prompts.
Expanded reach by making the page responsive for mobile and adding French language support.
Published the page through the organization’s LMS, making the resources easy for employees to find.
Integrated Google Analytics to capture usage data and support analysis of employee engagement.

What I Learned

This project showed how AI-assisted coding can dramatically accelerate web development when you can clearly define the experience, provide a strong visual starting point, and iteratively direct the AI. Using Claude to generate the HTML, CSS, and JavaScript, I built the page in a small fraction of the time hand-coding would have taken.