inflearn logo
inflearn logo

本当!ウェブサイト制作! Step by Step! (対バン産業_InteractiveWeb)

[ウェブサイト制作 Step By Step] 3段階講義で、大方産業メインページをそのまま製作してみる過程です。 サイトで盛り込んでいる華やかなインタラクティブウェブをそのまま製作実装してみる過程で華やかな分、難易度のある講義です。

難易度 初級

受講期間 無制限

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

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

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

5.0

5.0

LHooOoo

100% 受講後に作成

フロントエンドの開発を一人で学んでいるうちの1つですが、無料の講義はまともな講義がいくつかなかったので、すぐに見て終わって有料講義を見つけましたが、大方産業開発サイトがただ素敵に見えるという理由で始めましたが、詳しく教えてください。わかってくれて楽しく学びました:)おもしろい講義であり、頑張れば中学校の学生の方も十分に頑張っていただけると思います!

5.0

김혜경

97% 受講後に作成

J.ヤング講師の講義はすべて受講して頑張りました^^ 今回の大方産業ウェブサイトは派手なインタラクティブウェブをそのまま実装できるので 他の講座よりも楽しくよくフォローしました。 何よりここで学んだ様々なジェイクエリーアニメーションで 私のポートフォリオサイトをレベルアップしなければならないという意志が活発に燃えますね! 次に、モバイルアプリ制作中心の講義も開設してください。 たくさん役に立つと思います。 コロナ19でオンラインで厳しく独学する数多くの人に J.ヤングの良い川の多くをお願いします。 ありがとうございます。

5.0

baam baam

97% 受講後に作成

お得な講義でした。ありがとうございます!

受講後に得られること

  • マウスオーバー時に2depthが見えるGNB jQuery

  • スクロール時にデザインが変更される FixHeader jQuery

  • テキストアニメーションjQuery(Splitting.js)の活用とアプリケーション

  • スクロールイベントアニメーションjQuery(scrolla.js)の活用とアプリケーション

  • アニメーション化された画像スライドjQuery(slick.js)の活用とアプリケーション

HTMLとCSSだけを知っていても

Webページ&Interative Web制作OK!

本講義はウェブサイト制作Step By Step! 3段階で大方産業(https://www.db-dvp.co.kr/)メインページをそのまま製作してみる過程です。サイトに盛り込まれた華やかなインタラクティブウェブをそのまま製作実装してみる講座です。


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


講義は、HTMLとCSSに関する基本的な知識を持つ方々を対象に、実際のWebページをそのまま実装して進行されます。難しいJavaScriptとjQueryを知らなくても、 HTMLCSSに基づいてライブラリプラグインを活用して、短時間で素敵でカラフルなWebページを制作できるよう、皆様をお手伝いいたします。実務で必須のインタラクティブ要素で構成されたWebページ講義を聞くと、実務拡張性、スキルアップ保証、ポートフォリオ完成の3つを一度に得ることができます。


1.Header領域を作る(GNB、Fixed header)

- マウスオーバー時に2depthが表示されるGNB jQuery
- GNBメニューバーにマウスホバーシースムーズにスライドするサブメニューバー製作
- 仮想セレクタ(before、after)を利用した多様なマウスオーバー効果
- スクロール時にデザインが変更され、上部に修正される header jQuery

2.Visual領域の製作(Image Slider)

- Splitting .jsを使用して作成したテキストアニメーション
- Slick .jsを使用してスライド画像を作成する
- スライド「prev」、「next」ボタン製作
- スライドインジケーターの製作
- ゲージバーアニメーション
- 画像分割アニメーション

3.Contents_imformation領域(Banner Slider)


- Scrolla.jsで2つずつ見えるスライドアニメーション
- CSSでdotボタンを作る
- スクロールボタンをクリックすると、スムーズに目的の位置に移動するjQuery
- 仮想セレクタを(before、after)利用した多様なマウスオーバー効果(下線効果、ボーダー効果、イメージスケール効果)

4.Contents_videoゾーン&Contents_newsゾーン

- スクロールアニメーションjQuery(scrolla.js)
- YouTubeビデオのインポート
- グラデーションカラー適用
- Motionアニメーションの適用

講義が終わったら
得るもの:D

1. しっかりしたレイアウト製作実力

Webページ制作のためには、HTMLCSSをベースにした正確なレイアウト作成が最も重要です HTMLCSSの基礎はありますが、 Layout Designについて全く感が来ない方も、基礎から丁寧にお知らせする本講義に誠実に従えばいつのまにかレイアウト制作のしっかりした基本基盤が固まっていることを感じられるでしょう

2. 業務生産性UP!

業務生産性を向上させるには、ライブラリとプラグインを使用して、短時間でインタラクティブなウェブサイトを実装できる必要があります。本講義では、ウェブページのレイアウト制作からレスポンシブページの製作まで確実に勉強することができ、実務で必要とするスクリプト、プラグイン、アニメーションなどを利用してウェブページを作成します。講義を聞いて着実に実習してみると、いつのまにか業務能力がUP! UP!

3. 高品質ポートフォリオ

仕事の能力を明らかにし、新しい機会をつかむための効果的な準備の1つは、高品質のポートフォリオです。講義を聞いて実習してみると、自分だけのポートフォリオが積み上げられます。本講義だけでなく、以後のウェブサイト制作実習講義を聞きながら着実にWebページを実装してみると、就職で私の最大の武器になってくれるポートフォリオを完成できるはずです。

4. オープンチャット방運営

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

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

html, css, html/css, website, ウェブサイト, コーディング

こんな方に
おすすめです

学習対象は
誰でしょう?

  • 1.HTML/CSS基礎はあるがウェブページ制作が恐ろしい方。

  • 2.ウェブデザイナー、パブリッシャーとして就職のために迅速にポートフォリオを制作したい方

  • 3.Webで必要なJQueryソースを身につけたい方

  • 4.JavaScript基礎なしに実務で必要なインタラクティブWebを手軽に実装したい方

  • 5.現在グラフィックデザイナーでフロントエンド開発者やパブリッシャーに転向したい方

  • 6.ウェブデザイナーとして、業務スキルを向上させたい方

  • 7.拡張性を考慮したインタラクティブWebを迅速に実装したい方

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

  • HTML /CSS

こんにちは
jyoungです。

9,122

受講生

367

受講レビュー

227

回答

4.8

講座評価

14

講座

「デザイン・開発ポートフォリオメンターのJ.Youngです。」

私は過去20年間にわたり、ウェブデザインおよびアプリ開発会社を運営しながら、現場の厳しさを身をもって経験してきました。その経験を活かし、現在は大学や専門教育機関でUI/UXデザインからフロントエンド開発まで、後進の専門家育成に邁進しています。

私の講義哲学は明確です。

  1. 基礎から実務まで 滞りのない繋がり

  2. 現場が求める核心技術の凝縮

  3. 就職成功を導く実務型ポートフォリオの完成

何から始めればいいか分からず途方に暮れている方、転職を夢見ているものの時間が足りない社会人の方、そしてコーディングが自分とは無縁の話に感じられる初心者の方まで。私が歩んできた20年の道のりを、皆さんの近道へと変えて差し上げます。堂々と実務家として立てるその日まで、皆さんの心強い教育係(サス)となり、最善を尽くしてサポートいたします。

J.youngがお手伝いいたします!!
また!!学習中にご不明な点がございましたら、コメントを残していただければ
お役に立てるよう最善を尽くして回答させていただきます。

実務経歴

- 2017~現在) Web開発ディレクター
- 2015年~2017年 (株)エリエゼル 総括理事
- 2003年~2015年 (株)アミュージングウェア 総括理事
- 2003年: ソウC&D デザイン室長


- 現)
- UIUXウェブ企画/デザイン/フロントエンド ブートキャンプ講師(Ezen DXアカデミー -瑞草店)
- デザイン・開発ポートフォリオ専門講義およびグループ・個人指導


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

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

- オープンチャット名:잘난웹디
- コード:jyoung

 

もっと見る

共同知識共有者

カリキュラム

全体

29件 ∙ (4時間 50分)

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

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

受講レビュー

全体

13件

5.0

13件の受講レビュー

  • winterlove님의 프로필 이미지
    winterlove

    受講レビュー 4

    平均評価 4.8

    5

    97% 受講後に作成

    J.ヤング講師の講義はすべて受講して頑張りました^^ 今回の大方産業ウェブサイトは派手なインタラクティブウェブをそのまま実装できるので 他の講座よりも楽しくよくフォローしました。 何よりここで学んだ様々なジェイクエリーアニメーションで 私のポートフォリオサイトをレベルアップしなければならないという意志が活発に燃えますね! 次に、モバイルアプリ制作中心の講義も開設してください。 たくさん役に立つと思います。 コロナ19でオンラインで厳しく独学する数多くの人に J.ヤングの良い川の多くをお願いします。 ありがとうございます。

    • jyoung
      知識共有者

      kateさん〜受講後ありがとうございます。 私のすべての講義を受講してくれたことを心から感謝します。 いつもより良い講義でお会いできるよう最善を尽くします。 次の講義は私が引っ越した関係で撮影中に中断されました。 まとめると早いうちに探してみましょう。 モバイルアプリデザインレッスンも含めて準備する予定です^^ おやすみなさい。

    • jyoung
      知識共有者

      こんにちは~~ kateさん受講評イベントお知らせアップしました~~^^ 確認してください

  • sjj925102님의 프로필 이미지
    sjj925102

    受講レビュー 1

    平均評価 5.0

    5

    100% 受講後に作成

    役に立ちました。

    • jyoung
      知識共有者

      sjj-92ありがとうございます〜 絶えず良い講義でお会いしましょう。 J.youngドリーム

  • ihu07182702님의 프로필 이미지
    ihu07182702

    受講レビュー 1

    平均評価 5.0

    5

    100% 受講後に作成

    フロントエンドの開発を一人で学んでいるうちの1つですが、無料の講義はまともな講義がいくつかなかったので、すぐに見て終わって有料講義を見つけましたが、大方産業開発サイトがただ素敵に見えるという理由で始めましたが、詳しく教えてください。わかってくれて楽しく学びました:)おもしろい講義であり、頑張れば中学校の学生の方も十分に頑張っていただけると思います!

    • jyoung
      知識共有者

      イム・ヒョンウ~~ 私は拍手を送ります^^ 両親がとても心強いと思います。 大方産業なら…大人も難しいかもしれません。 とても楽しく頑張ったなんて本当に本当にすごいです~~ 一言でちゃん!!!です。 ありがとうございます~~~ 勉強する気になったらいつでも…。 応援また応援します^^ 今日も楽しい午後になって…週末も楽しく過ごしてください^^ J.youngドリーム^^

  • jinfx4205171님의 프로필 이미지
    jinfx4205171

    受講レビュー 1

    平均評価 5.0

    5

    100% 受講後に作成

    good!

    • jyoung
      知識共有者

      ルールブル 短くてシンプルですが、力や受講評ありがとうございます。 今日も良い一日を過ごしてください^^

  • hurbaam1568님의 프로필 이미지
    hurbaam1568

    受講レビュー 4

    平均評価 5.0

    5

    97% 受講後に作成

    お得な講義でした。ありがとうございます!

    jyoungの他の講座

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

    似ている講座

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

    期間限定セール、あと6日日で終了

    ¥33,880

    30%

    ¥5,906