本当!ウェブサイト制作! Step By Step! (「フォーメイン」_フルページサイト制作)
jyoung
本番! ウェブサイト制作 Step By Step! フォーメイン(https://www.phomein.com/brand/main/main.do) 、実装してみる過程で複雑なレイアウトも簡単かつ迅速に制作する実務コアノウハウをそのままお知らせします^^
Cơ bản
HTML/CSS, Interactive Web, Clone Coding
本当!ウェブサイト制作! Step By StepのApplcation Courseで html/ CSS/ jQuery とplug_inを使ってワイスタジオ(http://www.ystudio.co.kr/)のメインページをそのまま製作してみる過程です。 (講義完成ファイル付き!)
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,500
受講生
330
受講レビュー
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
高品質講義ありがとうございます
ジヨンさん、本当に疲れました〜 早い時間内に講義を終えました… ありがとうございます... 現在、次のステップコース講義の準備中です。 継続的な関心をお寄せいたします。 ありがとうございます^^
受講レビュー 1
∙
平均評価 5.0
5
最近のトレンドホームページをたくさんアップロードしてください〜
修正!熱工してくれて受講坪を残してくれて本当にありがとうございます。受講評に力を入れて、より良い講座に挨拶させていただきます。 現在トレンドに合ったインタラクティブウェブ撮影中にいますね…近いうちに素敵で派手で理解しやすいように制作して上げるようにします。着実な愛と関心をお寄せいただきありがとうございます^^
受講レビュー 1
∙
平均評価 5.0
5
フォローしやすく講義してくれて難しくなくジャミッと講義完了できました!ありがとうございます😊
スミン様受講評ありがとうございます。さらに良い講義でお会いしましょう。 J.youngドリーム
受講レビュー 4
∙
平均評価 5.0
5
良い講義ありがとうございます。
Choi Jasonさん 受講評 ありがとうございます 今後もっとお得な講義準備させていただきます~~^^ 今日も良い一日になります ^^~~
受講レビュー 4
∙
平均評価 4.8
5
一人で本を見ながら実習しようと、きちんとできなかったのですが、J.ヤング様のワイスタジオ反応型ウェブ講座を聞いてみると体系が取れているようです。じっくりマークアップに従うと簡単に感じられてもう自信ができます^^ ありがとうございます。
kateさん 受講評 ありがとうございます。 私の講義を聞いて自信があったなんて私がもっと感謝したことでしょう.. 常に最新のトレンドに合わせて実務活用応用が高い講義で準備します。 ポポール製作にも大いに役立つ講座でお会いしましょう ありがとう 今日も良い一日になります^^
¥5,802
知識共有者の他の講座を見てみましょう!
同じ分野の他の講座を見てみましょう!