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!)

This is a tutorial-style Claude code development course that even beginners and those new to development can easily follow. Based on experience teaching offline classes for planners, designers, and non-developers, you can learn everything in a single flow—from basic examples not covered in books to intermediate development projects. Using Claude code, you will experience the step-by-step development process, starting from "Hello World" to a Lucky Draw app, a device-optimized cafe menu management web page integrated with Claude design and Excel data, and finally a SaaS web application that can be uploaded to databases and cloud services. Tutorials are provided in stages of theory, practice, and projects. Through six levels of hands-on exercises, you will master AI-collaborative development methodologies and experience the entire development cycle, including cloud deployment and operation.

: "From environment setup to 7 practical projects, a deep learning full-stack journey across data domains (35 lectures in total)" Go beyond simply following example code and learn how to cook various types of real-world data using deep learning. Starting from building CPU/GPU development environments, you will cover waste sorting classification (Image), stock price prediction (Time-series), ECG anomaly detection (AE), animation stylization (GAN), medical image segmentation (U-Net), and sound classification (Audio)! Systematically master core deep learning algorithms through hands-on projects.

"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 is a process of developing a practical web service in collaboration with AI agents based on TARS prompt engineering principles. You will gain full-stack development experience covering everything from UI/UX component creation to CRUD functions, API integration, and data visualization, ultimately completing your own idea as a viable MVP.

From coding basics to launching your own app all at once?! The App Build All-in-One, connecting fundamentals and practical application.

Building a Full-Stack System Without Coding: Complete the entire pipeline from data collection to AI/ML analysis and web dashboards using only Korean prompts (Vibe Coding). Owning a 100% Automated Pipeline: Secure an independent stock analysis tool that sends S&P 500 screening and investment opinions via Telegram every morning. Acquiring a Practical Data-Based Investment Framework: Master institutional-level data analysis and risk management capabilities based on source code currently in actual operation.

Even if you are new to design, you can complete your own brand logo in just 60 minutes. This is an introductory logo design course using Canva and Figma, designed so that even non-majors can produce results by following along. ✔ How to express a brand concept through a logo ✔ Understanding the criteria for selecting colors and fonts ✔ Applying basic principles of logo design ✔ Creating outputs that can be used across various platforms Experience logo design created through logic, not just intuition.

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.

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.

We invite you to the fascinating world of coding where you analyze and visualize financial statements using only prompts. Without a single line of code, you create and deploy a service in consultation with AI.

Document (SDD) → Code Automation. Make the system work instead of typing prompts. Build your own AI development agent with Skills, Sub-agents, and Commands, and complete monetization services through 5 real-world projects.

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 course is designed for those who use AI but are confused about how much they can trust it. It covers how to use AI in your work or creative process without overdoing it, ensuring it provides actual value. Rather than requiring professional development knowledge or complex tools, it focuses on how anyone can effectively integrate AI into their own workflow. Instead of teaching complex prompt engineering, the course focuses on the mindset of **knowing when to use AI and when it's better not to**, as well as **how to verify and refine AI outputs** rather than trusting them blindly. Through this course, you will establish criteria for using AI not as an automation tool that replaces everything, but as a **practical partner** that helps organize your thoughts and assists in your work.

From coding basics to running your own web service all at once?! Web Build All-in-One, connecting fundamentals and practical application.

Are you still wondering about the new design tool called Figma? If you follow each step easily and quickly, you will soon become a Figma expert!

You can enhance your mobile web production skills, which are the most competitive assets for publisher employment and practical publishing work. You will be able to solidify almost all production methods and know-how required to create mobile webs as a publisher. In particular, to cover much of the design ability required of publishers and developers these days, we have provided detailed explanations of the process of working on mobile web UI design using Figma. A key strength of this mobile web publishing course is the detailed instruction on how to create HTML wireframes for every single page. Through this lecture, your ability to create HTML wireframes will improve significantly. In mobile web publishing, you will acquire practical skills comparable to real-world work by learning how to perfectly adjust layouts for mobile and tablet devices using CSS variables (Var). You will fully develop intermediate-to-advanced practical CSS skills, centered around Flex layouts.

This course conducts hands-on practice related to Diffusion models among generative artificial intelligence models. By reading and implementing the prompt-to-prompt paper, which is a representative Diffusion model application paper, we expect to cultivate the ability to understand the latest artificial intelligence papers.

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.

In an era where AI writes code for you, will you remain a 'Coder' or leap forward to become an 'Architect'? This course is designed for junior developers who can handle basic implementation but feel stuck about the next steps or are anxious about falling into the trap of 'fake experience'. We aim to go beyond simply learning clean architecture theory and turn Robert C. Martin's (Uncle Bob) high-level design principles into weapons for the AI era.

This course covers essential CS knowledge for Claude Code AX development. It is a lecture designed for easy understanding through interactive teaching materials.