강의

멘토링

로드맵

Inflearn brand logo image
BEST
Programming

/

Web Development

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

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

HTML/CSS
Responsive Web
jQuery
Clone Coding
Interactive Web

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

こんなことが学べます

  • マウスオーバー時に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

こんにちは
です。

8,329

受講生

329

受講レビュー

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

カリキュラム

全体

29件 ∙ (4時間 50分)

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

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

受講レビュー

全体

13件

5.0

13件の受講レビュー

  • ihu07182702님의 프로필 이미지
    ihu07182702

    受講レビュー 1

    平均評価 5.0

    5

    100% 受講後に作成

    I'm a first year middle school student learning front-end development on my own, and since there aren't many good free lectures, I quickly finished them and looked for paid lectures. I started with the Daebang Industrial Development site because it looked cool, but it was fun to learn from because it explained things in detail and even touched on parts that I couldn't learn well from the free lectures :) It was a really fun lecture, and I think middle school students would be able to complete it if they work hard! I really liked how J. Young kindly responded to my requests for schoolwork and consistently answered my questions!

    • jyoung
      知識共有者

      Lim Hyun-woo ~~ I applaud you^^ Your parents must be very strong.... If it's Daebang Industry...even adults can have a hard time, but you've done it so enjoyably and it's really, really great~~ In a word, it's awesome!!! I'm grateful~~~ If you have any questions while studying, please leave a comment anytime....and I'll cheer you on^^ Have a fun afternoon today and a happy weekend^^ J.young Dream^^

  • runa3311085님의 프로필 이미지
    runa3311085

    受講レビュー 4

    平均評価 4.8

    5

    97% 受講後に作成

    I took all of Instructor J. Young's lectures and completed them^^ This Daebang Industry website is a gorgeous interactive web that can be implemented as is, so I followed along more enjoyably than other lectures. More than anything, with the various jQuery animations I learned here, I'm burning with the will to level up my portfolio site!! Next time, if you open a lecture focused on mobile app creation, I think it would be very helpful. I ask for a lot of good lectures from J. Young to the many people who are having a hard time learning on their own online due to COVID-19. Thank you.

    • jyoung
      知識共有者

      Kate~ Thank you for your class review. I am deeply grateful that you have taken all of my classes.. I will always do my best to come back with better classes. The next class was interrupted during filming because I am moving, but I will come back as soon as it is organized. I plan to prepare a mobile app design class as well^^ Have a nice evening^^

    • jyoung
      知識共有者

      Hello~~ Kate, I posted a notice about the class review event~~^^ Please check it out

  • hurbaam1568님의 프로필 이미지
    hurbaam1568

    受講レビュー 4

    平均評価 5.0

    5

    97% 受講後に作成

    It was a very informative lecture. Thank you!!

    • sjj925102님의 프로필 이미지
      sjj925102

      受講レビュー 1

      平均評価 5.0

      5

      100% 受講後に作成

      It was helpful.

      • jyoung
        知識共有者

        Thank you for your review, sjj-92~ We will continue to provide good lectures. J.young Dream

    • jinfx4205171님의 프로필 이미지
      jinfx4205171

      受講レビュー 1

      平均評価 5.0

      5

      100% 受講後に作成

      Good!

      • jyoung
        知識共有者

        Rulebulnim Thank you for the short and simple but powerful class review. Have a nice day today^^

    ¥5,696

    jyoungの他の講座

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

    似ている講座

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