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

/

Web Development

本当!ウェブサイト制作! Step by Step! (ワイスタジオ_反応型ウェブ)

本当!ウェブサイト制作! Step By StepのApplcation Courseで html/ CSS/ jQuery とplug_inを使ってワイスタジオ(http://www.ystudio.co.kr/)のメインページをそのまま製作してみる過程です。 (講義完成ファイル付き!)

HTML/CSS
Responsive Web
jQuery
Interactive Web

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

こんなことが学べます

  • HTML5/CSS3を活用したレイアウト設計

  • Webフォントアイコンを適用する方法(linearicon)

  • ウェブフォントの適用方法(googlefonts)

  • 様々なマウスオーバー効果

  • 開発者ツールの活用法

  • jQuery:ハンバーガーメニューをクリックすると表示されるgnb jQuery

  • jQuery:スクロール時に上部に修正されるheader jQuery

  • jQuery:上移動ボタンを押したときにスムーズに上に移動するjQuery

  • plug-in: スクロール時に進行するアニメーション(scrolla.jquery適用法)

  • plug-in : アニメーションが入ったイメージスライド (slick プラグイン)

  • レスポンシブウェブページを作成する(PCモード、タブレットモード、モバイルモード)

  • レスポンシブ:メディアクエリの使い方

  • レスポンシブ:ビューポート


HTMLとCSSだけを知っていても
ウェブページ制作OK!


UI.UXデザイナーやフロントエンド開発者として就職を希望される方は最近のトレンドに合ったWebページを実装したポートフォリオが少なくとも5~6個は必須です


本講義は現在商用化されているウェブサイトの中で2020年のトレンドに合わせて審美的な要素に優れ、ポートフォリオ制作に適したウェブサイトを選択してそのまま制作してみる講義です


レッスンは、HTML
CSSに関する基本的な知識を持つユーザーを対象に、実際のWebページをそのまま実装します
難しいJavaScriptjQueryを知らなくても、HTMLCSSに基づいてライブラリとプラグインを活用して、短時間で素敵でカラフルなWebページを作成するのに役立ちます

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


実務で必要なインタラクティブな要素で構成されたウェブページの講義を聞きながら、ポートフォリオも一緒に準備していれば講義の終わり頃には高品質のポートフォリオを完成して就職成功にさらに近づくことができるでしょう。

>> PCモードからタブレット、モバイルモードまでのレスポンシブウェブページ制作(768px)

>> PCモードからタブレット、モバイルモードまでのレスポンシブWebページ制作(414px)

>> PCモードからタブレット、モバイルモードまでのレスポンシブウェブページ制作(320px)

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

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

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

2. 業務生産性UP!

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

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

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

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

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

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

視線を捉えるウェブサイト制作のため
カリキュラムを学ぶ

1. レイアウトキャッチ html/ccs
- Webフォントのアイコンを適用する方法linearicon
- ウェブフォントを適用する方法googlefonts
- 様々なマウスオーバー効果
- 開発者ツールの活用法

2.シンプルなjqueryを使う
- ハンバーガーメニューをクリックすると出てくるgnb jQuery
- スクロール時に上部に修正される header jQuery
- 上部移動ボタンを押したときにスムーズに上部に移動するjQuery

3. さまざまなジェイクエリプラグインを適用して、よりシンプルで効果的にWebページを作成
- スクロール時に進行するアニメーション - scrolla.jqueryプラグイン適用法/オプション使用法
- アニメーションが入った画像スライド - slickプラグインの適用方法/オプションの使用方法

4.レスポンシブWebページを設定する
- media queryの使い方
- viewport

この講義だけの特別なポイント!気になりました!

Q1.就職に役立ちますか?
A1.長文の文章よりも一つのイメージがより強烈に届きます。講義を聞いてウェブページを制作しておけば、人事担当者の目にはっきりとした華やかなポートフォリオを作ることができ、就職に大いに役立つでしょう。

ここで扱うツール

この講義以降、デザイン風とスタイルが異なる
10のウェブサイト制作講義が順次オープンされます。


ポートフォリオを準備する受講生の方はこれを参考に、高品質のウェブページ制作を一緒にしてください。

 

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

こんな方に
おすすめです

学習対象は
誰でしょう?

  • Webデザイナー、パブリッシャーとして就職のために様々なレイアウトを設計実装したい方

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

  • グラフィックデザイナーがフロント&開発者に転向したい方。

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

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

  • HTML/CSS

こんにちは
です。

8,242

受講生

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

カリキュラム

全体

32件 ∙ (5時間 24分)

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

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

受講レビュー

全体

16件

4.9

16件の受講レビュー

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

    受講レビュー 2

    平均評価 5.0

    5

    81% 受講後に作成

    고퀄리티 강의 감사합니다

    • J.영
      知識共有者

      지영님 수고 정말 많으셨습니다~ 빠른 시간내에 강의를 마치셨군요... 감사드리구요... 현재 다음 단계 과정 강의 준비중에 있으니 지속적인 관심 부탁드리겠습니다 감사합니다^^

  • SooJung Jo님의 프로필 이미지
    SooJung Jo

    受講レビュー 1

    平均評価 5.0

    5

    97% 受講後に作成

    요즘 트렌드 홈페이지들 많이 올려주세요 ~

    • J.영
      知識共有者

      수정님! 열공해 주시고 수강평 남겨주셔서 정말 감사합니다. 수강평에 힘 입어 더 좋은 강좌로 인사드리도록 하겠습니다. 현재 트랜드에 맞는 인터렉트브웹 촬영중에 있구요...조만간 멋지고 화려하면서 이해하기 쉽도록 제작하여 올리도록 하겠습니다. 꾸준한 사랑과 관심 부탁드리겠습니다 감사합니다^^

  • 박수민님의 프로필 이미지
    박수민

    受講レビュー 1

    平均評価 5.0

    5

    100% 受講後に作成

    따라가기 쉽게 강의해주셔서 어렵지 않고 재밋게 강의 완료 할 수 있었습니다! 감사합니다😊

    • J.영
      知識共有者

      수민님 수강평 감사드립니다. 더욱 더 좋은강의로 찾아뵙도록 하겠습니다. J.young드림

  • Choi Jason님의 프로필 이미지
    Choi Jason

    受講レビュー 4

    平均評価 5.0

    5

    97% 受講後に作成

    좋은 강의 감사합니다.

    • J.영
      知識共有者

      Choi Jason님 수강평 감사합니다 앞으로 더 더욱 유익한 강의 준비하겠습니다~~^^ 오늘도 좋은 하루 되셔요 ^^~~

  • 김혜경님의 프로필 이미지
    김혜경

    受講レビュー 4

    平均評価 4.8

    5

    100% 受講後に作成

    혼자 책 보면서 실습하려니 제대로 되지 않았는데 J.영님의 와이스튜디오 반응형웹 강좌를 듣고나니 체계가 잡히는 것 같아요. 차근차근 마크업을 따라하니 쉽게 느껴지고 이젠 자신감이 생겨요^^ 감사합니다.

    • J.영
      知識共有者

      kate님 수강평 감사드립니다. 제 강의를 들으시고 자신감이 생기셨다니 제가 더 감사한 일이지요.. 항상 최신 트렌드에 맞고 실무 활용 응용이 높은 강의로 준비할 것이고 포폴 제작에도 크게 도움될 수 있는 강좌로 뵙도록 하겠습니다 감사합니다 오늘도 좋은 하루 되십시요^^

¥5,715

jyoungの他の講座

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

似ている講座

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