inflearn logo
知識共有
inflearn logo

本当!ウェブサイト制作! Step by Step! (韓国消費資源消費者時代-レイアウト制作基礎)

[ウェブサイト制作 Step By Step] 初級講座で、韓国消費者時代ウェブ陣(現在はリニューアル済み)メインページをそのまま製作してみる過程です。

難易度 初級

受講期間 無制限

HTML/CSS
HTML/CSS
jQuery
jQuery
Interactive Web
Interactive Web
Clone Coding
Clone Coding
HTML/CSS
HTML/CSS
jQuery
jQuery
Interactive Web
Interactive Web
Clone Coding
Clone Coding

学習した受講者のレビュー

4.9

5.0

janey23

71% 受講後に作成

無料でこんなに良い講義を聞くことができるので、大好き!レイアウトをつかむのはいつも混乱していますが、ありがとうございます! YouTubeに掲載している講義もよく聞いています。 YouTubeにもレスポンシブレクチャーも上がってくれたらよかったです。

5.0

headong2

100% 受講後に作成

講義無料でアップロードしていただきありがとうございます! 一人で独学するのに少し難しかったですㅜㅜ 講義聞きながら従うから感が取れて一人で探してみたら幕を閉じたがこんなに詳しく学べるのでありがとうございました…!!!!>< 他の講義まで完走してコーディング独学地帯でやってみる

5.0

gmdwns6297

71% 受講後に作成

バックエンド開発者ですが、これからパブリッシングとフロントエンドの勉強を始めようと思っていたところ、とても詳しく教えてくださりありがとうございます。

受講後に得られること

  • Webページレイアウトの作成

  • CSS Animation制作

  • Hover効果

  • Transform効果

  • Transition効果

  • 仮想コンテンツの使い方

  • 開発者ツールの使い方

HTMLとCSSの基本タグはわかります...
レイアウト制作が恐ろしいですか?

  • このレッスンは、HTMLとCSSに関する基本的な知識を持つ人々を対象に、実際のWebページをそのまま実装し、進行されます。
  • ただ、HTML/CSS Tagを身につけた方!タグはわかるが、レイアウトを自分で制作してみなかった方!企業ウェブの典型的なレイアウトを直接作成し、レイアウト制作の基本と活用を学ぶのに非常に適した講座といえます。


Step By Step!
今すぐ始めましょう。

Webページ制作に必要なHTML/CSSの基礎から活用まで学ぶことができ、
CSS Animation、Transform、Transformを活用して動的な要素を制作できるよう、皆様をお手伝いいたします。

  • Webページレイアウトの作成
  • CSS Animationの制作
  • Hover効果
  • Transform効果
  • Transition効果
  • 仮想コンテンツの使い方
  • 開発者ツールの使い方

オープンチャットルーム運営

よりスムーズな学習のために、J.youngが運営するよくあるウェブディーオープンチャットルームに加入すれば、
ピグマ、UI.UX、コーディング、ポートフォリオ製作関連の核蜂蜜チップと無料ウェビやリンクなどを共有いたします。

- オープンチャットルーム:よく知られたウェブディ
- コード:jyoung



講義をすべて聞いたら、
次のレベルにも挑戦してみてください!
本当!ウェブサイト制作 Step By Step シリーズ

Basic Course (ハンファキャミカル_反応型ウェブ)
PCモードレイアウト、レスポンシブページ制作完璧理解!
Application Course 1(ワイスタジオ_レスポンシブウェブ)
視線をひきつけるウェブページ制作カリキュラム!
Application Course 2(対バン産業_インタラクティブWeb)
ゴージャスな難易度インタラクティブウェブも私の手で直接!
Application Course3 (ミューザイン_レスポンシブウェブ)
実務拡張性+スピードUP、複雑なレイアウトも自信を持って!

h tml, css, html/css, website, ウェブサイト, コーディング ,coding , レイアウト, インタラクティブウェブ, interactive web, web design, webデザイン, ポートフォリオ, 公開

こんな方に
おすすめです

学習対象は
誰でしょう?

  • html/cssの基礎はありますが、レイアウトの制作を試していない方

  • レイアウトの製作が難しくて大変な方

  • レイアウト制作の基本をしっかり固めたい方

  • CSS Animationの制作方法を知りたい方

  • transform効果とtransition効果を知りたい人

  • 開発者ツールの使い方を習得したい人

  • Webポートフォリオ作品を追加したい人

前提知識、
必要でしょうか?

  • html/css 基礎

こんにちは
jyoungです。

9,795

受講生

427

受講レビュー

242

回答

4.8

講座評価

13

講座

こんにちは。

AI活用UIUXフルスタックデザインディレクターのJ.ヨンです。

私は20年以上にわたり、ウェブ・アプリサービスの企画、デザイン、開発の実務を経験しており、
現在はUIUXウェブ企画・デザイン・フロントエンドのブートキャンプ講師として活動しています。

実務経験を基に、これまで500人以上の受講生がデザインおよびIT分野へ就職できるようサポートしてきました。現在もAI時代に合わせた新しいポートフォリオ制作方法と実務スキルの教育に注力しています。



私の講義哲学は!

実務に即投入できるスキルの構築

単にツールの使い方を学ぶのではなく、企画からデザイン、開発、配布まで、実務と同じプロセスを経験しながら、現場ですぐに活用できる能力を身につけられるようサポートします。

現場が求める核心的なスキルの集中習得

急速に変化する採用市場で必要とされるAI活用能力、問題解決能力、協調性を中心に学習します。

就職につながるポートフォリオ制作

面接官が関心を持つようなプロジェクトとポートフォリオを作成することに集中します。


AI時代には、デザインだけでは不十分です。

これからは企画し、デザインし、実装し、デプロイまでできる
フルスタッククリエイター(Fullstack Creator)の能力が必要です。
デザインツールの基本活用能力 + Claude、Codex、Figmaを活用して実際のサービスを制作し、
AIと共に成果物を作る方法を経験していただきます。

- 何から始めればよいか分からず途方に暮れている方、
- ポートフォリオの競争力を高めたい方、
- AIを活用してより速く成長したい方であれば、私が皆さんの心強いガイドに
なります。

皆さんの成果物が完成する瞬間まで、共に歩んでまいります。

実務経歴

  • 2017~現在 | Digital Product Director & UX Consultant

  • 2015~2017 | Executive Director, EliEsel Inc.

  • 2003~2015 | Executive Director, Amusingware Inc.

  • 2003 | Head of Design, Seowoo C&D


講義経歴

  • 就職ポートフォリオ制作およびプロジェクトメンタリング

  • 企業出講および実務能力強化教育

  • 大学・企業・教育機関向けの実務講義

  • デザイン・開発ポートフォリオコンサルティングおよびグループメンタリング

  • 実務プロジェクトベースのチームコーチングおよびポートフォリオ指導

  • 企業在職者および就職準備生を対象とした実務教育

  • AIベースのUIUX・フロントエンド実務教育およびコンサルティング



    - 現) UIUX企画・デザイン・フロントエンド ブートキャンプ専任講師(Ezen DXアカデミー - 江南店)
    - デザイン・開発ポートフォリオ専門講義およびチームグループ講義


    * 運営中のYouTube(コーディングするデザイナー)

よりスムーズな学習のために、J.youngが運営する「チャルナンウェブディ」オープンチャットに参加していただければ、
講義に関する質問やポートフォリオに関するフィードバックを差し上げます。

- オープンチャット名:チャルナンウェブディ
- コード:jyoung

 

もっと見る

カリキュラム

全体

7件 ∙ (1時間 59分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

33件

4.9

33件の受講レビュー

  • hihihj07017384님의 프로필 이미지
    hihihj07017384

    受講レビュー 8

    平均評価 5.0

    5

    100% 受講後に作成

    講義無料でアップロードしていただきありがとうございます! 一人で独学するのに少し難しかったですㅜㅜ 講義聞きながら従うから感が取れて一人で探してみたら幕を閉じたがこんなに詳しく学べるのでありがとうございました…!!!!>< 他の講義まで完走してコーディング独学地帯でやってみる

    • jyoung
      知識共有者

      headong2さん 一人で独学することは本当にすごいです。独学時よりも順調にできるように 積極的にお手伝いします。 よろしくお願いしますありがとうございます^^ J.youngドリーム

  • tinybuildlab님의 프로필 이미지
    tinybuildlab

    受講レビュー 27

    平均評価 5.0

    5

    100% 受講後に作成

    学んだことを実習してみることができてよかったです!

    • jyoung
      知識共有者

      yongsu kwonさんの講義が良かったと思います。 より良い講義でお会いしましょう。 明けましておめでとうございます^^ J.youngドリーム

  • gmdwns62971924님의 프로필 이미지
    gmdwns62971924

    受講レビュー 16

    平均評価 5.0

    5

    71% 受講後に作成

    バックエンド開発者ですが、これからパブリッシングとフロントエンドの勉強を始めようと思っていたところ、とても詳しく教えてくださりありがとうございます。

    • jyoung
      知識共有者

      gmdwns6297様、高い評価をいただきありがとうございます。パブリッシングのお役に立てたとのこと、大変嬉しく思います。今後も良い講義でお応えできるよう努めます。ありがとうございます。J. Young Dream

  • wjsduwls01011742님의 프로필 이미지
    wjsduwls01011742

    受講レビュー 9

    平均評価 5.0

    5

    71% 受講後に作成

    無料でこんなに良い講義を聞くことができるので、大好き!レイアウトをつかむのはいつも混乱していますが、ありがとうございます! YouTubeに掲載している講義もよく聞いています。 YouTubeにもレスポンシブレクチャーも上がってくれたらよかったです。

    • jyoung
      知識共有者

      janey23さん、ありがとうございます。 レイアウトデザインにお役に立てたと思います。 現在、別の講座も準備中であるので、持続的関心をお願いします。 元気なウェブディYouTubeも購読がいいですよろしくお願いします。 ありがとうございます^^ 残りの午後も幸せな時間になります^^ J.youngドリーム

  • wlenwlen081423439님의 프로필 이미지
    wlenwlen081423439

    受講レビュー 9

    平均評価 5.0

    5

    14% 受講後に作成

    無料でいい講義を聞くことができてよかったです。最高です〜

    jyoungの他の講座

    知識共有者の他の講座を見てみましょう!

    似ている講座

    同じ分野の他の講座を見てみましょう!

    新規会員登録で25%OFF

    ¥1,092

    25%

    ¥1,452