Hướng dẫn đầy đủ để tạo trang web mua sắm phản hồi bằng Figma

Name: Hướng dẫn đầy đủ để tạo trang web mua sắm phản hồi bằng Figma
Price: 55000 KRW
Rating: 4.8 (4 reviews)

Bạn có kiến thức cơ bản về HTML, CSS, JavaScript (jQuery) chưa? Nhưng bạn không biết cách tạo toàn bộ một trang web hoàn chỉnh? Vậy thì hãy thử thách bản thân bằng cách thực hiện trang chủ của một trang web bán hàng tham khảo một thiết kế có sẵn. Chúng tôi sẽ chia sẻ bí quyết để thực hiện một trang web bằng cách tham khảo một thiết kế hoàn chỉnh, nắm bắt ý định thiết kế và các chi tiết cụ thể.

(4.8) 4 đánh giá

36 học viên

ezweb

반응형웹

Figma

HTML/CSS

JavaScript

jQuery

Đánh giá từ những học viên đầu tiên

Bạn sẽ nhận được điều này sau khi học.

Giải thích thiết kế Figma và trích xuất hình ảnh
Thiết lập ban đầu cho file HTML/CSS
Viết biến CSS và style toàn cục
Thiết lập sử dụng web font
Thiết kế bố cục: Sử dụng Grid và Flexbox
Triển khai CSS responsive bằng cách sử dụng Media Query
Triển khai CSS đáp ứng bằng cách sử dụng truy vấn container
Tạo slide đánh giá bằng Swiper.js
Thiết kế hiệu ứng trượt toggle cho menu di động và giỏ hàng bằng jQuery
Xuất bản trang web bằng GitHub Pages

Cài đặt các plugin cần thiết
- Xuất hình ảnh gốc
- Xuất Kiểu sang Biến CSS
- Máy quét phông chữ
Tổ chức các tập tin dự án
- Tạo thư mục: images , css , js
- Tạo các tệp HTML và CSS phổ biến: common.html , common.css

Trong quá trình thiết kế, chúng tôi lưu trữ các hình ảnh cần thiết cho trang web và viết các kiểu và thẻ thường dùng trong common.html và common.css để tạo ra một trang web nhất quán và dễ bảo trì trong tương lai.

Khóa học này không nhằm mục đích triển khai một trung tâm mua sắm thực tế. Để triển khai một trung tâm mua sắm thực tế, cần phải tích hợp với cơ sở dữ liệu. Đối với phần này, vui lòng tiến hành học thêm liên quan đến ngôn ngữ lập trình phụ trợ và cơ sở dữ liệu. Trong khóa học này, với tư cách là nhà xuất bản web, bạn sẽ tham khảo thiết kế và sử dụng HTML, CSS và Javascript (jQuery) để hoàn thiện màn hình mà người dùng cuối sẽ nhìn thấy.

Nếu bạn đã thành thạo khóa học này và quan tâm đến phát triển web, hãy xem nội dung bên dưới và thử thách bản thân trở thành nhà phát triển front-end hoặc back-end!

Khung/Thư viện JavaScript
- phản ứng, vue.js, Angular
Học TypeScript
Hiểu những điều cơ bản về phần phụ trợ
- Cấu trúc REST API và yêu cầu/phản hồi HTTP
- Cách xử lý dữ liệu JSON
Trải nghiệm backend đơn giản
- Tạo một máy chủ đơn giản bằng Node.js và Express.js
- Kết nối cơ sở dữ liệu (MongoDB, Firebase, MySQL, v.v.)

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

Người học có kiến thức cơ bản về HTML, CSS và jQuery.
Người mới bắt đầu phát triển với ít kinh nghiệm trong công việc publishing nhưng muốn hoàn thành một dự án thực tế.
Người chưa có kinh nghiệm sử dụng các công cụ thiết kế (Figma) nhưng muốn học.
Người học muốn tìm hiểu quy trình thực tế về triển khai web responsive và publishing.
Những người muốn học các nguyên tắc cơ bản của web publishing và phát triển front-end.
Dành cho những bạn đã có kiến thức cơ bản về coding nhưng gặp khó khăn trong việc áp dụng một cách tổng thể.

Cần biết trước khi bắt đầu?

HTML
CSS
JavaScript
jQuery

Xin chào
Đây là

2,624

Học viên

Đánh giá

Trả lời

4.9

Xếp hạng

Các khóa học

■ [현재] 그린컴퓨터아트학원 웹퍼블리싱, 프론트엔드 강의
■ [현재] 웹 퍼블리싱 유튜브 채널 '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 그린 컴퓨터아카데미 신촌 지점 - 우수강사

Chương trình giảng dạy

Tất cả

21 bài giảng ∙ (8giờ 39phút)

Tài liệu khóa học:

Tài liệu bài giảng

Phần 1. Chuẩn bị

5 bài giảng ∙ (2giờ 0phút)

1. Thứ tự thực hiện mã hóa tham chiếu thiết kế
09:53
2. Trích xuất hình ảnh từ thiết kế của bạn cho web
22:45
3. Khởi tạo CSS, tải và áp dụng phông chữ web, thiết lập thứ tự phông chữ
31:35
4. Kiểu chung - Màu sắc, nút, liên kết
22:54
5. Hiệu ứng chuyển động khi di chuột qua liên kết, kiểu dáng biểu mẫu
33:26

Phần 2. HTML, CSS theo từng phần

10 bài giảng ∙ (3giờ 19phút)

6. Cấu trúc HTML và CSS dùng cho bố cục
15:32
7. Phần tiêu đề html, css
14:07
8. HERO phần HTML
21:32
9. HERO phần CSS
23:56
10. Về chúng tôi, Lợi ích Phần HTML, CSS
23:12
11. Liên hệ với chúng tôi Phần HTML, CSS
29:19
12. Phần dịch vụ HTML, CSS
11:47
13. Trang trí đám cưới & sự kiện Phần HTML, CSS
05:33
14. Đánh giá phần HTML, CSS, SCRIPT trượt
33:56
15. Phần Footer HTML, CSS
20:58

Phần 3. HTML, CSS, JQUERY phản hồi

5 bài giảng ∙ (2giờ 17phút)

16. Phản hồi theo thiết bị PC ~ máy tính bảng
27:10
17. CSS cho phần bảng
29:18
18. Phần tương tác menu di động trên máy tính bảng
23:01
19. Giao diện tương tác giỏ hàng trên PC, máy tính bảng
29:02
20. Phản hồi theo thiết bị di động
29:19

Phần 4. phân phối

1 bài giảng ∙ (1giờ 1phút)

Ngày đăng:

Cập nhật lần cuối:

Đánh giá

Tất cả

4 đánh giá

4.8

4 đánh giá

bonggyeong9225
Đánh giá 1
∙
Đánh giá trung bình 4.0
4
38% đã tham gia
細かい部分まで気を遣われる姿が、真のデザイナー様の講義のようです
tomomo
Đánh giá 7
∙
Đánh giá trung bình 5.0
5
100% đã tham gia
figmaでサイトを作ってみると、とても役に立ちました。良い講義をありがとうございます。
- ezweb
  Giảng viên
  お役に立てて幸いです。今後とも、多くのご声援をよろしくお願いいたします。^^
skylove62557603
Đánh giá 10
∙
Đánh giá trung bình 5.0
5
100% đã tham gia
Figmaを参考にしてパブリッシングをする授業でしたが、実務経験ができる有用な経験になったと思います。最後のGitHubでのサイトのデプロイまで学ぶことができて有益でした。定石通りに丁寧に教えてくださいます！
- ezweb
  Giảng viên
  貴重な受講レビューありがとうございます。お役に立てたなら私も嬉しいです。ありがとうございます～
pcdoomco8345
Đánh giá 16
∙
Đánh giá trung bình 5.0
5
19% đã tham gia
承知いたしました。
- ezweb
  Giảng viên
  ありがとうございます。ご不明な点がございましたら、ご質問ください^^

1.162.383 ₫

Khóa học khác của ezweb

Hãy khám phá các khóa học khác của giảng viên!

CSS GRIDマスター：FIGMAデザインウェブ実装実践

ezweb

CSS Gridは、複雑なレイアウトも簡単かつ直感的に実装できる強力なツールです。今回の講義では、CSS Gridの核心概念から実践活用法まで段階別に分かりやすく学べるように構成しました。もう複雑なfloatやflexboxに縛られず、効率的なレイアウト設計の定石を学びましょう！今すぐ始めましょう！

Basic

HTML/CSS, jQuery, Figma

CSS GRIDマスター：FIGMAデザインウェブ実装実践

ezweb

React + TypeScript TodoList App - 実務型TypeScriptプロジェクト入門

ezweb

React + TypeScriptを活用して実務感覚で「タスク管理アプリ（ToDo List）」を直接作るプロジェクト中心のコースです。単純に文法を学ぶだけでなく、コンポーネント構造設計 → 状態管理 → 型適用 → 機能実装 → ローカルストレージ連携 → デプロイまで実際のサービス形態で完成させながらTypeScriptの活用感覚を身につけることができます。

Basic

HTML/CSS, JavaScript, React

React + TypeScript TodoList App - 実務型TypeScriptプロジェクト入門

ezweb

TypeScript入門 - 基礎からしっかりと

ezweb

タイプ安全性とコード可読性を向上させるTypeScriptの核心文法を実習中心で身につける入門コースです。プロジェクト環境設定からインターフェース、ジェネリック、ユーティリティタイプまで実際のコード事例で学習します。

Basic

JavaScript, TypeScript, vanilla-javascript

TypeScript入門 - 基礎からしっかりと

ezweb

ウェブパブリッシングマスター - figma to web with javascript

ezweb

この講義では、Figmaのデザインをウェブページとして実装する過程を段階的に説明します。画像の保存からHTML、CSSの作成、JavaScriptの作成まで、全般的なウェブパブリッシングの実務を扱います。初心者でも簡単に 따라 할 수 있도록 体系的に進められます。実習中心の学習を通して、ウェブデザインを効率的にコードに変換する方法を学ぶことができます。

Basic

HTML/CSS, JavaScript, Figma

ウェブパブリッシングマスター - figma to web with javascript

ezweb

まだ生きている不死の jQuery - 基礎から実務まで

ezweb

全世界のウェブサイトで75%以上が使用しているJavaScriptライブラリ、jQuery！華麗な効果よりも原理を理解し、基礎を固められるように構成しました。jQueryの基礎から活用まで学習し、あなただけのポートフォリオを完成させたり、現場で即活用してみてください。

Basic

HTML/CSS, JavaScript, jQuery

まだ生きている不死の jQuery - 基礎から実務まで

ezweb

モバイルウェブ制作入門：Figmaデザインを完璧に実装する（Javascript付き）

ezweb

ウェブ開発の第一歩を踏み出しましたか？HTML、CSS、JavaScriptを始めたばかりの方に特別なご提案です！モバイル時代に合わせてモバイルウェブサイトを作りたいけれど、どこから始めればいいか迷っていませんか？ご心配はいりません。 Figmaモバイルデザインを直接分析し実装しながら、自然にレスポンシブウェブ開発の核心を学んでみましょう。洗練されたモバイルデザインを基に、ユーザーの心を掴む繊細なインタラクションから、様々な画面サイズに完璧に適応する技術まで、全てを一緒に学んでいくことができます。さあ、あなたのウェブサイトが全てのデバイスで輝くように、ノウハウを共有します。一緒に始めてみませんか？

Basic

Figma, HTML/CSS, JavaScript

モバイルウェブ制作入門：Figmaデザインを完璧に実装する（Javascript付き）

ezweb

ウェブプログラミングの華！JavaScript基礎

ezweb

JavaScriptを使ってHTMLの要素を選択し、様々なイベントに応じて要素のスタイルを変更したり、アニメーション効果を実装します。JavaScriptの基本文法から、スタイル変更、イベント設定、そしてウェブページの作成時に頻繁に使用される効果を実装します。

Basic

HTML/CSS, JavaScript, vanilla-javascript

ウェブプログラミングの華！JavaScript基礎

ezweb

コーディングは初めてですが with Web Publishing - CSS

ezweb

CSSの基礎からアニメーション、レスポンシブまで学習します。実践的な例を通して学習した内容を復習しながら、確実に基礎を固めます。

Beginner

HTML/CSS

コーディングは初めてですが with Web Publishing - CSS

ezweb

コーディングは初めてなので with Web Publishing - HTML基礎

ezweb

この講義を通して、ウェブページを構成する3大言語であるHTML、CSS、JavaScriptのうち、HTML言語の基礎を確実に固めることができます。検索に最適化され、ウェブアクセシビリティとウェブ標準に準拠したHTMLをきちんと学習してみましょう。

Beginner

HTML/CSS

コーディングは初めてなので with Web Publishing - HTML基礎

ezweb

Khóa học tương tự

Khám phá các khóa học khác trong cùng lĩnh vực!

Figma を使用したモバイル Web パブリッシングポートフォリオ

codingworks

パブリッシャーの就職やパブリッシャーの実務で最も競争力のあるモバイルウェブ制作能力を向上させることができます。パブリッシャーとしてモバイルウェブを制作するためのほぼすべての制作方法とノウハウを磨くことができます。特に最近パブリッシャーと開発者に求められているデザイン能力は、Figmaの学習で多くの部分をカバーできるように、FigmaでモバイルウェブUIデザイン作業を行うプロセスも詳細に説明しました。モバイルウェブパブリッシングの授業で最も強みであるHTMLワイヤーフレームの詳細な作成方法を、すべてのページごとに詳細に説明します。この講義を通じて、HTMLワイヤーフレーム制作能力が大幅に向上します。モバイルウェブパブリッシングは、CSS変数(Var)を活用してモバイルとタブレットに合わせたレイアウトを完璧に合わせる学習を通じて、実務作業とほぼ同等の作業能力を身につけることができます。中上級のCSS実戦能力をFlexレイアウトを中心に十分に身につけることができます。

Basic

HTML/CSS, Portfolio, Mobile App Design

Figma を使用したモバイル Web パブリッシングポートフォリオ

codingworks

効果的なモバイルUXを作成(デザイン+コーディング)

usefulit

PhotoshopとAdobe XDプログラムを活用して、さまざまなデバイスのWeb、アプリレイアウトを設計した後、簡単なコーディング技術を学習して直接実装してみることができます。

Basic

HTML/CSS, jQuery, XD

効果的なモバイルUXを作成(デザイン+コーディング)

usefulit

実務中心のHTML5可視化プログラミング

antfellow77251

データを加工して表の形で表現することもできますが、最も重要なのは、データを人間が一目で分かるように表現することです。

Basic

HTML/CSS

実務中心のHTML5可視化プログラミング

antfellow77251

レスポンシブUIデザイン完全攻略 with フィグマ

uxeric

Figmaのオートレイアウト、グリッド、コンストレインツ機能を適切に活用し、レスポンシブデザインをマスターしたいですか？この講座では、小さなUI要素からカード、テーブル、コンポーネント、Webとアプリの画面まで、レスポンシブデザインとして作成するスキルを段階的に磨いていきます。就職活動や実務ですぐに役立つFigmaの活用法を習得し、様々なデバイスに最適化されたレスポンシブインターフェースデザイン能力をマスターしましょう！

Beginner

Figma, Responsive Web, ui

レスポンシブUIデザイン完全攻略 with フィグマ

uxeric

Node.jsでWebをクロールする

zerocho

ネイバー、アマゾン、Twitter、YouTube、Facebook、Instagram、unsplash.comなどのサイトをクロールして本番に適用します。

Intermediate

JavaScript, Node.js, Web Crawling

Node.jsでWebをクロールする

zerocho

CSS GRIDマスター：FIGMAデザインウェブ実装実践

ezweb

Basic

HTML/CSS, jQuery, Figma

CSS GRIDマスター：FIGMAデザインウェブ実装実践

ezweb

コーディングのコーディング基礎とWebフルスタックの開発

jocoding

コーディング1位 YouTubeのジョコーディングの本番圧縮！簡単で楽しいWebフルスタック開発講義

Beginner

HTML/CSS, JavaScript, Node.js

コーディングのコーディング基礎とWebフルスタックの開発

jocoding

トラブルシューティングによるWebプログラミング入門

pnuswedu

HTML、CSS、Javascript、jQueryを学び、ウェブページを作ろう！

Beginner

HTML/CSS, JavaScript, jQuery

トラブルシューティングによるWebプログラミング入門

pnuswedu

実習UI開発で学ぶ純粋なjavascriptとVueJS開発

jeonghwan

純粋なJavaScriptとVueJSというUIライブラリを使用してショッピングモールの検索ページを作成し、VueJS開発学習を進めます。純粋なJavaScriptとVueJsで開発を進め、各開発の違いとMVC、MVVMデザインパターンの違いも学ぶことができます。

Basic

JavaScript, Vue.js

実習UI開発で学ぶ純粋なjavascriptとVueJS開発

jeonghwan

Three.jsで一人称3Dウェブサイトを作成する

studiomeal

デスクトップとモバイルの両方で動作する一人称3Dウェブサイトを作成する講義です。

Basic

Interactive Web, Three.js, 3d

Three.jsで一人称3Dウェブサイトを作成する

studiomeal

実用的なWebプログラミング

meet6879

プログラミングは私たちが望む方向を実現する魔法です。私たちの周りのWebサービスの問題を解決し、Webプログラミングを体験してください。

Beginner

HTML/CSS, JavaScript

実用的なWebプログラミング

meet6879

JavaScript + jQueryの基礎から実務まで：中級Part.1

usefulit

理論と実践を通してJavaScriptとjQueryについて学ぶ中級コースです。 HTML、CSS、JSの基本概念に基づいて、実務に適用できる内容で構成されています。 Part.1は、ドキュメントオブジェクトモデル（DOM）、jQueryの基本概念、ノードの検索、作成、追加、削除、移動について説明しています。

Basic

JavaScript, jQuery

JavaScript + jQueryの基礎から実務まで：中級Part.1

usefulit

バイブコーディング With Claude Codeでウェブサービス作り

ref63184917

現職スタートアップCTOが実際のサービスと複数の外注を通じて得たバイブコーディング知識をお伝えします。

Beginner

HTML/CSS, JavaScript, Next.js

バイブコーディング With Claude Codeでウェブサービス作り

ref63184917

Web パブリッシャーのための JavaScript & jQuery 核心理論実践例題 (教材、完成版)

codingworks

ウェブパブリッシャー向けの JS 核心理論および実践例教材および完成版は、PDF で作成された講義教材です。この教材は、ウェブパブリッシャーが必ず知っておくべき JavaScript と jQuery の基本を忠実に習得できる役割を果たします。この教材の特徴は、理論に関連するスモールミッション (Small Mission) を通じて、理論をさらに強化できることです。特に、学習したすべての理論を活用した実践例も、忠実に準備された教材です。この PDF の全ページは、純粋な JavaScript (Vanlila JavaScript) と jQuery ページの数が 320 ページ以上で、CodingWorks が簡単に理解できるように十分な説明が追加されています。特に、パブリッシャーがウェブサイト作成のために必要な jQuery 相互作用の実践例を学習できます。

Basic

JavaScript, jQuery, HTML/CSS

Web パブリッシャーのための JavaScript & jQuery 核心理論実践例題 (教材、完成版)

codingworks

Webゲームを作って学ぶインタラクティブWeb！ JAVASCRIPT

ggangcoding162118

Webゲームも作って、フロントエンドWeb開発スキルも学ぶ1席3組授業！

Basic

Interactive Web, JavaScript, HTML/CSS

Webゲームを作って学ぶインタラクティブWeb！ JAVASCRIPT

ggangcoding162118

JavaScript 機械学習 TensorFlow.js

tonextday

JavaScript 環境で機械学習の概念を扱います。 JavaScript と TensorFlow.js を使って機械学習を実装する形式とコードを扱います。

Intermediate

Tensorflow, JavaScript, Machine Learning(ML)

JavaScript 機械学習 TensorFlow.js

tonextday

ウェブデザイン機能士資格証明に備え（2023年出題基準反映バージョン）

webstoryboy

ウェブデザイン機能社出題基準 2023年バージョンに合わせて誰でも合格できるように製作しました。 5種類を学び、素早く合格しましょう！

Basic

HTML/CSS, jQuery, JavaScript

ウェブデザイン機能士資格証明に備え（2023年出題基準反映バージョン）

webstoryboy

本当に！JavaScript - 基本から上級まで

codingmax

🌟 JavaScript の基礎から上級まで、本当に！ JavaScript レッスンから始めましょう！ 🌟

Beginner

JavaScript, ES6, es5

本当に！JavaScript - 基本から上級まで

codingmax

Do It! Django + Bootstrap：Python Web開発の定石

SungYong Lee

Python Web 開発 A to Z を学びながら作成! Web の基礎からブログ開発、公開までを一度に学べます。

Basic

Python, Django, Bootstrap

Do It! Django + Bootstrap：Python Web開発の定石

SungYong Lee

Hướng dẫn đầy đủ để tạo trang web mua sắm phản hồi bằng Figma

Đánh giá từ những học viên đầu tiên

Bạn sẽ nhận được điều này sau khi học.

Sở thích dự án

Hiểu về thiết kế Figma

Cấu hình các tập tin cơ bản

Thiết lập tùy chọn kiểu dáng

Cấu hình bố cục

Hoạt hình cuộn

Thêm chút sức sống cho các nút bấm của bạn

Tạo thanh trượt đánh giá

Triển khai các tính năng tương tác

Hoàn thiện thiết kế đáp ứng

Triển khai

hoàn thành

Cửa sổ giao tiếp (khảo sát, phòng trò chuyện mở 1:1) ✒

Khuyến nghị cho
những người này

Xin chào
Đây là

Chương trình giảng dạy

Đánh giá

Khóa học khác của ezweb

Khóa học tương tự

Hướng dẫn đầy đủ để tạo trang web mua sắm phản hồi bằng Figma

Đánh giá từ những học viên đầu tiên

Bạn sẽ nhận được điều này sau khi học.

Sở thích dự án

Hiểu về thiết kế Figma

Cấu hình các tập tin cơ bản

Thiết lập tùy chọn kiểu dáng

Cấu hình bố cục

Hoạt hình cuộn

Thêm chút sức sống cho các nút bấm của bạn

Tạo thanh trượt đánh giá

Triển khai các tính năng tương tác

Hoàn thiện thiết kế đáp ứng

Triển khai

hoàn thành

Cửa sổ giao tiếp (khảo sát, phòng trò chuyện mở 1:1) ✒

Khuyến nghị cho những người này

Xin chàoĐây là .css-1q3zd4q{text-decoration-line:underline;text-underline-position:under;text-underline-offset:1px;}

Chương trình giảng dạy

Đánh giá

Khóa học khác của ezweb

Khóa học tương tự

Khuyến nghị cho
những người này

Xin chào
Đây là