inflearn logo
inflearn logo

モダン ウェブ インタラクティブ CSS3 [PART3/3]

小学生コーディング教育から始まり、ITソフトウェア学科の高校生、カム工科大学生、非専攻者である就学生を対象に、15年以上にわたってコーディング教育に専念してきた現職スター講師ヤングコーディーキムサムの簡単で面白いコーディング講義を、今やオフラインだけでなくオンラインでも会えるあります。 500人以上のフロントエンド、バックエンド、フルスタック、Web開発者を輩出してきたヤングコーディーキムサムと一緒なら、あなたの開発者の夢もすぐに現実になります!

5名 が受講中です。

難易度 入門

受講期間 無制限

HTML/CSS
HTML/CSS
Web Design
Web Design
css3
css3
Interactive Web
Interactive Web
Clone Coding
Clone Coding
HTML/CSS
HTML/CSS
Web Design
Web Design
css3
css3
Interactive Web
Interactive Web
Clone Coding
Clone Coding
날개 달린 동전

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

날개 달린 동전

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

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

受講後に得られること

  • CSS の基本から、トランジション、アニメーション、変換を含む高度なインタラクティブ Web アプリケーションまで、この 1 つのコースで完全に習得できます。

  • 仮想セレクターを活用したショッピングモールコンテンツの作成

  • Photoshop を使用せずに画像を補正する CSS3 補正手法

  • レスポンシブ ウェブを作成する FLEX の最新文法

  • GitHub と DotHome を通じて Web ホスティングを使用して Web サイトを Web に公開する

モダンウェブインタラクティブCSS3は[基本スタイルからインタラクティブなアニメーションまでの概念を学び、すぐに適用することで実戦スキルを素早く向上させることができます。]

CSSはCascading Style Sheetの略で、Cascadingは階層的な、滝のような意味を持つ単語です。cssは文字通りhtml構造の親子関係を階層的に選択して、望む要素に望むスタイルの色や形、アニメーションを適用し、ユーザーのマウスの動きやクリックイベントに反応してコンテンツ要素が動作するため、ユーザーにとって退屈ではなく興味深く面白いウェブをデザインできる要素を制作して適用します。また、様々なモバイルデザイン、ウェブデザイン、アニメーションデザイン、レスポンシブデザインなど実務サイトをクローンコーディングしながら、様々な構造とスタイルのHTML/CSSを繰り返し練習して多様な実習経験を積むことで、cssに完璧な自信を持って楽しくコーディングし、実力がぐんぐん向上する喜びを感じるようになります。

👩🏻‍💻 本当に基礎から始める

非専攻者のためのフロントエンド、バックエンド、フルスタック就職コース

モダンウェブインタラクティブCSS3講座の特徴

15年の講義ノウハウをぎゅっと詰め込んだ講義🎯


小学校のコーディング教育、ITソフトウェア学科の高校生、コンピュータ工学科の大学生、非専攻者の就活生を対象に15年以上コーディング教育に専念してきた現職スター講師ヨンコディ・キム先生のこれまでのノウハウをぎゅっと詰め込んだ分かりやすくて楽しいCSS3コーディング講義です。

CSSの基礎の第一歩から始めて、高度なアニメーションとインタラクティブなWeb制作スキルまで一度にすべて詰め込みました。


分かりやすくて面白い説明に命をかけるタイプ 👨‍🏫


英語コーディングのキム先生の分かりやすく楽しい説明と独特の暗記法を通じて、超初心者でも段階的に簡単に理解しながら成長できるよう絶えず努力しているキム先生です。

また、様々なクローンコーディングを通じて実務ウェブ開発を段階的に身につけることができます。本当に基礎から始める非専攻者のためのウェブデザイン、フロントエンド、バックエンド、フルスタック就職コースを通じて開発者への夢に挑戦してみてください。


各チャプターでSELF_EXを解いて実力チェック


各チャプターで提供されるSELF_EX問題を通じて、学習した内容を自分でチェックしながら実力を積むことができます。各単元の核心概念と実習内容を基に構成された問題は、CSS学習の理解度を確認し、不足している部分を補完するのに大きな助けとなります。

反復学習と問題演習を並行しながら自然に実力が向上し、着実な成長を続けられるよう支援する重要なチェックポイントの役割を果たします。

📚モダンウェブインタラクティブCSS3ではこんなことを学びます!

sprites技法、sticky属性などを利用してナビゲーションがあるmikimottesの実務アニメーションウェブサイト制作

animate.cssライブラリを活用して簡単に様々なアニメーションをサイトに即座に適用する

マウスホバー時にショッピングモールの商品説明が表示されるなど、ショッピングモールでよく使われるショッピングモール制作のコツ

クリック時に希望するメニューに移動する動的なナビゲーション制作

マウスホバーとクリック時に楽しくアニメーションする要素を様々に制作してみる

Photoshopを全く使わずに、コーディングだけでblending modeやfilterなど様々な補正を適用する

2D、3D transformを活用してマウスに反応するインタラクティブなウェブ制作してみる

Flexの最新技法を活用してレスポンシブWebを制作する原理の理解と多彩な例題実習


🎬モダンウェブインタラクティブCSS3 PART3 学習内容

  1. 実務Webをクローンコーディングで制作し、コーディングで変身するTransformを体験してみます。

  2. タブリストをクリックすると該当コンテンツが表示されるtab contentsを実装してみます。

  3. 仮想セレクターの活用でインタラクティブなWebショッピングモールを実装してみます。

  4. フィルター機能とブレンディング技法でPhotoshopなしにコーディングで補正を実装してみます。

  5. Flexの様々なプロパティを理解し、実習してマスターしてみます。

  6. GitHubとDothomeにweb-hostingして、私のウェブサイトを世界に無料で公開してみます。

HTML/CSS、ウェブデザイン、css3、インタラクティブウェブ、クローンコーディング

英コーディのキム先生は現在、国費支援ブートキャンプでフロントエンドデザイナー、バックエンド開発者、ウェブデザイナー、フルスタック開発者など500名以上を継続的に輩出しており、「受講生が選ぶ知人に推薦したい授業1位」に継続的にランクアップしています。

実際の受講レビュー確認はこちら | https://greenart.co.kr/community/student_review

フロントエンド、バックエンド、フルスタック、ウェブ開発、ウェブデザイン、ウェブデザイナー就職コース

풀스택 로드맵4

Spring Boot、JPA、TDD、JSP、Java、スプリング、スプリングブート、リアクト、フロントエンド、バックエンド、フルスタック、ジャバ

非専攻者のためのフルスタック課程では、各コース過程別に何を学びますか?

STEP01 | 非専攻者のための [HTML スターター] ブートキャンプ[該当コース移動 クリック]

htmlの意味と基本コードの書き方およびレイアウト作成

ウェブ開発をするということは、誰でも来ることができる店舗をオンライン上に作ることと同じです。HTMLはHyper Text Markup Languageの略で、ウェブページの主要な核心内容となる情報を持って基本骨組みを作る作業を学びます。


STEP02 | 非専攻者のための [CSSスタイルからアニメーションまで] ブートキャンプ [該当コース移動 クリック]

CSSの意味と基本コードの書き方から、希望するスタイルをhtmlに適用してWebデザインする方法まで

CSSはCascading Style Sheetの略で、Cascadingは階層的な、滝のような意味を持つ単語です。cssは文字通りhtml構造の親子関係を階層的に選択して、望む要素に望むスタイルの色や形、アニメーションを適用し、ユーザーが見て退屈ではなく興味深く美しいウェブをデザインできるシートを作成して適用します。また、cssに自信が持てるまで様々な実務サイトのクローンデザイン、モバイルデザイン、ウェブデザインをHTML/CSSを反復的にコーディングしながらウェブデザインを多様に制作する経験を積みます。


STEP03 | 非専攻者のための [JSからReactまで] ブートキャンプ[該当コース移動クリック]

バニラスクリプトとJavaScript ES6文法を習得してReactを活用する

もしかして、Reactを勉強していて挫折したことはありませんか?キム先生のクラスでは、Reactの基礎となるJavaScriptを段階的に学習するため、バニラスクリプトからJavaScript ES6文法、jQueryなどの基本文法から様々な実習例題を通してスクリプトの基礎をしっかりと固めた後、Reactの多様な文法の理解と実習を通してコンポーネント、state、メモ化を活用した掲示板と会員機能を実装し、TypeScript文法を身につけてToDoList実習例題を制作するなど、諦めずにReactへの道を開いてくれます。


STEP04 | 非専攻者のための [レスポンシブウェブ制作] ブートキャンプ[該当コース移動クリック]

レスポンシブWebを作るための@メディアクエリの理解と使用法を身につけ、簡単にレスポンシブを制作できるフレームワークであるBootstrapを習得し活用する

デバイス機器に応じてレイアウトが変わるレスポンシブWebページ開発のためにBootstrap(BOOTSTRAP)を活用する方法について、理論と実習を適切に配分してBootstrapの構成要素を理解し、実習を通じてすぐに確認しながら実際のレスポンシブWebサイトを実装して完成させます。

また、Bootstrapの決められたスタイルの代わりに自分だけの個性的なスタイルのレスポンシブWebを制作したい方のために、Bootstrapを活用せずに純粋にhtml/css/jQueryのみを活用してデバイス別に様々なレイアウトを実装できる実習を、ハンソッ弁当レスポンシブWeb制作を通じてマスターしてみます。


STEP05-1 | 非専攻者のための[JAVA基礎]ブートキャンプ [該当コース移動クリック]

最も基本的な文法の理解と実習から始めて、Java基礎と中級文法を身につける

ウェブ開発バックエンドの最も基本的な言語であるJavaを、最も基本的な文法から始めて段階的に中級レベルまで習得し、様々な例題実習を通じて自分が望むプログラムをコーディングできる能力を自然に身につけることができます。


STEP05-2 | 非専攻者のための [JAVA基礎から応用まで] ブートキャンプ[該当コース移動 クリック]

Javaの基礎から高級文法の理解と実習

Javaのコレクションフレームワークは、collection文字通り収集、つまり保存するクラスを自体的に内蔵している内部ライブラリで、データの様々なタイプを一箇所にまとめて管理し保存できる多様な文法を習得し、Javaの基礎から応用まで様々な例題を実習することで、Web開発バックエンドの礎を堅固にする土台を作ります。


STEP05-3 | 非専攻者のための[Oracle SQL]ブートキャンプ[該当コース移動クリック]

Databaseの理解と実習

データベース(DB)テーブルを作成し、dbに対する読み取り、書き込み、修正、削除のCRUD実習を通してSQL文法を学び実習することで、会員登録、ログインや掲示板作成時にdbを活用できるよう準備します。


STEP06 | 非専攻者のための [JSPからSpringBootまで] ブートキャンプ [該当コース移動 クリック]

JSPからSpring Bootまで

もしかして最近実務で最も多く使われているSpring Bootから勉強を始めて挫折した経験はありませんか?

キム先生のクラスでは、Spring Bootを完璧に理解するために最も基礎的な文法であるJSPから学習し、前世代から現世代へのバックエンド文法の進化を直接体感しながら自然に概念と使用法を身につけ、ウェブ開発のバックエンドを自動で実装してくれるSpring Bootが動作する原理を理解します。

ORM、JPA、エンティティの基本概念と活用、Spring Securityの理解とセキュリティを活用した会員機能実装、JUnit testの実習とH2コンソールの使用法などの実習をもとに、Spring Bootを活用して会員と掲示板機能がある実務Webサイトを実装し、GitHubでの協業まで、ポートフォリオ制作のための基礎を完璧に習得します。


STEP07 | 実戦デプロイのための[ホスティングからAWSまで]ウェブサービス構築

[該当コースへ移動 クリック]

ホスティングとAWS配布で完成するWebサービス

もしかして開発したプロジェクトが自分のコンピューター内でしか実行されず、実際のサービスとしてデプロイできずにもどかしい思いをした経験はありませんか?

キム先生のクラスでは、単純にコードを書くだけでなく、ドットホームを活用したWebホスティングからGIT、AWS EC2へのプロジェクトデプロイまで全過程を段階的に学習します。

ドメイン接続、FTPアップロード、GitHubを通じたデプロイ、jarパッケージング、サーバー設定、画像アップロードパス指定、nohupを活用した無停止実行まで、実務で必ず必要なデプロイプロセスを身につけることができます。

このプロセスを通じて、自分が作ったWebサイトを実際に世の中に公開できる経験を積み、開発者としての自信実際のサービス運営能力を同時に身につけることができます。

Java、オブジェクト指向、国費支援ブートキャンプ、Spring Boot、SJava、オブジェクト指向、国費支援ブートキャンプ、フロントエンド、フルスタック、バックエンド、Java、Spring Boot、Spring、オブジェクト指向、JSP、Java、Spring、Spring Boot、React、Spring Boot、Spring、Spring、Spring Boot、React、バックエンド、フロントエンド、Spring、Spring、Spring Boot、React、バックエンド、フロントエンド

受講前の参考事項

学習資料

  • 授業で使用される画像や完成されたファイル、PDF教材をダウンロードして実習に活用することができます。
    (該当ファイルは教育用ファイルで個人実習用としてのみ使用可能であり、無断で配布することはできません。)

こんな方に
おすすめです

学習対象は
誰でしょう?

  • コーディングに初めて接する小学生、中学生、高校生、大学生、大人

  • 非専門家ですが、Web 開発を勉強してフロントエンド、バックエンド、フルスタック開発者として就職したい就職希望者

  • 断片的な講義で数例だけ扱うのはもうやめましょう! CSS の基礎、中級、上級の理論からさまざまな実習まで、1 つの講義ですべてマスターしたい!

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

  • HTML の基本さえ知っていれば、誰でも簡単に始めることができます。

  • コーディングが初めての場合は、STEP01 [キムセンのHTMLスターター講義]を先に受講してください。

  • コーディングへの興味と情熱があれば、授業はさらに楽しくなります。

  • 独学でコーディングして失敗してみた経験があれば今回はあきらめずに楽しくコーディングできるようにお手伝いします

こんにちは
youngcodikimssamです。

429

受講生

30

受講レビュー

23

回答

5.0

講座評価

19

講座

👩 この講座を作った人

[非専門家でも簡単で楽しく学べるコーディング!]を目標に、15年以上フルスタック(バックエンド、フロントエンド)および映像、コーディング、デザイン、ビッグデータ、機械学習などを教え、開発者の人材育成に真摯に取り組んでいる現職の職業訓練教師


🎖 経歴事項

[コンピュータを全く知らない人が副業で月100万円の収入を得るための第一歩] の著者

NCS国家職務能力講義 雇用労働部評価A等級講師選定

グリーンコンピュータアカデミー水原 優秀講師選定(2017、2018、2019年 3年連続最優秀1等賞受賞)

元)サムスンODD企画開発チーム担当

カトリック大学コンピュータ工学部 特別講義

龍仁松潭大学マルチメディア学部特別講義および多数


🚵 資格事項

職業能力開発訓練教員[情報技術開発] 雇用労働部

職業能力訓練教員[情報技術運用] 雇用労働部

職業能力開発訓練教員[情報技術戦略・計画] 雇用労働部

職業能力開発訓練教員[人工知能] 雇用労働部

職業能力開発訓練教員[実習型コンテンツ制作] 雇用労働部

職業能力訓練教員[文化コンテンツ制作] 雇用労働部

職業能力開発訓練教員[マルチメディア] 雇用労働部

職業能力訓練教員[一般事務] 雇用労働部

職業能力訓練教員[総務] 雇用労働部

職業能力開発訓練教員[デザイン] 雇用労働部

職業能力訓練教師[映像制作] 雇用労働部

職業能力開発訓練教員[印刷] 雇用労働部

職業能力開発訓練教員[出版] 雇用労働部

ビッグデータ専門家1級 韓国職業能力振興院

情報処理技師 韓国産業人力公団

OA事務自動化産業技師 韓国産業人力公団

コンピューター活用能力2級 大韓商工会議所

ITQ OAマスター 韓国生産性本部

ワードプロセッサ1級 大韓商工会議所

マルチメディアコンテンツ制作専門家 韓国コンテンツ振興院

視覚デザイン産業技師 韓国産業人力公団

コンピューターグラフィックス運用技能士 韓国産業人力公団

ウェブデザイン技能士 韓国産業人力公団

GTO フォトショップ 1級 グローバル公認資格検定院

GTQ イラスト 1級 グローバル公認資格検定院


👩‍🏫 現)グリーンコンピュータアカデミー 職業能力訓練教師 在職中

担当課程)情報技術開発/フロントエンド/バックエンド/フルスタック/Javaウェブ開発/UIUXエンジニアリング/ビッグデータプラットフォーム構築/ビッグデータシステム開発/プログラミング言語/Python/Java/ビッグデータ分析/ビッグデータ専門家/プログラミング言語/コンテンツ企画


  インフランの「Bootstrap 3を活用したレスポンシブウェブページ作成」の購読者約10万人突破を記念し、これまでDMで多く寄せられた追加講義へのリクエストにお応えして、 フルスタック講義を最新バージョンで企画・制作およびアップロード中です。皆様の温かい関心とコメントは、ヨンコーディ・キム先生の講義制作の大きな原動力になります。

 

ゆっくりではありますが、一歩一歩着実に質の高い講義で皆さんと共に歩んでいきます。

 

もっと見る

カリキュラム

全体

28件 ∙ (9時間 3分)

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

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

受講レビュー

まだ十分な評価を受けていない講座です。
みんなの役に立つ受講レビューを書いてください!

youngcodikimssamの他の講座

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

似ている講座

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

¥6,472