Building My Long-Postponed First AI Web App and Deploying It in Just 3 Hours

Experience the entire process—from planning and design to development and deployment—using Claude Design and Claude Code. Complete “My Bookshelf,” a reading-tracker web app, without any coding knowledge, and learn how to create and share a working URL. In a single learning experience, you’ll gain the skills to turn your own ideas into web apps.

From the next step after HTML/CSS through completing a React product browsing app, this is an introductory JavaScript and React course where you learn by writing code yourself. You can learn in two ways: follow along with the videos and implement everything yourself, or get AI suggestions using prompts from the study notes and selectively apply only what you need. Across 30 lessons (approximately 13 hours and 30 minutes), you’ll learn core JavaScript syntax, the DOM and events, and React components, props, and state in one continuous flow, then directly verify your results through testing and builds.

Even in the age of AI, web development starts with HTML. Learn step by step—from basic HTML syntax to semantic markup, web standards, and web accessibility—to build the ability to understand and modify AI-generated code, along with a solid foundation in web development for your career.

Even in the AI era, you need a solid foundation in CSS to create the web designs you want. Learn step by step, from basic CSS syntax to layouts, Flexbox, and responsive web design, and build the practical skills needed for employment along with the ability to understand and modify AI-generated code.

Even in the AI era, developers need the ability to understand code and complete real-world services. Build practical web development skills by using React and Firebase to implement everything from login, data management, and image uploads to deployment, based on a foundation in HTML/CSS/JavaScript.

Go beyond simply using AI and implement AI features directly into your web app. Build everything from AI recipe generation and image creation to data storage using Next.js and Supabase, gaining hands-on development experience connecting generative AI to a real web service.

In the AI era, web developers need more than coding skills—they need the ability to use AI to turn ideas into real-world results. Build your AI web development skills for practical work and portfolios by gaining hands-on experience creating UIs with Stitch and Figma Make, implementing them in React, and deploying them.

If you’ve learned React, it’s time to apply TypeScript to a real-world project. Build a TodoList app from scratch, applying types to components and state, and gain practical React + TypeScript development skills by implementing CRUD functionality, storing data in LocalStorage, and deploying the app.

If you’ve learned JavaScript, take your skills to the next level with TypeScript. Build a solid foundation in the TypeScript essentials needed for modern frontend development with React, Next.js, and more through hands-on practice covering basic types and type inference, interfaces, function types, generics, utility types, and more.

If you’ve learned HTML/CSS/JavaScript, now take your skills to the next level with React. Learn core React concepts such as components, Props, and State through a shopping mall project covering everything from product filtering, pagination, and API integration to responsive UI and deployment, and build the practical foundation you need to grow from a publisher into a frontend developer.

If you’ve learned the basics of HTML/CSS/JavaScript, it’s time to bring them together into a complete website. Analyze a Figma design, implement it with HTML/CSS, then add JavaScript (jQuery) interactions, make it responsive, and deploy it—experiencing the full process of professional web publishing.

Once you’ve mastered the basics of CSS, use Grid to freely create complex web layouts. Practice step by step—from the core concepts of CSS Grid to analyzing Figma designs and implementing them on the web—and develop the layout design skills needed for professional web publishing.

Even today, as modern technologies like React have become widespread, jQuery remains a technology you will still encounter when operating and maintaining existing websites and in web publishing work. Rather than simply recreating flashy effects, you will learn the principles and fundamentals of how jQuery works, progressing step by step from events and animations to a variety of UI interactions. Complete your portfolio through hands-on practice and develop practical web publishing skills that you can apply in the workplace.

Have you taken your first steps into web development? We have a special offer for those who are just getting started with HTML, CSS, and javascript! Do you want to create a mobile website to keep up with the mobile era, but are unsure where to begin? Don’t worry. By analyzing and implementing a Figma mobile design yourself, you’ll naturally learn the fundamentals of responsive web development. Based on a sophisticated mobile design, you’ll explore everything from subtle interactions that capture users’ attention to techniques that adapt perfectly to a variety of screen sizes. We’ll share our know-how to help your website shine on every device. Shall we get started together?

Do you have a basic understanding of HTML, CSS, and JavaScript (jQuery)? But are you unsure how to build an entire website? If so, challenge yourself to implement a shopping mall homepage by referring to a design. We’ll show you how to build a website by studying a completed design and understanding the project’s intent and detailed design elements.

If you’ve learned HTML/CSS, it’s time to make web pages interactive with JavaScript. Build a solid foundation in JavaScript by learning programming basics such as variables, functions, arrays, conditional statements, and loops, along with controlling DOM elements, handling events, and implementing UI components like tabs and accordions—then take the next step toward frontend learning with React and other technologies.