Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
Programming

/

Web Development

Mastering Web Publishing: Figma to Web with JavaScript

This lecture provides a step-by-step explanation of the process of implementing a Figma design into a web page. It covers the entire web publishing practice, from saving images to writing HTML, CSS, and Javascript. It is systematically designed to be easy for beginners to follow. Through practice-oriented learning, you can learn how to efficiently convert web designs into code.

(4.0) 1 reviews

11 learners

  • ezweb
웹퍼블리싱
Figma
javascript
자격증
시험
HTML/CSS
JavaScript

What you will learn!

  • How to Save and Optimize Images for Web in Figma

  • HTML Structure Design and Efficient Markup Practices

  • CSS Basic Styling and Reset

  • How to Utilize Flexbox Layout

  • Applying buttons, icons, and animation effects

  • Publishing with consideration for web standards and accessibility.

Bring your designs to life on a perfect webpage!

By referencing Figma designs, you will learn how to implement various layouts, various design elements, and planning intent into web pages.

Learning Objectives

  • Understand the process of implementing Figma designs for 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.


    Learn how to choose the right image format and optimize your images for web performance.



  • Improve your ability to write code that takes web standards and accessibility into account.
    Learn how to provide consistent UI/UX in various environments.



  • Develop your ability to implement header and navigation bars.
    Learn how to apply navigation bar and header designs to your web pages.



  • Learn how to apply design elements like fonts, colors, and button styles.


    Learn how to keep your website design consistent.



  • Learn how to apply animations and dynamic effects.
    Improve user experience by leveraging CSS animations and transition effects.



  • Learn optimization techniques that take web performance into account.
    Learn how to make your code more efficient and improve performance.

  • Build your practical skills by completing real-world projects.
    Based on what you have learned, you will create your own website and develop publishing capabilities.


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 completed design.

In this tutorial, we will use free designs from the Figma community.

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



Key Learning Contents

First half (1st to 5th period)

Understanding the basic concepts of web publishing

Web publishing is the process of implementing designs with HTML and CSS. You will learn how to write code that takes into account web standards and accessibility, and learn how to interpret design files and design markup structures. You will also learn how to write code that is easy to maintain so that you can use it in your work.

How to save and use images in Figma

Learn how to choose and save image formats suitable for web publishing in Figma. Understand the differences between PNG, JPG, and SVG, and learn how to optimize for resolution and improve web performance. This will teach you the skills to seamlessly adapt your designs to your website.

Writing the basic structure of HTML

Learn how to build the basic structure of a website using HTML. Learn the principles of designing markup that is accessible and easy to maintain using semantic tags. Learn how to write efficient code that complies with web standards.

Middle part (6th to 15th period)

Implementing Header and Navigation Bar

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


CSS styling and layout settings


Learn how to style and layout your website using CSS. Learn techniques for aligning and positioning content using Flexbox and Grid, and learn how to implement intuitive designs. You will also learn how to apply styles that are easy to maintain, so that you can apply them 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 your website. Learn how to use web fonts and techniques to optimize background images to maintain web performance.

Second half (16th to 23rd periods)

Add buttons and animation effects

Learn how to apply button styles and add various animation effects to enhance the user experience on your website. Learn how to implement hover and click effects for buttons using CSS, and apply transitions and keyframe animations to create natural interactions. This will help you improve visual completeness and learn how to effectively utilize dynamic web elements.

Mouse hover animation

Scroll animation, number animation

Implementing various slides

Learn how to implement slides that dynamically display images or content on a website. Learn techniques for applying vertical and horizontal auto-slides using CSS and JavaScript, and learn the principles of designing slide designs that take UX into account.

javascript slide implementation

Sample files and finished versions are provided.

Provides descriptions and practice example files for all properties of flex.

Please check the lecture materials for the 2nd and final lectures.

We provide a PDF summary of the key points.

Provides descriptions and links to practical examples for all flex properties.


Communication window (survey, 1:1 open chat room)

Students can provide their opinions and questions at any time through the Google survey and 1:1 open chat room introduced in the What's New section.


Recommended for
these people

Who is this course right for?

  • Anyone who wants to learn web publishing using Figma.

  • Designer looking to learn how to convert web designs into websites.

  • Web developers looking to improve their front-end development skills in a practical setting.

  • Learners who have a grasp of basic HTML/CSS and want to work on real-world projects.

  • Students and job seekers who want to create a portfolio website

Hello
This is

2,509

Learners

48

Reviews

3

Answers

4.9

Rating

8

Courses

■ [현재] 그린컴퓨터아트학원 웹퍼블리싱, 프론트엔드 강의
■ [현재] 웹 퍼블리싱 유튜브 채널 'Rock's Easyweb' 운영
■ 더조은 컴퓨터아카데미 웹 퍼블리싱 강사
■ 한빛 컴퓨터아카데미 웹 퍼블리싱 강사
■ 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사
■ UI/UX 웹 디자인 포트폴리오 강의


[ 도서 ]
2021.07.19 출간 / 웹디자인 & 웹퍼블리싱을 위한 피그마 완벽 활용서 / 비제이퍼블릭

2022.08.25 출간  / 코딩을 처음이라 with 웹 퍼블리싱  / 영진출판사

2023.10 출간 /2024 SD에듀 유선배 웹디자인기능사 실기 과외노트 / 시대고시기획

2024.11 재판 /2025 SD에듀 유선배 웹디자인기능사 실기 과외노트 / 시대고시기획

 

[ 수상경력 ]
2022.08 그린컴퓨터 아트 학원 종로지점 - 우수강사 2021.06 그린컴퓨터 아트 학원 종로지점 - 우수강사 2018.06 그린 컴퓨터아카데미 신촌 지점 - 우수강사 2017.05 그린 컴퓨터아카데미 신촌 지점 - 우수강사 2016.05 그린 컴퓨터아카데미 신촌 지점 - 우수강사 2015.10 그린 컴퓨터아카데미 신촌 지점 - 우수강사 

 

 

 

Curriculum

All

23 lectures ∙ (7hr 16min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

1 reviews

4.0

1 reviews

  • racoon726235님의 프로필 이미지
    racoon726235

    Reviews 6

    Average Rating 4.8

    4

    30% enrolled

    $51.70

    ezweb's other courses

    Check out other courses by the instructor!

    Similar courses

    Explore other courses in the same field!