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!

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.

This is a practical introductory course for those who are new to or lack the basics of mobile UX/UI design. Learn step by step through basic theories and various practical exercises to gain practical app design skills and build your confidence! 💪

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?

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.

From basics to practical application, an all-in-one UI design class mastering everything with Figma! Master essential features like Auto Layout and Components, along with responsive design, efficient handoff, and collaboration skills for real-world work. Start now and upgrade your design capabilities to the next level!

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

For over 15 years, Young Codi Kim, a star coding instructor, has been dedicated to coding education for elementary school students, high school students in IT software departments, university students in computer science, and job seekers without a major in the field. Now, you can experience Kim's easy and fun coding lectures not only offline but also online. With Young Codi Kim, who has trained over 500 front-end, back-end, full-stack, and web developers, your dream of becoming a developer will soon become a reality!

CSS is a designer's language that makes HTML look beautiful. I think CSS is like a brush stroke for those who produce digital content. In this lesson, I will teach you how to use a digital brush stroke.

“GSAP is capable of this?” Breaks the stereotype that animation is complex and difficult.

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 get a job, you need to go on interviews frequently. To secure those interviews, having a high-quality personal publisher portfolio website is essential. This is a premium guide (PDF) for creating a personal portfolio website, meticulously crafted by Coding Works. The content in this guide cannot be found through simple Google searches. It is a one-of-a-kind guide (PDF) for building a publisher job-search portfolio, containing detailed methods developed by Coding Works through years of experience teaching publishing theory, practical skills, and portfolio creation to over 300 students to help them get hired quickly by their desired companies.

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

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 "Real Guide for Getting a Job as a Publisher" e-book (PDF) provides detailed information on the HTML+CSS+JQUERY publishing fundamentals essential for employment. It covers efficient publishing study methods, how to identify high-quality courses and instructors, tips for publishing like a professional even as a newcomer, desirable coding habits and principles, how to create a personal portfolio website, collaboration tips for working with designers and developers, essential websites every publisher should know, and how to improve Photoshop UI design skills. Additionally, it provides a detailed explanation of government-funded publisher training programs.

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.

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.

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.