Complete a Responsive Web Portfolio in 4 Hours with Figma MCP × AI

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

[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.

Real! Website Creation! Step By Step Application Course This is a course to create the main page of Ystudio (http://www.ystudio.co.kr/) using html/CSS/jQuery and plug_in. (Complete lecture file attached!)

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.

This is a practical course for creating a website (Hanwha Chemical/Solution) using HTML5 and CSS3. This is a practical course for creating a web page! Step by Step! To fully understand and utilize PC mode layout and responsive page creation. (Attached is the completed lecture file!)

[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).

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

Let's create an interactive, responsive web portfolio that reacts to scrolling using GSAP's ScrollTrigger!

Real! Website production Step By Step! This is a process of making the main page of Phomein (https://www.phomein.com/brand/main/main.do) as it is. This is a process of making and implementing the gorgeous interactive web contained in the site as it is, and it will teach you the practical core know-how to easily and quickly make even complex layouts^^

Real! Website Creation Step By Step! This is an introductory course, where you can learn the concepts of HTML and CSS while creating various basic layouts.

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 practical web development project course where you complete everything from planning and design to implementation and deployment using generative AI. You will create designs using Stitch and Figma Make, generate code with AI Studio, and deploy them as actual services. Even if you don't know much about coding, you will learn how to develop alongside AI and complete your own AI web app. Now, you too can become a developer who collaborates with AI.

"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.

Currently, Android development can be done using both Java and Kotlin. You can develop the same Android applications regardless of which language you choose. This course covers most aspects of Android application development, from basics to advanced topics, and all code is written using Kotlin starting from the fundamentals. Additionally, it utilizes Google's latest UI library, Material 3. This course involves completing three projects throughout the entire Android curriculum. By working on these projects, you can master advanced techniques actually used in the industry, such as Hilt, Retrofit, Room Database, and MVVM. Furthermore, you can increase productivity using AI by performing "vibe coding" with Gemini within the Android development tools. Soft Campus will always strive to provide the most up-to-date lectures.

Do you want to master responsive design by effectively utilizing Figma's Auto Layout, Grid, and Constraints features? In this lecture, you will gradually develop the skills to create responsive designs, from small UI elements to cards, tables, components, and web and app screens. Learn how to use Figma immediately for job preparation and practical work, and master the ability to design responsive interfaces optimized for various devices!

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

An essential lecture for those who want to become product designers or are preparing for UX employment/career changes! Based on real-world experience, I will guide you through everything from project selection to slide planning and design to help you create a portfolio that demonstrates problem-solving skills.

This is an applied web planning course that will teach you how the basic web planning course is applied to mid-to-large-scale projects and applied to practice. Students can master the skills and practices of each stage of web planning in the big data field. <<This VOD is a recording of an actual class and includes some sounds such as small talk, so please keep this in mind when purchasing~!>>

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.

While LLMs are currently transforming the development environment, what truly matters is not just "writing code on your behalf" but integrating them as features into a service. This course provides a step-by-step guide to implementing a lightweight yet polished Tarot reading service using Next.js and the OpenAI API. In the first stage, we will build an MVP that works without a backend, connecting the user input flow (questions/threads/card selection) to result generation. In subsequent stages, we will expand the functionality by building a backend, implementing general login and OAuth, adding community features, and creating a reading dashboard. Finally, we will conclude by deploying to AWS and integrating Google AdSense to complete a service ready for actual operation. Additionally, we will cover understanding pricing structures and cost optimization strategies to ensure that LLM API usage costs do not become a burden.

Let's create an interactive, responsive web portfolio that reacts to scrolling using GSAP's ScrollTrigger!

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.

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 current startup CTO will share vibe coding knowledge gained through actual services and various outsourcing projects.

This course provides UX principles and practical know-how necessary for planning and designing AI products. We will explore user-value-centered AI utilization methods, UX planning and design methods using AI, core UX principles and theories learned through everyday design cases, and UX research and data analysis methods for providing a better experience.

How long will you keep struggling with repetitive daily research and document writing? I, too, was an ordinary office worker who worked overtime every day trying to find key insights amidst an overflow of information. However, after integrating Gemini 3 into my workflow, I experienced a significant increase in work speed. Boost your productivity by utilizing Gemini in your tasks.

Now your imagination becomes the best game design document! With AI, you can complete your first game by having fun conversations as if assembling LEGO blocks. Try using Google Gemini Pro for free!

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.

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.

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.

This course covers the entire process of designing and implementing generative AI services centered on LangChain 1.0 and LangGraph through step-by-step hands-on practice. Beyond simple LLM calls, you'll directly implement operational AI system architectures that include agent-based architecture, state management, memory, streaming, middleware, and Human-in-the-Loop. Through hands-on practice with document/PDF/web data-based RAG systems, SQL Agent (Chinook DB), tool-calling-based Agents, Supervisor pattern multi-agents, and state machine-based workflows using LangGraph Graph API, you'll build reusable agent pipelines that can be immediately applied in real-world scenarios. Additionally, through structured output (Pydantic-based), agent middleware (Summarization, HITL, Retry, PII protection), and token/step-by-step streaming, you'll complete generative AI applications with the stability, scalability, and controllability required in actual services. 👉 For those who want to accurately understand the internal structure and execution flow of LangChain/LangGraph 👉 For those who want to implement RAG·Agent as a real service structure, not just a "demo" 👉 This is the optimal course for those who need a realistic practical roadmap covering state-based agents, SQL·document automation, and multi-agent orchestration.