This course Starting with Figma design, we will guide you step by step through the entire process of completing a web page with only HTML, CSS, and JavaScript without AI helpI will.

How to interpret design proposals, organize images, and link them to structured HTML, maintainable CSS, and JavaScript, which is responsible for operation Just like the actual publishing flow You can experience it.

It's not just a course to follow along,

“Why write code like this”,

Focus on “What to judge first when transferring a design to code”

Designed so that web publishers and front-end beginners can naturally learn the thought process they must knowIt's there.

We will proceed step by step from the basics so that even beginners can feel free to get started,

Through practice-oriented learning Ability to immediately think of code structure when you look at designThe goal is

Through this course, beyond simple implementation, The ability to publish on the web in the real worldIt will be equipped with

Fully implement your design as a web page!

Learning goals

I understand the process of implementing Figma designs on the web.
Learn how to analyze design files and apply them to web publishing.
Learn the basic concepts and practical skills of web publishing.
Learn markup and styling techniques using HTML and CSS.
Learn how to save and optimize images for the web in Figma.
Choose the right image format and learn how to optimize images for web performance.
Improve your ability to write code that takes web standards and accessibility into account.
Learn to provide consistent UI/UX in various environments.
Develop the ability to implement headers and navigation bars.
Learn how to apply navigation bar and header designs to web pages.
Learn how to apply design elements such as fonts, colors, and button styles.
Practice how to maintain a consistent website design.
Learn how to apply animation and dynamic effects.
Use CSS animations and transition effects to improve the user experience.
Learn optimization techniques that take web performance into account.
Learn how to make code more efficient and improve performance.
Strengthen practical skills by completing practical projects.
Based on what you've learned, you'll create your own website and develop your publishing skills.

Are you aiming to become a web publisher or front-end developer?

Then leave the design to the designer and focus on implementing it by referring to the finished design.

This course uses free designs from Pygma's community.

Design file address: https://www.figma.com/community/file/1383362001941293031

디자인 참조 웹사이트 구현하기

Key learning content

Understanding the basic concepts of web publishing

디자인 참조 웹사이트 구현하기

Web publishing is the process of implementing a design in HTML and CSS. Learn how to write code that takes web standards and accessibility into account, and learn how to analyze design files and design markup structures. Also, learn how to write code that is easy to maintain so that it can be used in practice.

How to save and use images in Figma

Figma에서 이미지 저장 및 활용법

Learn how to select and save image formats suitable for web publishing in Figma. Understand the differences between PNG, JPG, and SVG, and learn how to optimize resolution and improve web performance. Through this, you'll learn techniques to naturally apply design to websites.

Create a basic HTML structure

HTML 기본 구조 작성

Learn how to create the basic structure of a website using HTML. Learn the principles of using semantic tags to consider accessibility and design easy-to-maintain markup. This will teach you how to write efficient code that complies with web standards.

Implementing a header and navigation bar

Learn how to implement a website's header and navigation bar using HTML and CSS. Learn the principles of appropriately arranging logos, menus, and icons, and designing them so that users can easily navigate. You'll also learn how to apply navigation bar styles and maintain a consistent design across devices.

Header 및 Navigation 바 구현

CSS styling and layout settings

CSS 스타일링 및 레이아웃 설정

Learn how to style and configure the layout of a website using CSS. Learn techniques for arranging and arranging content using Flexbox and Grid, and learn how to implement intuitive designs. Also, learn how to apply styles that are easy to maintain so that they can be used in practice.

Apply fonts, colors, and background images

폰트, 색상, 배경 이미지 적용

Learn how to apply appropriate fonts, colors, and background images to improve the readability and design of a website. Learn how to use web fonts and learn techniques to maintain web performance by optimizing background images.

Add buttons and animation effects

Learn how to apply button styles and add various animation effects to enhance the user experience on a website. Learn techniques to create natural interactions by using CSS to implement button hover and click effects, and applying transitions and keyframe animations. Through this, you will improve visual completeness and learn how to effectively use dynamic web elements.

버튼 및 애니메이션

스크롤 애니매이션, 넘버 애니메이션

Implement a variety of slides

Learn how to implement slides that dynamically display images or content on a website. Learn techniques for applying automatic slides in Shanghai and left and right using CSS and JavaScript, and learn the principles of designing slide designs that take UX into consideration.

다양한 슬라이드 구현

Sample files and completed versions are provided.

Provides an explanation of all the attributes of flex and an example file for practice.

Please check the course materials in the second and final sessions.

Try web development without AI help (with javascript)

Try web development without AI help (with javascript)