inflearn logo
inflearn logo

本当!ウェブサイト制作! Step By Step! _Basic(ハンファキャミカル_反応型ウェブ)

HTML5とCSS3を活用してウェブサイト(ハンファキャミカル/ソリューション)を制作実習過程で、 PCモードレイアウトとレスポンシブページ制作を完全に理解し、活用できる 本番!ウェブページ制作! Step by Step!のBasic Course講座です。 (講義完成ファイル付き!)

難易度 初級

受講期間 無制限

HTML/CSS
HTML/CSS
Responsive Web
Responsive Web
jQuery
jQuery
Interactive Web
Interactive Web
HTML/CSS
HTML/CSS
Responsive Web
Responsive Web
jQuery
jQuery
Interactive Web
Interactive Web
날개 달린 동전

講座 を紹介して、成長と収益を得ましょう!

날개 달린 동전

マーケティングパートナーズ

講座 を紹介して、成長と収益を得ましょう!

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

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

4.8

5.0

김혜경

100% 受講後に作成

AdobeでBracketが初めて出たときに歓声を上げた1人でした^^ エディターはさまざまですが、講師がブラケットで講義してくれて印象的でした。 レスポンシブページを作成しながら、基本的な部分を慎重に教えてくれてありがとう。 タグ理解から開発者ツール活用法まで本当にお得な講座よく聞きました。 周りの知人に強力推薦したい講座、これからもたくさん開設してください。 暑さに疲れないで健康に気をつけてください^^

5.0

ws k

100% 受講後に作成

本当に満足な講義でした。 講義で使用するhtmlタグやcss属性はほとんどすべて知っているものです。 コードを打ち、保存し、F5を押すたびに画面が変わることは驚くほど不思議でした。 次の講義も期待され、良い講義を頂きありがとうございます。

5.0

조동찬

100% 受講後に作成

現在個人事業をしている40代前半の仮装です。今後の第4次産業革命時代に備えて、IT関連技術の核心であるコーディングに関心があり、基礎から身につけ、会社のホームページも直接製作するつもりで検索し、講師の講義を受講することになりました。 HTMLとCSSの基礎だけを知っている状態でしたが、講師様の講義を聞いて実際のウェブページを制作してみると理解が上手くなり、実際の活用法も多く学びました。この講義をきっかけにウェブページ制作に対する自信を得たとても役に立つ講義でした。講師の大方産業講義もまもなく受講予定です。講師の講義で学んだことを基に、素敵な会社のホームページも作り、関連するJavaScript言語も学習し続け、フロントエンターテインメントの開発までしてみようと思います。ありがとうございます。

受講後に得られること

  • WebアクセシビリティHTML 5 MarkUp - 文書構造の定義

  • 様々なCSS3の属性を理解し、レイアウトデザインを適用

  • ブロックとインライン属性の理解と適用

  • ポジションの理解と応用

  • アニメーション制作の理解と応用

  • 仮想選択者の理解と適用(:before、:after)

  • Skip_nav 製作

  • 様々な様々なホバー、フォーカス効果

  • z-indexの理解と適用

  • FontAwesomeの使い方と適用

  • Googleフォントの使い方と適用

  • 開発者ツールの活用法

  • 反応型ウェブページの製作方法と適用


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


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

 

本講義はウェブサイト制作シリーズ講義である「本番!ウェブサイト制作Step By Step」Basic Curseで、ハンファソリューション/ケミカルサイトのメインページをそのまま製作してみる講義です。

「実戦! ウェブサイト制作 Step By Step」 講義シリーズは現在商用化されているウェブサイトの中で、最新トレンドに合わせて審美的な要素に優れ、ポートフォリオ制作に適したウェブサイトを選択してそのまま製作してみる講義で構成されていますので学習にご参考ください。

>> CSS Animation 制作


>>マウスホバー時のスケールが大きくなる - CSS Animation製作

>> 仮想コンテンツを利用してマウスホバー時にスライドされるアニメーション制作

>> PCモードレイアウトからタブレット(1024px、768px)、モバイル解像度(414px、320px)製作

>> PCモードレイアウトからタブレット(1024px、768px)、モバイル解像度(320px)スクロール画面

講義はHTMLとCSSの基礎はありますが、レイアウトに対する感が全くない方を対象に実際のWebページをそのまま実装して進行されます。ハンファソリューション/ケミカルサイトのメインページを直接制作してみる過程を通じて、 HTML5とCSS3を活用してレイアウト制作に対する理解を高め、どんなレイアウトを制作しても自信を持って応用して制作できるよう皆様をお手伝いします。
レスポンシブページの制作についての完璧な理解と制作能力の強化はもちろん、優れたクオリティのポートフォリオも持参できるように、次々と一緒に学習しましょう。

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


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

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

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

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

2. 業務生産性UP!

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

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

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

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

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

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

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

1.ウェブアクセス性をhtml MarkUp-文書構造定義
2. 様々なCSS3の属性を理解し、レイアウトデザインを適用
3.positionの理解と適用
4.BlockとInline属性の理解と適用
5.Animationの理解と適用
6.仮想選択者の理解と適用(:before、:after)
7.様々なhover、focus効果
8 .z-indexの理解と適用
9.skip_nav制作
10.FontAwesomeの使用法と適用
11.Googleフォントを使う
12.開発者ツールの活用法

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

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

ここで扱うツール

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


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

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

こんな方に
おすすめです

学習対象は
誰でしょう?

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

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

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

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

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

  • HTML/CSS

こんにちは
jyoungです。

9,110

受講生

367

受講レビュー

227

回答

4.8

講座評価

14

講座

「デザイン・開発ポートフォリオメンターのJ.Youngです。」

私は過去20年間にわたり、ウェブデザインおよびアプリ開発会社を運営しながら、現場の厳しさを身をもって経験してきました。その経験を活かし、現在は大学や専門教育機関でUI/UXデザインからフロントエンド開発まで、後進の専門家育成に邁進しています。

私の講義哲学は明確です。

  1. 基礎から実務まで 滞りのない繋がり

  2. 現場が求める核心技術の凝縮

  3. 就職成功を導く実務型ポートフォリオの完成

何から始めればいいか分からず途方に暮れている方、転職を夢見ているものの時間が足りない社会人の方、そしてコーディングが自分とは無縁の話に感じられる初心者の方まで。私が歩んできた20年の道のりを、皆さんの近道へと変えて差し上げます。堂々と実務家として立てるその日まで、皆さんの心強い教育係(サス)となり、最善を尽くしてサポートいたします。

J.youngがお手伝いいたします!!
また!!学習中にご不明な点がございましたら、コメントを残していただければ
お役に立てるよう最善を尽くして回答させていただきます。

実務経歴

- 2017~現在) Web開発ディレクター
- 2015年~2017年 (株)エリエゼル 総括理事
- 2003年~2015年 (株)アミュージングウェア 総括理事
- 2003年: ソウC&D デザイン室長


- 現)
- UIUXウェブ企画/デザイン/フロントエンド ブートキャンプ講師(Ezen DXアカデミー -瑞草店)
- デザイン・開発ポートフォリオ専門講義およびグループ・個人指導


* 運営中のYouTube(コーディングするデザイナー)

よりスムーズな学習のために、J.youngが運営する「チャルナンウェブディ(デキるWebデザイナー)」オープンチャットに参加していただければ、
講義の質問やポートフォリオに関するフィードバックを差し上げます。

- オープンチャット名:잘난웹디
- コード:jyoung

 

もっと見る

共同知識共有者

カリキュラム

全体

26件 ∙ (4時間 0分)

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

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

受講レビュー

全体

22件

4.8

22件の受講レビュー

  • jhlee0314님의 프로필 이미지
    jhlee0314

    受講レビュー 2

    平均評価 5.0

    5

    31% 受講後に作成

    集中してやっていると、あっという間に時間が過ぎていく... 退屈する暇がありませんね^^ 実戦投入前にcloneコーディング式で学習するのを強くお勧めします。

    • winterlove님의 프로필 이미지
      winterlove

      受講レビュー 4

      平均評価 4.8

      5

      100% 受講後に作成

      AdobeでBracketが初めて出たときに歓声を上げた1人でした^^ エディターはさまざまですが、講師がブラケットで講義してくれて印象的でした。 レスポンシブページを作成しながら、基本的な部分を慎重に教えてくれてありがとう。 タグ理解から開発者ツール活用法まで本当にお得な講座よく聞きました。 周りの知人に強力推薦したい講座、これからもたくさん開設してください。 暑さに疲れないで健康に気をつけてください^^

      • jyoung
        知識共有者

        kateに感謝します。 私の講座大事にして、一生懸命聞いてくれたことをよく知っています。誠にありがとうございます。 私がより良い講義で実力とスキルをアップグレードさせていただけるように 最善の姿勢で準備させていただきます。 次の講座は7月中にオープン予定です。引越しのある関係で発売が遅れて申し訳ありません。もう一度ありがとうございます^^

    • topgun1220님의 프로필 이미지
      topgun1220

      受講レビュー 3

      平均評価 5.0

      5

      100% 受講後に作成

      現在個人事業をしている40代前半の仮装です。今後の第4次産業革命時代に備えて、IT関連技術の核心であるコーディングに関心があり、基礎から身につけ、会社のホームページも直接製作するつもりで検索し、講師の講義を受講することになりました。 HTMLとCSSの基礎だけを知っている状態でしたが、講師様の講義を聞いて実際のウェブページを制作してみると理解が上手くなり、実際の活用法も多く学びました。この講義をきっかけにウェブページ制作に対する自信を得たとても役に立つ講義でした。講師の大方産業講義もまもなく受講予定です。講師の講義で学んだことを基に、素敵な会社のホームページも作り、関連するJavaScript言語も学習し続け、フロントエンターテインメントの開発までしてみようと思います。ありがとうございます。

      • jyoung
        知識共有者

        チョ・ドンチャン 受講評ありがとうございます^^ 今からいくらでもフロントエンドまで 勉強できます~~ 会社のホームページもご存知であれば管理ができるだけ 学びの道!!応援致します!!! 続いて大方産業も受講していただきありがとうございます。 大方産業レイアウトとカラフルなインタラクティブ要素を追加します。 多くの助けになります。 ありがとうございます^^ J.youngドリーム

    • wonsakku님의 프로필 이미지
      wonsakku

      受講レビュー 6

      平均評価 4.3

      5

      100% 受講後に作成

      本当に満足な講義でした。 講義で使用するhtmlタグやcss属性はほとんどすべて知っているものです。 コードを打ち、保存し、F5を押すたびに画面が変わることは驚くほど不思議でした。 次の講義も期待され、良い講義を頂きありがとうございます。

      • jyoung
        知識共有者

        WS Kさん 熱工してくださった店と良い受講評 本当にありがとうございました。 もっと一生懸命撮影しなければならないという意志ができます^^ 今後もっと良いコースに…いつも一緒にします 誠にありがとうございます。 今日も良い一日になります^^

      • jyoung
        知識共有者

        こんにちは~~ ws kさん受講評イベントお知らせアップしました~~^^ 確認してください

    • chu980505님의 프로필 이미지
      chu980505

      受講レビュー 3

      平均評価 5.0

      5

      65% 受講後に作成

      html、cssを学んだが、混乱が多かったのですが、ウェブ制作しながらどこでどのように使用するかよく知っていただき、簡単に復習できました!

      • jyoung
        知識共有者

        cnqjatlr2175さん、ありがとうございます。 以後、私が今回アップロードしたhtml/css基礎タンタン超スピード緩強コース講義(無料講義)も 聞いてみると実務活用に多くの役に立つと思われます。 基礎講義ですが、実務適用に役立ちます。 ありがとうございます^^ J.youngドリーム

    jyoungの他の講座

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

    似ている講座

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

    ¥2,797