강의

멘토링

로드맵

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,514

Learners

49

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

    Limited time deal ends in 3 days

    $6,050.00

    23%

    $51.70

    ezweb's other courses

    Check out other courses by the instructor!

    Similar courses

    Explore other courses in the same field!