本当！ウェブサイト制作！ Step by Step！ （対バン産業_InteractiveWeb）

 

HTMLとCSSだけを知っていても

Webページ＆Interative Web制作OK！

本講義はウェブサイト制作Step By Step！制作実装してみる講座です。

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

講義は、HTMLとCSSに関する基本的な知識を持つ方々を対象に、実際のWebページをそのまま実装して進行されます。難しいJavaScriptとjQueryを知らなくても、 HTMLとCSSに基づいてライブラリとプラグインを活用して、短時間で素敵でカラフルな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ページ制作のためには、HTMLとCSSをベースにした、正確なレイアウト作成が最も重要です。 HTMLとCSSの基礎はありますが、 Layout Designについて全く感が来ない方も、基礎から丁寧にお知らせする本講義に誠実に従えば、いつのまにかレイアウト制作のしっかりした基本基盤が固まっていることを感じられるでしょう！

2. 業務生産性UP！

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

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

仕事の能力を明らかにし、新しい機会をつかむための効果的な準備の一つは、まさに高品質のポートフォリオです。ページを実装してみると、就職で私の最大の武器になってくれるポートフォリオを完成できるはずです。

4. オープンチャット방運営

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

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

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