Figma Reference - Complete Guide to Creating a Responsive E-Commerce Website

Turn a Figma design into a fully realized, responsive website

Have you learned HTML, CSS, and JavaScript but
felt at a loss about “how to turn a finished design into an actual website”?

This course is not just a simple explanation of syntax;
it is a hands-on project course where you analyze a shopping mall design mockup created in Figma and implement it directly as a responsive website.

From how to read designs,
through image extraction, shared style configuration, layout design, interaction implementation, responsive handling, and final deployment,
you can learn step by step in line with the actual workflow.

Recommended for people like these

• Those who have learned the basics of HTML, CSS, JavaScript, and jQuery but
  lack experience creating a real website from start to finish

  
  

• Those who want to learn
  how to translate a Figma design into HTML structure and CSS styles

• Those preparing for a job as a web publisher or a portfolio who need
  hands-on experience creating responsive websites.

• For those who want to naturally master Grid, Flexbox, media queries, and container queries within a single project
  

Key topics covered in this course

1) Interpreting the Figma Design and Preparing the Project

Extract the images and styles needed from the design mockup,
and learn the workflow and preparation process for web publishing.

You will also learn how to separate the images, css, and js folders and create common files such as
common.html and common.css to build a project structure that is easy to maintain.

2) Setting Up Common Styles and the Basic Environment

Use reset.css and normalize.css to reset the browser’s default styles,
and learn how to systematically manage common design elements such as colors, fonts, and spacing by writing CSS variables and global styles.

It also includes applying Google Fonts,
so you can naturally recreate the feel of the actual design mockup on the web.

3) Designing Layouts with Grid and Flexbox

After analyzing the main areas of the website,
you will design and implement the main page structure by combining Grid and Flexbox.

It is designed to help you understand not only how to follow along with the code, but also how to divide and arrange each area in a design.

4) Implementing Interactions and Visual Effects

Rather than just creating static layouts,
you will also implement interactions that enhance the user experience yourself.

• A scroll-sticky effect implemented using pure CSS only

• Button animations using CSS and jQuery

• A review slider using Swiper.js

• Mobile menu toggle using jQuery

• Shopping Cart Toggle Interaction

Through this process, you will learn not only basic publishing but also
the sense of how to build dynamic web pages.

5) Completing the Responsive Website

Implement responsive CSS so the website naturally adapts to
PC, tablet, and mobile screens.

In particular, in this course, you will experience more flexible and modern responsive implementation methods by using
not only media queries but also container queries
.

6) Complete the Deployment

Organize the completed project and,
clean up unnecessary source files, then
deploy it as a real website via GitHub Pages or Netlify.

In other words, you will complete not just a “result that runs only on your computer,”
but also a portfolio project that you can actually share via a URL.

What You Can Gain After Taking the Course

After completing this course, you can expect to develop the following skills.

• Ability to interpret Figma designs and extract the necessary resources

• The ability to design practical project structures that include shared files and styles

• Ability to efficiently manage styles using CSS variables, web fonts, and global styles

• Ability to implement responsive layouts using Grid and Flexbox

• Ability to implement sliders and UI interactions using Swiper.js and jQuery

• Experience deploying static sites via GitHub Pages / Netlify

Project Environment Setup

• Install Essential Figma Plugins

  • Export Original Images

  • Export Styles to CSS Variables

  • Font Scanner

• Project File Structure

  • Create directories: images, css, js

  • Create common HTML and CSS files: common.html, common.css

Save the images needed for the website from the design, and write the styles and tags to be applied commonly in common.html and common.css to create a website that maintains consistency and is easy to maintain later.

Understanding Figma Designs

• Learn how to easily extract the images and styles you need from Figma.

• Learn the basics of implementing design mockups on the web.

In this course, you’ll learn how to write HTML structures and CSS styles by referring to the design while implementing the Home Page (main page).

Set Up the Basic File Structure

• Prepare for a clean start with reset.css and normalize.css.

• We will create a folder structure and common files for efficient work.

Configure the project by resetting HTML’s built-in properties with reset.css and using normalize.css to create a consistent UI across all browsers.

Setting up the basic styles

• Set frequently used colors and font sizes as variables.

• Apply beautiful fonts with Google Fonts.

Building the Layout

• Create flexible layouts with Grid and Flexbox.

• Design the main sections of the website.

Scroll Animation

• Let's use CSS properties to create an effect that keeps an element fixed while scrolling.

• Implement it purely with CSS, without writing any scripts.

  
  

Adding Life to Buttons

• Create a cool button effect with CSS and jQuery.

• Create a 3D button that makes people want to click it.

Create a review slider

• Create a fresh slider with Swiper.js.

• Create a slider that works well on all devices.

Implementing Interactive Features

• Let's create convenient cart functionality with jQuery.

• Complete a user-friendly cart design.

• Let's create a functional mobile menu.

Complete the responsive design

• Polish it so it works perfectly on all devices.

• Implement a convenient menu and cart for mobile devices, too.

Deploy

• Optimize your website’s performance.

• Showcase your work to the world with GitHub Pages or Netlify.

Organize recurring code for reuse and remove unnecessary source code.

Upload your static site to GitHub Pages or Netlify and deploy it so anyone can visit it.

Conclusion

This course does not involve implementing an actual online shopping mall. To implement a real shopping mall, integration with a database is required. Please continue studying backend languages and databases to learn about this aspect. In this course, you will complete the screens that end users will see by using HTML, CSS, and JavaScript (jQuery) as a web publisher, referring to the design.

After mastering this course, if you are interested in web development, check out the content below and challenge yourself to become a frontend or backend developer!

• JavaScript Frameworks/Libraries

  • react, vue.js, Angular

• Learn TypeScript

• Basic Understanding of Backend Development

  • REST APIs and HTTP request/response structure

  • How to work with JSON data

• Basic backend experience

  • Creating a simple server using Node.js and Express.js

  • Database connections (MongoDB, Firebase, MySQL, etc.)