강의

멘토링

커뮤니티

BEST
Programming

/

Web Development

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

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

難易度 初級

受講期間 無制限

  • jyoung
  • janey23
  • headong2
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

こんにちは
です。

9,034

受講生

366

受講レビュー

227

回答

4.8

講座評価

14

講座

"디자인.개발 포트폴리오 멘토 J.Young입니다."

저는 지난 20년간 웹 디자인 및 앱 개발 회사를 운영하며 현장의 치열함을 몸소 겪어왔습니다. 그 경험을 바탕으로 현재는 대학과 전문 교육 기관에서 UI/UX 디자인부터 프론트엔드 개발까지, 후배 전문가들을 양성하는 데 매진하고 있습니다.

저의 강의 철학은 명확합니다.

  1. 기초부터 실무까지 막힘없는 연결

  2. 현업이 원하는 핵심 기술의 압축

  3. 취업 성공을 부르는 실무형 포트폴리오 완성

어디서부터 시작할지 막막하신 분, 이직을 꿈꾸지만 시간이 부족한 직장인, 그리고 코딩이 남의 이야기처럼 느껴지는 초보자분들까지. 제가 걸어온 20년의 길을 여러분의 지름길로 만들어 드리겠습니다. 당당히 실무자로 서는 그날까지, 여러분의 든든한 사수가 되어 최선을 다해 돕겠습니다.

J.young이 도와드리겠습니다.!!
또한!! 학습하시다 궁금하신 점 있으시면 댓글 남겨주시면
도움이 드릴 수 있는 답을 드리도록 최선을 다하겠습니다.

실무경력

- 2017~현) 웹개발 Director
- 2015년~2017년(주)엘리에셀 총괄 이사
- 2003년~2015년 (주)어뮤징웨어 총괄 이사
- 2003년: 서우씨앤디 디자인실장


- 현)
- UIUX웹기획/ 디자인/프론트엔드 부트캠프 강사 (이젠DX아카데미 -서초점)
- 디자인.개발 포트폴리오 전문 강의 및 그룹 및 개인 지도

 
* 운영중인 유튜브 (코딩하는 디자이너)

보다 원활한 학습을 위해, J.young이 운영하는 잘난웹디 오픈채팅방에 가입하시면,
강의 질문과 포트폴리오 관련 피드백 드립니다.

- 오픈채팅방명 : 잘난웹디
- 코드 : jyoung

 

カリキュラム

全体

26件 ∙ (4時間 0分)

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

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

受講レビュー

全体

22件

4.8

22件の受講レビュー

  • winterlove님의 프로필 이미지
    winterlove

    受講レビュー 4

    平均評価 4.8

    5

    100% 受講後に作成

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

    • jyoung
      知識共有者

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

  • wonsakku님의 프로필 이미지
    wonsakku

    受講レビュー 6

    平均評価 4.3

    5

    100% 受講後に作成

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

    • jyoung
      知識共有者

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

    • jyoung
      知識共有者

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

  • topgun1220님의 프로필 이미지
    topgun1220

    受講レビュー 3

    平均評価 5.0

    5

    100% 受講後に作成

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

    • jyoung
      知識共有者

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

  • jhlee0314님의 프로필 이미지
    jhlee0314

    受講レビュー 2

    平均評価 5.0

    5

    31% 受講後に作成

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

    • chu980505님의 프로필 이미지
      chu980505

      受講レビュー 3

      平均評価 5.0

      5

      65% 受講後に作成

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

      • jyoung
        知識共有者

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

    ¥2,789

    jyoungの他の講座

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

    似ている講座

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