실전! 웹사이트제작! Step by Step! (대방산업_InteractiveWeb)
J.영
[웹사이트제작 Step By Step] 3단계 강의로, 대방산업 메인페이지를 그대로 제작해 보는 과정입니다. 사이트에서 담고있는 화려한 인터렉티브 웹을 그대로 제작 구현해 보는 과정으로 화려한 만큼, 난이도가 있는 강의입니다.
초급
HTML/CSS, 반응형 웹, jQuery
本当!ウェブサイト制作! Step By StepのApplcation Courseで html/ CSS/ jQuery とplug_inを使ってワイスタジオ(http://www.ystudio.co.kr/)のメインページをそのまま製作してみる過程です。 (講義完成ファイル付き!)
受講生 198名
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ページをそのまま実装します。
難しいJavaScriptとjQueryを知らなくても、HTMLとCSSに基づいてライブラリとプラグインを活用して、短時間で素敵でカラフルなWebページを作成するのに役立ちます。
Step By Step!
今すぐ始めましょう。
>> PCモードからタブレット、モバイルモードまでのレスポンシブウェブページ制作(768px)
>> PCモードからタブレット、モバイルモードまでのレスポンシブWebページ制作(414px)
>> PCモードからタブレット、モバイルモードまでのレスポンシブウェブページ制作(320px)
講義が終わったら
得るもの:D
Webページ制作のためには、HTMLとCSSをベースにした、正確なレイアウト作成が最も重要です。 HTMLとCSSは知っていますが、 Layout Designについて全く感が来ていない方も、基礎から丁寧にお知らせする本講義に誠実に従えば、いつのまにかレイアウト制作のしっかりとした基本機が固まっていることを感じることができるでしょう!
業務生産性を向上させるには、ライブラリとプラグインを使用して、短時間でインタラクティブなウェブサイトを実装できる必要があります。本講義では、ウェブページのレイアウト制作からレスポンシブページの製作まで確実に勉強することができ、実務で必要とするスクリプト、プラグイン、アニメーションなどを利用してウェブページを作成します。講義を聞いて着実に実習してみると、いつのまにか業務能力がUP! UP!
仕事の能力を明らかにし、新しい機会をつかむための効果的な準備の1つは、高品質のポートフォリオです。講義を聞いて実習してみると、自分だけのポートフォリオが積み上げられます。本講義だけでなく、以後のウェブサイト制作実習講義を聞きながら着実にWebページを実装してみると、就職で私の最大の武器になってくれるポートフォリオを完成できるはずです。
よりスムーズな学習のために、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,240
受講生
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件の受講レビュー
受講レビュー 1
∙
平均評価 5.0
5
요즘 트렌드 홈페이지들 많이 올려주세요 ~
수정님! 열공해 주시고 수강평 남겨주셔서 정말 감사합니다. 수강평에 힘 입어 더 좋은 강좌로 인사드리도록 하겠습니다. 현재 트랜드에 맞는 인터렉트브웹 촬영중에 있구요...조만간 멋지고 화려하면서 이해하기 쉽도록 제작하여 올리도록 하겠습니다. 꾸준한 사랑과 관심 부탁드리겠습니다 감사합니다^^
受講レビュー 4
∙
平均評価 5.0
受講レビュー 4
∙
平均評価 4.8
5
혼자 책 보면서 실습하려니 제대로 되지 않았는데 J.영님의 와이스튜디오 반응형웹 강좌를 듣고나니 체계가 잡히는 것 같아요. 차근차근 마크업을 따라하니 쉽게 느껴지고 이젠 자신감이 생겨요^^ 감사합니다.
kate님 수강평 감사드립니다. 제 강의를 들으시고 자신감이 생기셨다니 제가 더 감사한 일이지요.. 항상 최신 트렌드에 맞고 실무 활용 응용이 높은 강의로 준비할 것이고 포폴 제작에도 크게 도움될 수 있는 강좌로 뵙도록 하겠습니다 감사합니다 오늘도 좋은 하루 되십시요^^
¥5,704
知識共有者の他の講座を見てみましょう!
同じ分野の他の講座を見てみましょう!