Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
Programming

/

Front-end

本当!ウェブサイト制作! Step by Step! (「クルアラモード」_反応型ウェブ制作)

本当!ウェブサイト制作 Step By Step!クルアラモード(https://crewalamode.com/)メインページをそのまま製作してみる過程です。サイトに盛り込まれているカラフルなインタラクティブウェブをそのまま製作、実装してみる過程で、複雑なレイアウトも簡単かつ迅速に制作する実務コアノウハウをそのままお知らせします。

  • jyoung
3시간 만에 완강할 수 있는 강의 ⏰
Responsive Web
jQuery
HTML/CSS
Interactive Web

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

こんなことが学べます

  • 実務に適したレイアウト制作方法!

  • フルサイズ動画が入ったレスポンシブウェブサイトの制作方法!

  • スクロールアニメーションの適用方法!

  • スクロール時にデザインが変更されるヘッダーとイメージアニメーション!

  • 文字ごとのテキストアニメーション!

  • GNBオープンメニューの製作方法!

自分で作って学ぶウェブサイト!
J. Youngと一緒にクローンコーディングに挑戦してください。

HTML/CSSだけを知っても
インタラクティブウェブ制作OK!

このレッスンは、HTMLとCSSに関する基本的な知識を持つ人々を対象に、実際のWebページをそのまま実装し、進行されます。


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

Webページの制作に必要なjQueryの基礎から活用まで学ぶことができ、様々なライブラリやプラグインを活用して短時間で素敵でカラフルなWebページを制作できるよう、皆様をお手伝いいたします。

実務で必要なインタラクティブな要素で構成されたWebページ講義により、業務スキルと実務コアノウハウを一度に得ることができます。

実務は!スピード戦であり、スケーラビリティです。
作業時間内にすばやく、クオリティのプロジェクトを完了する方のみが実力あるデザイナー、パブリッシャーとして認められ、扱われます。

フォーメインサイトを一緒に作ってみながら、派手なウェブサイトも素早く制作していけるノウハウを身につけてみてください!


  1. HTML/CSSによる超簡易レイアウト作成法
  2. Transformを活用した様々なホバー効果
  3. スクロールによってデザインが変更されるヘッダー
  4. プラグインを活用したテキストアニメーション
  5. スクロールで進行するアニメーション
PC/Tablet/Mobile 機器別レスポンシブページビュー
開発者ツールの活用法


20年経歴の実務+講義ノウハウ
J.young

こんにちは? J.youngです。

20年間、Webデザイン&アプリ開発会社でデザインチーム総括でチームを運営しており、しっかり大学と学校および職業訓練機関でUIUXデザイン、ウェブデザイン、ウェブパブリッシャー、フロントエンド開発講義を行っています。デザインやコーディングの基礎が全くない学生を対象にウェブデザイナー/パブリッシャーなど専門家養成のため

  • 基礎から実務まで!
  • 実務で欲しい!
  • 実務ですぐに使えるポートフォリオ制作!

講義を進めて専門家として堂々と実務に進出できるよう指導しています。それだけ多くの弟子たちが現職デザイナーで、パブリッシャーでその力量を発揮しています。

  • Webデザイナーやパブリッシャーになりたいのにどこから始めるのか
  • 離職のための正規コース学園に通いたくても職場生活のために厳しくできない方
  • コーディングの「鼻」を知らない人
  • 学園やYouTubeなどでHTML/CSSの基礎は学んだが、導通ウェブサイト制作が他の話だった方々

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

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

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

実務キャリア

  • 2015~2017(株)エリエセル総括取締役
  • 2003~2015(株)アミュージングウェア総括取締役
  • 〜2003ソウ氏アンディデザイン実装

講義やその他のキャリア

  • 元気なウェブディYouTubeの運営中
  • 仁川文芸専門学校(マルチメディアウェブ講義)
  • ソウル現代職業専門学校(スマートウェブ/アプリ講義)
  • ポリテック大学(デザイン講義)
  • 韓国IT専門学校(マルチメディアデザイン講義)
  • タップ職業専門学校(デザイン講義)
  • 光明市女性ビジョンセンター(ウェブデザイン講義)
  • 今コンピュータ学園講義のブンダン店(デザイン講義)
  • ザ・ジョウンは、コンピュータアカデミーの瑞草店([ウェブデザイン機能士]デジタルウェブ&アプリデザイン - コース評価型資格-A)
  • 今DXアカデミー(江南店)(ピグマ、UIUX、フロントエンド講義)

こんな方に
おすすめです

学習対象は
誰でしょう?

  • HTML / CSSの基礎はありますが、Webページの作成が恐れている人

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

  • Webで必要なjQueryソースを習得したい人

  • JavaScriptの基礎なしに実務で必要とするインタラクティブWebを簡単に実装したい人

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

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

  • スケーラビリティを考慮したインタラクティブWebを迅速に実装したい方

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

  • HTML/CSSの基礎

こんにちは
です。

8,238

受講生

326

受講レビュー

224

回答

4.8

講座評価

14

講座

 안녕하세요? J.young 임자영입니다.

20여년간의 웹디자인 & 앱개발회사를 운영하며, 대학과 전문학교 및 직업훈련기관에서 UI.UX디자인,웹디자인, 웹퍼블리셔, 프론트엔드개발 강의를 하고 있습니다.

디자인이나 코딩에 대한 기초가 전혀 없는 학생들을 대상으로, 전문가(UI.UX디자이너/ 퍼블리셔/코딩하는 디자이너) 양성을 위해!!
- 기초부터 실무까지!
- 실무에서 원하는!
- 실무에서 바로 써 먹을 수 있는 포트폴리오 제작! 강의로 전문가로써 당당히 실무에 진출할 수 있도록 지도하고 있습니다.

그런 만큼... 많은 제자들이 실무자로써의 그 역량을 발휘하고 있습니다.

-UI/UX디자이너, 퍼블리셔, 프론트엔드개발자가 되고 싶어도 어디서 부터
어떻게 시작할지 막막하신 분들..
- 이직을 위한 정규 코스 학원을 다니고 싶어도 직장 생활로 인해 엄두도 못 내시는 분들..
- 코딩에 '코'자도 모르시는 분! 학원이나 유튜브 등으로 HTML/CSS기초는 배웠지만 -
도통...웹 퍼블리싱 개발 구현이란 남의 이야기이신 분들....

J.young이 도와드리겠습니다.!!
또한!! 학습하시다 궁금하신 점 있으시면 댓글 남겨주시면
도움이 드릴 수 있는 답을 드리도록 최선을 다하겠습니다.

* 오픈채팅방운영

보다 원활한 학습을 위해, J.young이 운영하는 잘난웹디 오픈채팅방에 가입하시면,
피그마, UI.UX, 코딩, 포트폴리오제작 관련 핵꿀팁과 무료웨비나 링크 등을 공유해드립니다.

오픈채팅방명 : 잘난웹디
코드 : jyoung

 

실무경력

- 2017~현) 웹개발 Director
- 2015년~2017년(주)엘리에셀 총괄 이사
- 2003년~2015년 (주)어뮤징웨어 총괄 이사
- 2003년: 서우씨앤디 디자인실장


- 현) UIUX & 웹포트폴리오 강의 진행 중(실무 진출 90프로 이상)

 

감사합니다^^ 


운영중인유튜브

잘난웹디
https://www.youtube.com/channel/UCISuuIbv_SnkE6d4oDgrBWQ

カリキュラム

全体

19件 ∙ (3時間 5分)

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

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

受講レビュー

全体

5件

5.0

5件の受講レビュー

  • 김가희님의 프로필 이미지
    김가희

    受講レビュー 10

    平均評価 5.0

    5

    100% 受講後に作成

    선생님 클론코딩 강의는 일단 디자인도 너무 멋지게 만들 수 있어서 포트폴리오 만들때 정말 유용한 것 같아요. 실무에 활용하기에도 좋고 강의도 빠릿빠릿 하니까 지루하지 않아서 좋았습니다. 피드백도 빨리 해주시구요 새로운 강의가 더 나왔으면 좋겠어요~~

    • J.영
      知識共有者

      가희님~~ 따뜻한 수강평 감사드립니다^^ 당장은 제가 오프라인 수업때문에 강의 업로드가 어려울듯하나 올 하반기부터는 초 집중해서 강의를 올릴 계획에 있습니다. 그때도 잘 부탁드립니다^^ 감사합니다^^ 제이영 드림

  • 초록님의 프로필 이미지
    초록

    受講レビュー 6

    平均評価 5.0

    5

    84% 受講後に作成

    깔끔한 진행과 자세한 설명으로 따라가기 수월했습니다. 좋은 강의 잘 듣고 갑니다!

    • J.영
      知識共有者

      chfhdvlcl님 높은 수강평 감사드립니다. 본강의를 활용하여 웹사이트제작에 많은 도움이 되셨으면 합니다. 대방사이트와 뮤자인사이트 강의도 실무 활용에 많은 도움이 되리라 생각됩니다. 다시한번 응원드립니다. 감사합니다. J.young드림

  • 박서영님의 프로필 이미지
    박서영

    受講レビュー 3

    平均評価 5.0

    5

    100% 受講後に作成

    j영님 강의만 두개들었는데 두개 전부 매우 만족했습니다! 강사님이 차분하게 알려주셔서 쉽게 따라할 수 있고 배운걸 바탕으로 바로 실전에 응용할 수 있어서 좋았습니다! 덕분에 실력이 정말 많이 늘었어요.

    • J.영
      知識共有者

      예리님 수강평 감사드립니다. 제 강의를 2개나 들어주셨는데 실력향상에 많은 도움이 되었으면 합니다. 정말 감사드리구요~~ 항상 좋은강의로 찾아뵙도록 하겠습니다. 감사합니다^^ J.young드림

  • ciel0727님의 프로필 이미지
    ciel0727

    受講レビュー 7

    平均評価 4.7

    5

    100% 受講後に作成

    천천히 잘 알려주십니다!!

    • J.영
      知識共有者

      ciel0727님 수강평 감사드립니다~~ 더 좋은 강의로 찾아뵙도록 하겠습니다~ 감사합니다^^ 지속적 열공 부탁드려요~ J.young드림

  • 루피님의 프로필 이미지
    루피

    受講レビュー 2

    平均評価 5.0

    5

    68% 受講後に作成

    설명도 꼼꼼하게 해주시고 알기 쉽게 설명해주셔서 넘 좋아요 ~

    • J.영
      知識共有者

      루피님~ 제가 더 감사드립니다. 지속적으로 좋은 강의로 찾아뵙도록 하겠습니다 감사합니다^^

¥3,698

jyoungの他の講座

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

似ている講座

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