Figma MCP × AI x Vibe Coding: Completing a Responsive Web Portfolio in Just 4 Hours

It is structured so that you can systematically, easily, and quickly complete the course from basics to practical application using Figma UI3.

It is aimed at beginners of html/css, and it builds a solid foundation, and of course, you can learn practical responsive layout creation.

"2026 UIUX Designer | Coding Designer Agency Pass Portfolio Reveal" This is a practical lecture on creating a UIUX web portfolio that catches the interviewer's eye. The curriculum is designed not just for simple portfolio creation, but to enhance your competitiveness as a UIUX designer with differentiated results utilizing interactions.

Real! Website Creation Step By Step! This is a process of creating the main page of Crewalamode (https://crewalamode.com/) as is. This is a process of creating and implementing the gorgeous interactive web contained in the site as is, and it teaches you the core practical know-how to easily and quickly create even complex layouts.

This is a lecture that creates and implements the actual website main page by creating the 'Hotel Hyundai Lahan_Mokpo Branch' site. It is a practical lecture on web page creation that teaches the skills essential for the web, such as understanding HTML Markup and Layout creation, as well as Fixheader, Image Slider, MenuOpen Bar, and Scroll Animation creation, for those who have basic knowledge of HTML/CSS.

This is a lecture that creates and implements the actual website main page as an application course for the Dopda site production. It is a lecture that completes the web page production by modifying and supplementing each coding, adding Fixed header, Image Slider, Mobile navigation, Scroll Animation, and responsiveness, from the simple structure coding centered on the layout and animation of the Dopda site Basic Course that was opened as a free lecture! (You can see that the learning effect is greater if you take this lecture after listening to the Dopda-Basic Course.)

[Website Creation Step By Step] Basic Course, this is a course to create the main page of Dopda (http://dopda.co.kr/) as it is. This Basic Course covers CSS layout creation and animation, and the Application Course will be opened by adding interactive elements such as image slide effects, responsive creation, scroll animation, and Fix Header.

[Website Creation Step By Step] This is a beginner-level course that will walk you through the creation of the main page of the Korea Consumer Era webzine (currently renewed).

[Website Creation Step By Step] This is a 3-step course that will teach you how to create the main page of Musign (https://musign.net) as is. This course will teach you the core practical know-how to create complex layouts easily and quickly by creating and implementing the gorgeous interactive web that is contained in the site.^^

[Website Creation Step By Step] This is a 3-step lecture, and it is a process of creating the main page of Daebang Industry as it is. It is a lecture that is as difficult as it is fancy, as it is a process of creating and implementing the gorgeous interactive web contained in the site.

This is a practical course on building a website (Hanwha Chemical/Solutions) using HTML5 and CSS3. It is a "Practical Web Page Creation! Step by Step!" Basic Course designed to help you fully understand and utilize PC mode layouts and responsive page creation. (Completed lecture files are attached!)

Real-world! Website Creation! This is an Application Course from Step By Step where you will recreate the main page of Y Studio (http://www.ystudio.co.kr/) exactly as it is using HTML, CSS, jQuery, and plug-ins. (Completed lecture files attached!)

"Beyond Data Analysis: From Predictive Model Design to Optimization (29 Lectures in Total)" Have you finished your data analysis but feel stuck when it actually comes to building a model? We help you fully master not just how to call libraries, but the working principles of each algorithm and optimal model validation strategies.

This course is a practice-oriented lecture that goes beyond 👉 just explaining the concepts of RAG (Retrieval-Augmented Generation), 👉 to building the actual working architecture yourself, 👉 and experiencing expansion and optimization. Starting from simple RAG examples, you will learn step-by-step—from Advanced RAG to Modular RAG and Agent-based RAG—at a level that can be immediately applied in the field.

This is a practice-oriented course for experienced developers with a computer science background transitioning to the latest AI technology stack. From the design to the implementation of LLM-based applications, you will establish AI solution adoption strategies by leveraging existing software engineering knowledge. Rebuild your career by integrating traditional development experience with modern AI technology.

All-in-one course for designers and developers! New UI3 included

From server setup to blog and YouTube automation, build a complete AI workflow with n8n. We will practice creating a stable operating environment, covering Contabo VPS-based server installation, Ubuntu/Docker/Portainer environment setup, domain connection, and HTTPS security configuration. The course covers Search API and file server development using FastAPI and Docker, Airtable and n8n integration, building blog AI agents, and image/video automation. You will be able to complete a profit-generating automation strategy that can be immediately applied to actual service operations.

We will show you how Java backend developers using IntelliJ can maximize their productivity with Claude Code. In particular, we help you perfectly resolve the vibe coding environment issues faced by those using Windows environments.

Are you feeling stuck trying to implement an agent that goes beyond a simple chatbot? Based on my own trial and error and know-how from official documentation, I will show you how to build intermediate-level agents that can be immediately applied to real-world tasks.

Starting as a non-major and eventually leading large-scale UX projects at global tech companies like IBM and Oracle, I am sharing the UX knowledge I gained through various trials and errors. This is an introductory course designed to help you build a solid foundation in UX design and leap forward to the next step in your career preparation.

Core Principles of n8n Automation and Workflow Design Basics for Non-Majors 5-Step Automation Built with n8n: API Connection Practice from Topic Input to Video Completion How to Automatically Create Videos in n8n Using AI APIs (ChatGPT, ElevenLabs, Creatomate)

This course trains your frontend system design mindset through real-world service cases such as Threads feeds, Amazon shopping carts, Netflix streaming UI, Google Docs collaborative editing, Micro Frontends, Agentic UI, and Observability.

Can you create a service with your ideas even if you don't know how to code? With AI, it is possible! In this course, you will experience the entire process of turning an idea into a real web service using "Vibe Coding" tools used in the industry, such as Gemini, Lovable, Antigravity, Cursor, and Claude Code. You won't just learn how to use the tools; you will master a new way of service development in the AI era—from planning and deploying to integrating payments. Point 1. Master 5 Core Vibe Coding Tools - Hands-on practice with core features and applications of Gemini, Lovable, Antigravity, Cursor, and Claude Code - Understanding the Vibe Coding development method of collaborating with AI Point 2. Building a Real Service Without Coding - Hands-on process of planning and implementing a book recommendation web service - Understanding the entire service creation flow: Idea → Development → Deployment Point 3. Practical Skills for Service Launch and Operation - Understanding domain purchase, server setup, and the deployment process - Learning core operational technologies such as payment module integration and SEO settings

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.

The goal is to cultivate a full-stack perspective that allows individuals to lead the entire product lifecycle, covering everything from research automation and backend data integration to the deployment of live dynamic websites. We empower those who want to strengthen their competitiveness in the AI era by providing the ability to use these tools as a powerful engine to turn ideas into reality.

Even if you don't know coding, full-stack development, or Rails development, you can build a complex platform like Inflearn. Use Windsurf, Cursor, and Claude Code.

"In such a busy world, you can create a portfolio quickly using AI?" From problem definition to research synthesis, ideation, and prototyping! Use AI as your practical partner to quickly build a high-quality UX/UI portfolio. You can strategically utilize not only the latest AI tools but also proven tools consistently used in the industry to fit your project.

This is our 'actual real-world workflow,' and we are releasing the 'onboarding video' used for planners and developers joining our company. It teaches you how to design service screens without a designer and create UX flows and prototypes even if you don't know Figma. Our company maximizes productivity by prototyping quickly during service planning to enable fast decision-making, finalize necessary features, and utilize them directly in front-end development. If the response is positive, I will upload more lectures on other "real-world workflows."

We will directly implement an AI web service integrated with the OpenAI API using only HTML, CSS, and JavaScript. By utilizing Netlify Functions, we will securely protect the API key and proceed with actual deployment using a static frontend + serverless backend architecture. This is not just a simple demo; we will complete a monetizable MVP from start to finish through a live IDE session.

For those of you who have completed intermediate SwiftUI, it is now time to integrate AI into your apps. Complete an on-device AI app that runs locally without an internet connection using Apple Intelligence and the FoundationModels framework.

In the era of swift execution and validation, execute faster than anyone with VIBE Coding! Achieve complete monetization, from ads to payments, all by yourself.

There are app/web ideas that they want to implement, but they are at a loss as to where to start due to their lack of experience in app service planning, startup representatives who want to learn planning systematically in a short period of time, and junior planners who want to learn the planning work process and know-how of experienced planners. We will teach you a new planning method using Figma and the work skills of a PM with 17 years of experience from the basics so that you can become an expert.