本当！ウェブサイト制作！ Step by Step！ （対バン産業_InteractiveWeb）
jyoung
[ウェブサイト制作 Step By Step] 3段階講義で、大方産業メインページをそのまま製作してみる過程です。 サイトで盛り込んでいる華やかなインタラクティブウェブをそのまま製作実装してみる過程で華やかな分、難易度のある講義です。
초급
HTML/CSS, Responsive Web, jQuery
BEST
本当！ウェブサイト制作！ Step By Step! _Basic（ハンファキャミカル_反応型ウェブ）
HTML5とCSS3を活用してウェブサイト（ハンファキャミカル/ソリューション）を制作実習過程で、 PCモードレイアウトとレスポンシブページ制作を完全に理解し、活用できる 本番！ウェブページ制作！ Step by Step!のBasic Course講座です。 （講義完成ファイル付き！）
（4.8）受講レビュー 21件
受講生 288名
HTML/CSS
Responsive Web
jQuery
Interactive Web
学習した受講者のレビュー
こんなことが学べます
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）スクロール画面
.gif)
講義はHTMLとCSSの基礎はありますが、レイアウトに対する感が全くない方を対象に実際のWebページをそのまま実装して進行されます。ハンファソリューション/ケミカルサイトのメインページを直接制作してみる過程を通じて、 HTML5とCSS3を活用してレイアウト制作に対する理解を高め、どんなレイアウトを制作しても自信を持って応用して制作できるよう皆様をお手伝いします。
レスポンシブページの制作についての完璧な理解と制作能力の強化はもちろん、優れたクオリティのポートフォリオも持参できるように、次々と一緒に学習しましょう。
Step By Step!
今すぐ始めましょう。
実務で必要なインタラクティブな要素で構成されたウェブページの講義を聞きながら、ポートフォリオも一緒に準備していれば、講義の終わり頃には高品質のポートフォリオを完成して就職成功にさらに近づくことができるでしょう。
講義が終わったら
得るもの：D
1. しっかりしたレイアウト製作実力
Webページ制作のためには、HTMLとCSSをベースにした、正確なレイアウト作成が最も重要です。 HTMLとCSSの基礎はありますが、 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
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
共同知識共有者
カリキュラム
全体
26件 ∙ (4時間 0分)
講座資料（こうぎしりょう）:
授業資料
講座掲載日:
最終更新日:
受講レビュー
全体
21件
4.8
21件の受講レビュー
- runa3311085
受講レビュー 4
∙
平均評価 4.8
5
100% 受講後に作成AdobeでBracketが初めて出たときに歓声を上げた1人でした^^ エディターはさまざまですが、講師がブラケットで講義してくれて印象的でした。 レスポンシブページを作成しながら、基本的な部分を慎重に教えてくれてありがとう。 タグ理解から開発者ツール活用法まで本当にお得な講座よく聞きました。 周りの知人に強力推薦したい講座、これからもたくさん開設してください。 暑さに疲れないで健康に気をつけてください^^
- jyoung知識共有者
kateに感謝します。 私の講座大事にして、一生懸命聞いてくれたことをよく知っています。誠にありがとうございます。 私がより良い講義で実力とスキルをアップグレードさせていただけるように 最善の姿勢で準備させていただきます。 次の講座は7月中にオープン予定です。引越しのある関係で発売が遅れて申し訳ありません。もう一度ありがとうございます^^
wonsakku受講レビュー 6
∙
平均評価 4.3
5
100% 受講後に作成本当に満足な講義でした。 講義で使用するhtmlタグやcss属性はほとんどすべて知っているものです。 コードを打ち、保存し、F5を押すたびに画面が変わることは驚くほど不思議でした。 次の講義も期待され、良い講義を頂きありがとうございます。
- topgun1220
受講レビュー 3
∙
平均評価 5.0
5
100% 受講後に作成現在個人事業をしている40代前半の仮装です。今後の第4次産業革命時代に備えて、IT関連技術の核心であるコーディングに関心があり、基礎から身につけ、会社のホームページも直接製作するつもりで検索し、講師の講義を受講することになりました。 HTMLとCSSの基礎だけを知っている状態でしたが、講師様の講義を聞いて実際のウェブページを制作してみると理解が上手くなり、実際の活用法も多く学びました。この講義をきっかけにウェブページ制作に対する自信を得たとても役に立つ講義でした。講師の大方産業講義もまもなく受講予定です。講師の講義で学んだことを基に、素敵な会社のホームページも作り、関連するJavaScript言語も学習し続け、フロントエンターテインメントの開発までしてみようと思います。ありがとうございます。
- jyoung知識共有者
チョ・ドンチャン 受講評ありがとうございます^^ 今からいくらでもフロントエンドまで 勉強できます~~ 会社のホームページもご存知であれば管理ができるだけ 学びの道!!応援致します!!! 続いて大方産業も受講していただきありがとうございます。 大方産業レイアウトとカラフルなインタラクティブ要素を追加します。 多くの助けになります。 ありがとうございます^^ J.youngドリーム
- cnqjatlr21758261
受講レビュー 3
∙
平均評価 5.0
5
65% 受講後に作成html、cssを学んだが、混乱が多かったのですが、ウェブ制作しながらどこでどのように使用するかよく知っていただき、簡単に復習できました！
- jyoung知識共有者
cnqjatlr2175さん、ありがとうございます。 以後、私が今回アップロードしたhtml/css基礎タンタン超スピード緩強コース講義（無料講義）も 聞いてみると実務活用に多くの役に立つと思われます。 基礎講義ですが、実務適用に役立ちます。 ありがとうございます^^ J.youngドリーム
- dbstjdgy61339
受講レビュー 28
∙
平均評価 4.9
￥2,687
jyoungの他の講座
知識共有者の他の講座を見てみましょう！
.png?f=avif&w=420)
似ている講座
同じ分野の他の講座を見てみましょう！
![Bootstrap を活用したレスポンシブ Web 制作 [基本概念編] ブートキャンプ강의 썸네일](https://cdn.inflearn.com/public/courses/333092/cover/5a3043a4-fc2d-4b25-9096-306c8f707b5b/333092.jpg?f=avif&w=420)
![ウェブデザイン開発技能士 [2025年] 実技全体 (カカオトーク質問可能)강의 썸네일](https://cdn.inflearn.com/public/courses/332868/cover/3a2245ca-bb9f-414a-ba67-403cfcb2b7c9/332868.jpg?f=avif&w=420)
![[幻想的な足足]デザインからコーディングまで강의 썸네일](https://cdn.inflearn.com/public/courses/332845/cover/5d0ef569-50e5-4300-96ed-3205d526795b/332845.png?f=avif&w=420)
![[2025年出題基準] Webデザイン技能士実技試験完全ガイド강의 썸네일](https://cdn.inflearn.com/public/courses/324878/course_cover/12211037-e74b-46b3-8942-46d465b81bba/webdesign-cover-02.png?f=avif&w=420)
