Graphic Designer,Yunseo Go_고윤서 Details
Class Intro
Have you been hesitant to start because programming seems too difficult, or because you lack experience?

Web Design & Coding Glossary
What are HTML / CSS / JavaScript?
In this course, HTML assigns structure and meaning to the web, CSS decorates the appearance on the web, and JavaScript handles browser event processing and manipulation.
What is Visual Studio Code?
It is a source code editor that helps you edit code more conveniently, allowing users to modify the editor's themes, shortcuts, and settings.
Class Perks
Get These Coloso Exclusives
-
Unlimited Access to All 21 Classes -
Original Practice Example Files (fig) -
Original Source Code for Practice Examples (HTML, CSS, JavaScript)
Expert Graphic Designer Yunseo Go's Portfolio
Why Take This Class?
This is not just a web development class that ends with a simple exercise of applying your design on a website.
This online class for ""interactive web design/development"" provides an in-depth user experience where users and graphics on the website interact in real-time.
Through this class from graphic designer Yunseo Go, who has been responsible for numerous interactive websites such as Naver, Amnesty, and the Seoul Independent Film Festival, you can directly learn from 7 interactive website examples that combine not only design but also coding, motion, and web publishing.
This premium class is perfect for everyone—from graphic designers who want to enter the coding field to current developers who want to develop their design and publishing skills. Check it out on Coloso now!

7 Class Exercises
Yunseo Go
Graphic Designer
Hello, I'm Yunseo Go, CEO of Design Studio YYY.
I've worked as a designer and developer at the design studio "Everyday Practice." Then later while at graphic web experiment group HHHA, I focused on creating designs that offer a familiar user experience while standing out.
Currently, I produce various products that provide more direct solutions to make interactive websites more widely popular.
In addition to development and design, I also share my own experience and expertise through various lectures and workshops.


Graphic Designer, Yunseo Go
[Current]
CEO of Creative Design Studio YYY
Member of non-profit graphic web experiment group HHHA
[Previous]
Designer/Developer at Graphic Design Studio Everyday Practice
Designer/Developer at Allmytour Corporation
Projects & Awards
[Websites]
Naver Nanum Square Neo (Development)
Cine21 Report (Interaction Design/Development)
SuJangGo (Development)
2021 Seoul Urban Architecture Biennale (Development)
Seoul Independent Film Festival Website (Development)
Seoul Design Festival (Development)
Art Space (Development)
[Exhibitions]
2022 [POST-IT], Same Gallery, Tokyo, Japan
2022.11 [Garden.Local], Boan1942, Seoul
[Awards]
Asia Design Prize 2021, 2022
[Lectures/Interviews]
2022 Typography Society of Korea T/SCHOOL 2022
2022 Monthly [Design] October 2022 Issue Cover and “Rebelling Against Perfection” Section - YYY Yunseo Go
2022 Choi Tae-yoon Studio Interactive Coding Class Artist Talk
2022 It's Nice That
2022 Monthly [Design] April 2022 Issue Filling Design from A to Z, Alphabet Project, HHHA
Class Highlights
Introduction to Creative Coding Based on Experimental Graphic Design
Learn the concepts of HTML, CSS, and JavaScript to build the framework for website operation, create various sites with interactive elements, and emphasize the design on a website, .

Mastering the Web Design and Development Process with 7 Exercises
Design an interactive website that responds to user inputs with creative designs, and learn the practical work process step-by-step through 7 diverse examples.

Understanding and Learning About Digital Interactions
Learn how to implement two-way communication content that is completed through user interaction, allowing graphic design to be freely explored within a web space.

Class Details
You'll Learn
-
Web Development Basics and Applications of Various InteractionsLearn the basics of web development for designers, HTML, CSS, JavaScript, and discover types and examples of web interaction.
-
Responsive Websites According to Device SizeLearn about CSS units and queries to create websites that are convenient for users on various devices, and learn in screen typography necessary for implementing websites with a lot of text.
-
Designing an Outstanding Linktree Business Card and PageAfter extracting design sources in Figma, create a website that displays differently with each visit through various blend modes, animations, and function usage.
-
Weather Poster Example with APILearn the basic concept of API through weather data, and implement dynamic graphics on the web based on the data received.
-
Websites Where Users Create and Share PostersLearn about the HTML canvas and make a web canvas. Discover how to host your website and share it externally through Google Firebase.
-
Potential and Efficient Development Expertise of Interactive WebExplore a variety of contents that can be expressed through interactive web, and dive into the mindset, direction of study, and methods to efficiently shorten development process/time.
(자동 구성) 가격이 인상됩니다.
Curriculum
In-Depth Look
SECTION 01. Intro
01. Identifying Problems with Your Drawings
- What is an interactive web, and what can be done on the web
- Tools used, introduction to languages we will learn
02. Design Tool and Plugin Installation & Development Environment Setup
- Installing HTML Live Viewer plugin
- Installing plugins for using CSS preprocessors
- Installing Node.js, npm
- Customizing the VS Code environment
SECTION 02. The First Step in Web Development: Looking at HTML, CSS, JavaScript
03. Building a Responsive Website 01: Websites with Lots of Text
- Analyzing the design file (font size, spacing, grid)
- What is HTML: Understanding HTML markup and tags
- What is CSS: Connecting CSS
- What is CDN: Connecting fonts
04. Building a Responsive Website 02: Websites with Lots of Text
- Previewing styles with Inspector (viewing with Figma)
- Understanding CSS units (px, rem, em, vw, vh)
- Styling with CSS according to the grid
- Implementing responsiveness with media queries
05. Building a Web Business Card 01: Websites with Little Text
- Analyzing the design file (font size, spacing, grid)
- How to export assets from design programs
- HTML Markup, Tag Recap
- Navigating sites
06. Building a Web Business Card 02: Websites with Little Text
- Basics of HTML SVG tags
- CSS Keyframe Animation
- What is JavaScript, connecting JavaScript
- JavaScript variables and functions, and data types
07. Building a Web Business Card 03: Websites with Little Text
- Understanding JavaScript Math.random()
- Manipulating the DOM with JavaScript
SECTION 03. Building a Website That Responds to Weather
08. Creating a Web Poster That Responds to Weather Using a Weather API 01
- Analyzing the design file (font size, spacing, grid)
- Applying SVG vector designs to the website as is
- HTML Markup 01
- CSS Styling 01
09. Creating a Web Poster That Responds to Weather Using a Weather API 02
- HTML Markup 02
- CSS Styling 02
10. Creating a Web Poster That Responds to Weather Using a Weather API 03
- Understanding JavaScript Event Listeners (1)
- Manipulating DOM style according to events
11. Creating a Web Poster That Responds to Weather Using a Weather API 04
- Understanding JavaScript Event Listeners (2)
- Creating and deleting DOM according to events
12. Creating a Web Poster That Responds to Weather Using a Weather API 05
- Understanding APIs, and json
- HTTP Request Method
- Receiving weather information with the OpenWeather API
13. Creating a Web Poster That Responds to Weather Using a Weather API 06
- Implementing visuals according to the API
SECTION 04. Creating a Web Canvas and Building a Website for Sharing Images
14. Creating a Web Canvas and Sharing Images on a Website 01
- Analyzing the design file (font size, spacing, grid)
- Installing and operating Firebase
- Setting up and deploying Firebase Hosting
- HTML Markup
- CSS Styling
15. Creating a Web Canvas and Sharing Images on a Website 02
- HTML Markup
- CSS Styling
- Connecting JavaScript
16. Creating a Web Canvas and Sharing Images on a Website 03
- JavaScript Event Listener
- JavaScript and HTML canvas
17. Creating a Web Canvas and Sharing Images on a Website 04
- JavaScript and HTML canvas (2)
- Saving images from HTML canvas
18. Creating a Web Canvas and Sharing Images on a Website 05
- Setting up Firebase Cloud Storage
- Uploading images to Firebase Cloud Storage
19. Creating a Web Canvas and Sharing Images on a Website 06
- Retrieving data from Firebase Cloud Storage
SECTION 05. Epilogue: At the Crossroads Between Designer and Developer
20. Appendix
- Organizing and managing code files
- Setting up the environment for each work folder by changing settings.json
- Other tips
21. Introduction to Study Direction
- Examining the structure of different interactive websites
- Looking at paths and directions for learning web development
*The release date of this class, curriculum images, and associated content can be changed without prior notice.
** Class videos may be seperated for a more streamlined viewing experience
Interview with
Graphic Designer Yunseo Go

What do you think your strength is in the “web design” field?
I work in both the realms of design and web development simultaneously. Understanding the way websites work and modes of communication with users allows me to consider both the typical user experience and areas that stand out. Having held both positions in practice, I can offer knowledge on what capabilities each area requires and how to create standout interaction designs.
What is special about this course?
This course focuses on unique graphic design and the practical creation of websites that make it a reality. It covers understanding and usage of digital device interaction, as well as in-depth aspects of web development from the basics to the use of APIs. Even those new to coding will be able to create their unique websites and experience the development stages of researching and applying interactions themselves.
What would you like to say to the students?
As various digital devices become more widespread, the domain of interactive websites is expanding beyond static designs.Instead of constructing websites under fixed templates, launching of unique and distinctive websites is now in progress. This course will guide you right from the beginning to make your designs a reality, becoming a unique and appealing tool for you to utilize.
Required Programs
This course will use
- Figma 2022 (116.4.4.)
- Visual Studio Code
- Adobe Illustrator 2023
- Node.js 18.12.1
Please purchase and install these program(s) for an optimized lecture experience.
* Previous versions of Figma can be used, but jNode.js Version 15 or higher must be used.
* An Adobe license is required to utilize Adobe Typekit, but the class will cover how to embed other fonts or use system fonts.
*These programs and/or materials will not be provided with the lecture.

Recommended Class
Like this class?
Then check these out!
[IMPORTANT NOTICE]
*Please note that the information on this page is subject to change without prior notice.
*Would you like to learn more about our refund policy? Please check here.
*Please check our FAQ for Copyright and Proprietary Rights, User-Generated Content, Security, and Violation information.