<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Nonoka Tanaka</title>
    <description>The latest articles on DEV Community by Nonoka Tanaka (@_02no_oka).</description>
    <link>https://dev.to/_02no_oka</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3903298%2Fcc1e66ab-9955-412b-b65a-a739f8389c5e.jpeg</url>
      <title>DEV Community: Nonoka Tanaka</title>
      <link>https://dev.to/_02no_oka</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/_02no_oka"/>
    <language>en</language>
    <item>
      <title>How I Revamped a Local Cram School Website Using AI (Claude, Gemini, and Codex)</title>
      <dc:creator>Nonoka Tanaka</dc:creator>
      <pubDate>Wed, 29 Apr 2026 04:57:29 +0000</pubDate>
      <link>https://dev.to/_02no_oka/how-i-revamped-a-local-cram-school-website-using-ai-claude-gemini-and-codex-38jd</link>
      <guid>https://dev.to/_02no_oka/how-i-revamped-a-local-cram-school-website-using-ai-claude-gemini-and-codex-38jd</guid>
      <description>&lt;h3&gt;
  
  
  Introduction
&lt;/h3&gt;

&lt;p&gt;I recently took on the challenge of modernizing the website for my parents' cram school in rural Japan.&lt;br&gt;&lt;br&gt;
As an IT professional specializing in cloud infrastructure, I wanted to see how far I could go by leveraging AI as my primary development partner.&lt;br&gt;&lt;br&gt;
Here is the story of how &lt;strong&gt;Claude&lt;/strong&gt;, &lt;strong&gt;Gemini&lt;/strong&gt;, and &lt;strong&gt;Codex&lt;/strong&gt; helped me transform an outdated site into a modern web presence.&lt;/p&gt;

&lt;h3&gt;
  
  
  The AI Dream Team
&lt;/h3&gt;

&lt;p&gt;I used three different AI models, each for a specific role:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Gemini:&lt;/strong&gt; My "Strategy Consultant." I used it to brainstorm the revamp plan and organize ideas for site structure.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffz9n62nn57qlxjvznk9s.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffz9n62nn57qlxjvznk9s.jpeg" alt=" " width="800" height="800"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Claude:&lt;/strong&gt; My "Lead Developer." It was incredibly fast and accurate with code generation.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frv23mqnhye4bizi9hh6m.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frv23mqnhye4bizi9hh6m.jpeg" alt=" " width="800" height="800"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Codex:&lt;/strong&gt; My "UI/UX Designer." While Claude was fast, Codex generated a design that perfectly appealed to our target audience—young mothers.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgm3etbk3iomffv19jlid.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgm3etbk3iomffv19jlid.png" alt=" " width="640" height="640"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  The Development Process
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Phase 1: The One-Pager&lt;/strong&gt;&lt;br&gt;
   Claude initially built a high-quality single-page site in seconds. It was impressive, but I needed more.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Phase 2: Designing for the Audience&lt;/strong&gt;&lt;br&gt;
   Codex stepped in to refine the aesthetics. It created a design that felt much more approachable and modern for young parents.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F20z7u6mzwq18c75fcrhx.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F20z7u6mzwq18c75fcrhx.jpeg" alt=" " width="800" height="1120"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Phase 3: The Biggest Challenge (The "Multi-Page" Wall)&lt;/strong&gt;&lt;br&gt;
   The hardest part was splitting the site into seven distinct HTML pages. I spent &lt;strong&gt;7 hours&lt;/strong&gt; trying to get Codex to handle the linking and structure—I even took a nap while it processed—but it just couldn't cross the finish line.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Breakthrough&lt;/strong&gt;&lt;br&gt;
   I switched back to a combination of &lt;strong&gt;Claude&lt;/strong&gt; and &lt;strong&gt;Gemini&lt;/strong&gt;. Claude’s coding efficiency is unmatched; it handled the multi-page logic without breaking a sweat.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjueoaxozc2pnuxv3dwa5.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjueoaxozc2pnuxv3dwa5.jpeg" alt=" " width="800" height="500"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Key Takeaway:&lt;/strong&gt; For pure coding speed and logic, Claude is currently king. It saves developers an incredible amount of time.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  Feedback from my Parents (and Next Steps)
&lt;/h3&gt;

&lt;p&gt;After showing the result to my parents, I received some "tough but fair" feedback, which I’m now addressing:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;"Changing the old site is scary."&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;em&gt;Solution:&lt;/em&gt; They were worried about the transition. I'm considering a blue-green deployment or hosting both versions. Since they are worried about server costs, I’m looking into &lt;strong&gt;AWS (EC2/S3)&lt;/strong&gt; or &lt;strong&gt;Google Cloud&lt;/strong&gt; to optimize hosting for a lightweight static site.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;p&gt;&lt;strong&gt;"It looks a bit too much like AI-generated art."&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;em&gt;Solution:&lt;/em&gt; I am manually refining the &lt;strong&gt;fonts and CSS&lt;/strong&gt; in VS Code to give it a more "human" and professional touch.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;p&gt;&lt;strong&gt;"We won't be able to edit it ourselves!"&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;em&gt;Solution:&lt;/em&gt; I'm setting up a simplified workflow (perhaps a headless CMS or a specific Git-based setup) so they can update information without needing to touch the raw code.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;/ul&gt;

&lt;h3&gt;
  
  
  Conclusion
&lt;/h3&gt;

&lt;p&gt;Building this was a reminder that AI is a powerful tool, but the "human in the loop" is essential for final adjustments and navigating complex site architectures.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Have you used AI to build projects for your family? I’d love to hear your experiences in the comments!&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>ai</category>
      <category>webdev</category>
      <category>claude</category>
      <category>cloud</category>
    </item>
  </channel>
</rss>
