From Figma design to publishing

TypeScript: Core concepts, from basic to practical, all at once! Practical application through a project.

Practical web UI development using AI and component-centric UI creation, An essential course for Designers + Developers!

From developing your own full-stack application to a Progressive Web App (PWA)!

Systematic step-by-step project practice and deployment, built-in store utilization, full-stack application with SvelteKit and Supabase, all in one go!

Draw simple pictures using SVG and apply them to your site. Applying this to your portfolio will make your page stand out.

jQuery, the JavaScript library used by over 75% of websites worldwide! This course is designed to help you build a solid foundation by understanding the principles rather than just flashy effects. Learn everything from jQuery basics to advanced applications to complete your own portfolio or apply it directly in the field.

To create a webpage, you need to be able to build individual components piece by piece. Let's create UI components using pure coding. Recommended for those who know how to use HTML, CSS, and JavaScript.

This course covers the basics of HTML grammar. There are missions for various cases, and we will teach you the latest grammar that can be used in practice.

In an environment without a design team, product proposals, or a PM, how can we plan, deliver, and persuade? Kim Young-jun, former 29CM Product Design Lead, will share his self-product strategy focusing on Figma, along with practical case studies. Learn in detail everything from how to survive in a structureless environment to how to build structure with just Figma.

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.

Now, with the power of AI, anyone can easily plan apps and design UIs! It's okay even if you don't know coding or have no UI experience. AI tools like Claude and ChatGPT will turn your ideas into reality. With just a few questions, you can analyze target customers, design app structures, and even automatically generate UI screens. In this lecture, we will teach you step-by-step from the basics so that even those who are new to Figma can follow along. Even without drawing by hand, you can import existing website UIs at once with the HTML to Design plugin, and with AI tools like Google Stitch or readdy.ai, you can create high-quality screens in a few seconds. This lecture is perfect for anyone dreaming of starting a business, wanting to switch careers to a planner, or wishing to communicate with developers. Instead of complex theories, we will only teach practical know-how that you can immediately use. Now, with just an idea, anyone can plan app services!

Even if you are not a major or a designer, you will learn how to directly create and modify web UIs, proposals, and design systems using Claude Design and Figma. To ensure immediate application in practice, the course proceeds step-by-step with a focus on hands-on practice—covering everything from the differences between Claude Code and Claude Design to installation, plugin utilization, component-based UI production, design modification, and methods for applying them to live services. This lecture is designed to help developers, planners, and marketers who found design tools difficult to experience rapid result-making through AI and component-based workflows.

This course introduces the core concepts and basic syntax of HTML, the most fundamental element of website creation. It is designed so that even beginners with no prior knowledge can easily follow along.

You can learn HTML & HTML5, which are essential for creating responsive web pages.

We introduce the main concepts and basic grammar of CSS, a language that is absolutely necessary for decorating websites beautifully. Even those who are just starting to code with HTML can easily understand it.

How are product design and education changing in the AI era? Figma Official Community, FoF Seoul & Educators jointly hosted a meetup. Discover various cases and topics on AI-era product design and education, along with relevant sessions from global industry speakers who love Figma.

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?

We will create various pattern image effects that complete the scattered image pieces into one image using JavaScript and CSS and process them to appear randomly. I think that if you apply this lesson, you will be able to create your own unique effects!

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.

We have created this so that anyone can pass the 2023 version of the Web Design Function Exam Criteria. Let's learn the 5 types and pass quickly!

Did design seem difficult and Figma look complicated? We are now in an era where even non-designers can create screens themselves! From basic functions like shapes, text, and masks to background removal, AI image generation, and automated UI creation—learn how to naturally integrate Figma's AI features into your professional workflow. From creating landing pages to configuring shopping mall UI screens, experience a practical way to use Figma that allows you to complete results without a designer's help. Point 1. You can create screens yourself just by mastering Figma's core functions - Practice-oriented learning of essential drawing functions such as frames, shapes, text, and masks - Experience completing a full project by creating every section of a landing page from start to finish Point 2. Drastically reduce work speed using Figma AI - Naturally utilize AI features like background removal, image generation, and layer organization within the workflow - Focused on application methods connected to actual design tasks, not just simple feature introductions Point 3. Acquire practical design sense by creating shopping mall UIs - Create UI screen sets using Auto Layout, Components, and the Make Designs feature - Learn practical skills that enable non-designers to design and complete screens on their own

Coding Works has put its heart and soul into creating this course based on its experience of mentoring over 200 offline academy students on their new publisher job portfolios. The course on creating a publisher ‘personal portfolio website’ that will get you interviews and jobs is a thorough guide that tells you how and where to start preparing your personal portfolio website, which is essential for getting a job as a publisher. The course contains over 19 hours of content. It covers all the essential publishing requirements before creating a personal portfolio website, the publishing basics that are most important for getting a job and working in the field, jQuery and JavaScript & coding missions for getting a job, how to create portfolio results to put on your personal portfolio website, content layouts and details for each section of your personal portfolio website, how to distinguish companies to apply to, and tips for real publisher interviews.

This is a specialized practical exam lecture optimized for the Web Design & Development Craftsman (formerly Web Design Craftsman) practical exam, strictly adhering to the exam standards effective from January 1, 2025, to December 31, 2027. Coding Works' Web Design & Development Craftsman practical exam lectures, covering HTML+CSS+JQUERY publishing, are different. It includes fully produced instructional videos for all exam types (Types A, B, C, D, E, and F) for the 2026 Web Design & Development Craftsman exam.

Full-stack course from Figma design to AI-powered coding and deployment!! [Figma + Vibe Coding (HTML/CSS/Tailwind/React) + Git + Vercel Deployment] Your design exactly as it is!! Complete it with Vibe Coding without a single pixel of error! A full-stack guide to increasing practical productivity by 5x using AI! You too can become a full-stack designer capable of both design and coding. ✅ Implement your design intent without a single pixel of error ✅ Design architecture that AI understands ✅ Prompt engineering skills to precisely control AI ✅ Ability to skillfully fix code generated by AI Experience the amazing reduction of time from design to coding and deployment by 1/5.