このコース Figmaのデザインから始めて、AIの助けを借りずにHTML、CSS、およびJavaScriptのみを使用してWebページを完成させるプロセス全体を段階的にガイドします私がします。

デザイン案を解釈し、画像を整理し、運用を担う構造化HTML、メンテナンス可能なCSS、JavaScriptにリンクする方法 実際の公開フローと同様 体験できます。

ただ従うだけのコースではなく、

「なぜこのようなコードを書くのか」

「デザインをコードに移すときに最初に判断すべきこと」に焦点を当てる

ウェブパブリッシャーやフロントエンドの初心者が、知っておくべき思考プロセスを自然に学べるように設計されていますそこにある。

初心者の方でも気軽に始められるように、基本から段階的に進めていきますので、

実践重視の学習を通じて デザインを見るとすぐにコード構造を考える能力目標は

このコースを通じて、単純な実装にとどまらず、 現実の世界でウェブ上に公開する機能装備されます

デザインをウェブページとして完全に実装しましょう！

学習目標

FigmaデザインをWebに実装するプロセスを理解しています。
デザインファイルを分析して Web パブリッシングに適用する方法を学びます。
Web パブリッシングの基本概念と実践的なスキルを学びます。
HTML と CSS を使ったマークアップとスタイリングのテクニックを学びましょう。
Figmaでウェブ用に画像を保存して最適化する方法を学びましょう。
適切な画像形式を選択し、ウェブパフォーマンスに合わせて画像を最適化する方法を学びましょう。
ウェブ標準とアクセシビリティを考慮したコードを書く能力を高めましょう。
さまざまな環境で一貫したUI/UXを提供する方法を学びましょう。
ヘッダーとナビゲーションバーを実装する機能を開発します。
ナビゲーションバーとヘッダーのデザインを Web ページに適用する方法を説明します。
フォント、色、ボタンスタイルなどのデザイン要素を適用する方法を学びます。
ウェブサイトデザインの一貫性を保つ方法を練習しましょう。
アニメーションとダイナミックエフェクトの適用方法を学びます。
CSS アニメーションとトランジションエフェクトを使用して、ユーザーエクスペリエンスを向上させましょう。
ウェブパフォーマンスを考慮した最適化手法を学びましょう。
コードをより効率的にし、パフォーマンスを向上させる方法を学びましょう。
実践的なプロジェクトを完了することにより、実践的なスキルを強化します。
学んだことを基に、独自のウェブサイトを作成し、出版スキルを磨きます。

ウェブパブリッシャーまたはフロントエンド開発者になることを目指していますか？

そして、デザインはデザイナーに任せて、出来上がったデザインを参考に実装に集中します。

このコースでは、Pygmaのコミュニティから無料で提供されているデザインを使用しています。

デザインファイルのアドレス: https://www.figma.com/community/file/1383362001941293031

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

主な学習内容

Web パブリッシングの基本概念の理解

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

Web パブリッシングは、HTML と CSS でデザインを実装するプロセスです。Web 標準とアクセシビリティを考慮したコードの記述方法と、デザインファイルを分析してマークアップ構造を設計する方法を学びます。また、実際に使えるように、保守が容易なコードの書き方についても学んでください。

Figmaで画像を保存して使用する方法

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

FigmaでWeb公開に適した画像形式を選択して保存する方法を学びましょう。PNG、JPG、SVG の違いを理解し、解像度を最適化して Web パフォーマンスを向上させる方法を学びましょう。これにより、Web サイトにデザインを自然に適用するためのテクニックを学ぶことができます。

基本的な HTML 構造を作成する

HTML 기본 구조 작성

HTML を使用して Web サイトの基本構造を作成する方法を学びます。アクセシビリティを考慮し、保守しやすいマークアップを設計するためにセマンティックタグを使用する原則を学びましょう。これにより、Web 標準に準拠した効率的なコードの記述方法がわかります。

ヘッダーとナビゲーションバーの実装

HTML と CSS を使用して Web サイトのヘッダーとナビゲーションバーを実装する方法を学びます。ロゴ、メニュー、アイコンを適切に配置し、ユーザーが簡単にナビゲートできるようにデザインするための原則を学びましょう。また、ナビゲーションバースタイルを適用し、デバイス間で一貫したデザインを維持する方法についても学びます。

Header 및 Navigation 바 구현

CSS スタイルとレイアウト設定

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

CSS を使用して Web サイトのレイアウトのスタイルを設定する方法を学びましょう。フレックスボックスとグリッドを使用してコンテンツを配置および配置するテクニックと、直感的なデザインを実装する方法を学びます。また、実践で使えるように、メンテナンスしやすいスタイルを適用する方法も学んでください。

フォント、色、背景画像を適用

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

ウェブサイトの読みやすさとデザインを向上させるために、適切なフォント、色、背景画像を適用する方法を学びましょう。Web フォントの使い方と、背景画像を最適化してウェブのパフォーマンスを維持するテクニックを学びましょう。

ボタンとアニメーション効果を追加する

ボタンスタイルを適用し、さまざまなアニメーション効果を追加して、ウェブサイトでのユーザーエクスペリエンスを向上させる方法を学びます。CSS を使用してボタンのホバー効果やクリック効果を実装したり、トランジションやキーフレームアニメーションを適用したりして、自然なインタラクションを作成するテクニックを学びましょう。これにより、視覚的な完成度が向上し、動的な Web 要素を効果的に使用する方法がわかります。

버튼 및 애니메이션

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

さまざまなスライドを実装する

Web サイトに画像やコンテンツを動的に表示するスライドを実装する方法を学びましょう。上海で CSS と JavaScript を使って自動スライドを左右に適用するテクニックを学び、UX を考慮したスライドデザインの原則を学びます。

다양한 슬라이드 구현

サンプルファイルと完成版が提供されています。

flex のすべての属性の説明と、練習用のサンプルファイルを提供します。

2回目と最後のセッションで教材を確認してください。

人工知能の助けを借りずにウェブ開発を試してみてください（JavaScriptを使用）

人工知能の助けを借りずにウェブ開発を試してみてください（JavaScriptを使用）