Building Web Services with Generative AI – An All-in-One Project from Planning and Design to Coding and Deployment

"A hands-on web development project course that covers everything from planning and design to implementation and deployment using Generative AI." We will complete the entire process together step-by-step—starting from idea conception, quickly creating designs with AI, implementing a functional website with React, and finally deploying it to the internet. Latest AI tools like Stitch and Figma Make will assist with your design work, and even complex coding will be taught in a way that is easy to follow step-by-step.

This is a project-centered course that builds a "To-Do List Management App" with practical skills using React + TypeScript. Rather than just learning syntax, you can develop a sense for TypeScript application by completing it as an actual service through component structure design → state management → type application → feature implementation → local storage integration → deployment.

This is an introductory course that focuses on learning TypeScript's core syntax through hands-on practice to improve type safety and code readability. You'll learn through real code examples, from project environment setup to interfaces, generics, and utility types.

First steps in React for publishers! Learn everything from basic syntax to building and deploying a responsive shopping mall website all at once. This is not just a collection of fragmented React examples; you will learn and apply the core syntax necessary for actual web page production.

This lecture provides a step-by-step explanation of the process of implementing a Figma design into a web page. It covers the entire web publishing practice, from saving images to writing HTML, CSS, and Javascript. It is systematically designed to be easy for beginners to follow. Through practice-oriented learning, you can learn how to efficiently convert web designs into code.

CSS Grid is a powerful tool that allows you to implement complex layouts simply and intuitively. This lecture is designed to help you easily learn the core concepts of CSS Grid to practical applications step by step. Stop being tied to complicated floats and flexboxes and learn the standard of efficient layout design! Start now!

jQuery, a JavaScript library used by over 75% of websites worldwide! This course is structured to help you understand the principles and build a strong foundation rather than focusing on flashy effects. Learn jQuery from the basics to advanced applications to complete your own portfolio or use it immediately in the field.

Taking your first steps in web development? Special offer for those just starting with HTML, CSS, and JavaScript! Want to create a mobile website to keep up with the mobile era, but unsure where to start? Don't worry. Learn the core of responsive web development naturally by directly analyzing and implementing Figma mobile designs. Based on sleek mobile designs, we'll explore everything together, from subtle interactions that capture users' hearts to technologies that perfectly adapt to various screen sizes. Now, let's share the know-how to make your website shine on all devices. Shall we begin together?

Do you have a foundation in HTML, CSS, and JavaScript (jQuery)? But are you unsure how to create an entire website? If so, try implementing a shopping mall's main page by referencing a design. We'll share know-how on implementing a website by referencing a completed design and understanding the planning intentions and detailed aspects of the design.

Select HTML elements using JavaScript and change element styles or implement animation effects based on various events. Implement style changes, event settings, and effects frequently used in webpage development based on the basic syntax of JavaScript.

Learn everything from CSS basics to animations and responsive design. Solidify your fundamentals by reviewing what you've learned through practical, real-world examples.

Through this course, you can build a solid foundation in HTML, one of the three core languages that make up a webpage, alongside CSS and JavaScript. Learn how to properly write HTML that is optimized for search engines and complies with web accessibility and web standards.

A current startup CTO will share vibe coding knowledge gained through actual services and various outsourcing projects.

Explore → Plan → Implement → Commit. Master a proven AI development workflow with Claude Code. Learn everything from MCP and sub-agents to prompt engineering through 23 missions, and complete 3 real-world projects.

A full-stack course from design to coding and deployment!! [Figma + Vibe Coding (HTML/CSS/Tailwind/React) + Git + Vercel Deployment] Complete your own design exactly as it is with Vibe Coding! A full-stack guide to increasing work productivity by 5x using AI! You, too, can become a full-stack designer capable of both design and coding. Learn a professional workflow that allows you to: ✅ Implement your design intent without a single pixel of error ✅ Design structures that AI can understand ✅ Create prompts that accurately control AI ✅ Analyze and modify code generated by AI at will This is a serialized course released in two parts. ✅ 1st Release: February 22, 2026 - Figma - Desktop mode design - Figma - Registering Variables and naming conventions - Figma - Tablet & Mobile mode design - Preparation for Vibe Coding - Real-world! Vibe Coding - Refactoring with Tailwind CSS - Git version control and GitHub deployment ✅ 2nd Release: March 9, 2026 - React.js refactoring and Vercel deployment - Implementing interactive web features with JavaScript

"A hands-on web development project course that covers everything from planning and design to implementation and deployment using Generative AI." We will complete the entire process together step-by-step—starting from idea conception, quickly creating designs with AI, implementing a functional website with React, and finally deploying it to the internet. Latest AI tools like Stitch and Figma Make will assist with your design work, and even complex coding will be taught in a way that is easy to follow step-by-step.

One working prototype is better than 100 pretty screens! Create prototypes that function like the real thing using conditional logic in Figma, and cultivate design thinking skills that remain steadfast even in the AI era.

No more AI toy projects that end with a single API call! Based on my experience designing and deploying a full-stack AI chatbot, I will guide you through the entire process of building an AI chatbot that "works as a real service"—covering streaming, tool calling, memory, multi-modal capabilities, and Human-in-the-Loop.

The trending Google Antigravity! You don't have to be a developer. Create, deploy, and even monetize AI web services without any coding. 📍 Build 3 web apps without coding + Vercel deployment practice + Understanding Google AdSense monetization structures

"Why did the AI write this code?" or "Why can't it remember what I just said?" The frustration you encounter when using AI tools like Claude Code stems from not knowing how the tool actually works. This course flings open that black box. Over 25 lessons, we will build our own Coding Agent from scratch that functions exactly like real-world professional tools—giving the LLM 'eyes' to see files (Read), 'hands' to fix code (Edit), and 'feet' to execute commands (Bash). This isn't just about learning how to use a library. You will gain hands-on experience by implementing code to understand how AI perceives project structures, why it loses its memory during long conversations, and how to solve those issues technically (Sliding Window, Summary). Through this process, you will evolve from being a mere 'user' of AI tools to an 'AI provider' who understands the underlying principles and can customize and evaluate tools to fit your specific needs.

Upon completing and applying these lectures, you can create your own sites and apps. This introductory VibeCoding lecture uses Cursor AI to help you naturally learn coding flow by creating a Web site group chat for your family. Without an App developer account or MacBook, anyone can easily follow along in a Windows environment, even without dev knowledge, and learn to deploy it as a real website.

This course not only expands your ideas on blog management by creating a Python-based automated posting program for CPA affiliate marketing on WordPress but also allows you to perfectly master practical Python through real-world application rather than just theory.

In an era overflowing with AI tools and automation technology, we introduce vibe coding that anyone can start with just 'Cursor'. Think only developers can do this? Not at all. In this class, even if you don't know a single line of code, with just mouse clicks and prompt inputs, you can use Cursor to create apps and build automated systems that generate revenue. Target Audience Those who find development difficult but want to earn money through automation Digital nomads, solo entrepreneurs, freelancers Anyone who wants to save time and costs through AI utilization

This is a course where you'll learn the latest Next.js v15 App Router while building a practical developer blog based on Notion together. Additionally, you can gain various insights including how to utilize Cursor AI.

This is a mission content for a frontend project. We provide a PRD planning document, Figma design, and API endpoints so you can practice the project by implementing a timer app called DevTime yourself. Make the knowledge you've learned so far completely your own by implementing a project at a level similar to an actual service 🚀

And we are in the era of AI now. In the past, the "app-first" approach was difficult. Someone had to give you the code—whether you copied it from a book or found it on the internet. But now, we have AI. If you say, "Make me an app," it actually generates the app code. This is a complete game changer. Now, anyone can have an app from day one. And while looking at that app, they can ask, "What is this?" The method I used 10 years ago is now something anyone can do.

Have you never coded before? Or are you already skilled? If your self-made game is on your self-made homepage, isn't that cool? We prepared this course for such people.

You can learn the core concepts of complex Next.js in a short time. We'll teach you only the essential practical knowledge for those learning Next.js for the first time. Captain Pangyo's new Next.js course, who has been conducting framework courses for 8 years. You can learn the coding and learning methods of "Frontend Developers in the AI Era"! 😊

No coding knowledge needed! Turn your idea into real revenue in just 4 weeks. Using AI and the latest tools, create both a website and app simultaneously and connect them directly to services.

Complete a company introduction landing page with hands-on vibe coding. Using Cursor AI + Next.js + TypeScript + TailwindCSS + shadcn/ui + MCP stack, proceed from design to deployment all at once. The key is "fast implementation + SEO foundation that performs well in search engines." 🏁 Course Objectives Landing creation → Performance optimization → SEO implementation → Deployment/Indexing Real-time coding (vibe coding) to immediately check completed sections Direct experience including search indexing 🛠️ Practice Stack Cursor AI, Next.js(App Router), TypeScript TailwindCSS, shadcn/ui, MCP workflow 🔍 SEO Practice Apply SEO optimization MD files provided by instructor Metadata, OG/Twitter cards, robots/sitemap, structured data (JSON-LD) Optional multilingual routing implementation 🎯 Final Product Responsive company introduction landing + contact form Target Lighthouse 95+ Vercel deployment followed by Search Console registration and indexing request 📚 What You'll Learn from This Course How to quickly compose hero/trust/features/FAQ sections Clean UI composition with shadcn/ui Form validation and basic conversion tracking point design Boosting SEO scores with structured data + multilingual routing Understanding the indexing process through Search Console after deployment 💡 Industry Insights (Course Bonus) Beyond just code implementation, we'll briefly cover marketing and exposure methods actually used in the real market. Realistic pricing ranges for advertising, blog posting, and comment work How outsourcing and contracting companies actually proceed with SEO and exposure work Cost/efficiency differences between direct developer participation and outsourcing Through this section, you can develop a sense of how technology is actually utilized in real industry work and what cost structures drive it, beyond just the technical aspects. One-Line Summary Following the flow of "implementation → optimization → deployment → indexing," learn the web creation process that connects to actual search exposure and real industry market structures.

The most popular tool for designers, Figma! Become a popular UX/UI designer by easily creating with AI!

No coding knowledge needed! This lecture shows how anyone can easily create a website using AI tools 'Cursor' and 'Vibecoding'. Follow 2 practical examples to build a real-world website with just clicks, and even learn to deploy it.