![[JavaScriptからReactまで] 諦めないReactへの道 [Full vers.]講義サムネイル](https://cdn.inflearn.com/public/courses/334889/cover/00422504-ab9c-46e3-9abd-8bcf0bb9ec7a/334889.jpg?w=420)
[JavaScriptからReactまで] 諦めないReactへの道 [Full vers.]
youngcodikimssam
Reactの勉強を途中で諦めてしまいましたか? コーディングが初めての完全初心者、非専攻者でもJavaScriptからReactまで、諦めずにReactへの道を開いてあげます。
入門
JavaScript, React, jQuery
Bootstrapを使わずに、純粋なhtml/css/jsのみを活用して、デバイス別に多様なレイアウトを実装できるレスポンシブウェブページ作成[2024年最新版]授業の実践制作授業です。
受講生 89名
難易度 初級
受講期間 無制限


学習した受講者のレビュー
5.0
브라보 마이 라이프
ロードマップによって1.ブートストラップの理解2.ブートストラップの実習 ウェブ制作をしたいのですが最近は全部反応型でウェブを作るからといって気をつけ始めましたが、基本概念もなかった私が一週間くらいで反応型ウェブ制作について完璧に理解しました。兄ウェブを作るスキルとノウハウが私も知らないようになります もう一度聞きながら復習してみようと思います ウェブページ制作のためにおすすめする講義のうち、コスパ比が一番の講義です
5.0
gunsmis
楽しく聴いています~~
5.0
고트.
受講期間が終了してしまい、残念ながら完走はできませんでしたが、講義力は良かったです。他の講義も2つも追加で購入していたのに、全部聞けませんでした。無制限ではなかったんですね😭😭残念です
HTMLを使ってウェブの構造を生成する
CSS3を活用して構造にスタイルを適用する
JavaScript を活用して、クリックやスクロールなどのユーザーイベント時に動作する要素を作成する
@mediaquery を利用してデバイスごとにスタイルを異なって変更する
HTML/CSS/jQueryを活用したレスポンシブウェブページ/ウェブアプリ/ウェブデザインの実践的な制作
デバイスのデバイスに応じてレイアウトが変わるレスポンシブウェブの実務メインページをクローニングします。
Bootstrapの最大の欠点である、判で押したように似たデザインや構成要素を活用するのではなく、自分が望むユニークなレスポンシブなウェブの実務サイトのシングルページを直接コーディングして制作してみましょう。

🚀 ウェブトレンドであるメイン画像が回転する上部カルーセルとスクロール時に最上段のナビゲーションのスタイルが変わりながら張り付くsticky-topナビゲーションバーとコンテンツ内容に応じて自動でメニューがアクティブになるscrollspyをhtml、css、jsコードを直接書いて実装

[[SPAN_1]]💻[[/SPAN_2]][[SPAN_2]]📱[[/SPAN_2]] デスクトップ、タブレット、スマートフォンでコンテンツのサイズとレイアウトの位置が変わるレスポンシブWebを@mediaqueryを活用して実装

🎨 マウスホバー時に自然に画像のサイズやボタンの色が変化するCSS3のtransition、animationと、デバイスサイズに応じてレイアウトの形が変わるコンテンツの実装

👁🗨 デスクトップ、タブレットでは表示され、スマートフォンでは非表示になるコンテンツと、トグルボタンをクリック時に表示・非表示が切り替わるコンテンツをHTML、CSS、JSを通じて直接コーディングで実装
この講義では、デバイス機器に応じてレイアウトが変わるレスポンシブWebページ開発のために、純粋にhtmlで構造を組み、cssでスタイルを作る方法を100%活用して、制作実習を通じて完成度が高く、ユニークなレスポンシブWebサイトを制作できる実力を身につけることができます。
ウェブデザイン、レスポンシブウェブを制作するためのHTML/CSS/jsの理論に関する基本知識をお持ちの方を対象としていますが、基本知識が不足していても講義を繰り返し視聴しながら実践できるよう制作されており、実務で使用するショートカットキーを利用してhtmlコードを素早く作成する方法であるemmetの使用法も学習できます。
講義内容である制作実習を目で見るだけでなく、実際に一緒に進めながら自分自身でレスポンシブWebコンポーネントを一つずつ構築していくと、いつの間にかコーディング能力も向上し、クオリティの高いレスポンシブWebサイトが自然に完成します。
Bootstrapのようなフレームワークを利用すると、フレームワークが持つやや限定的なスタイルのクラス名を使用したり、既に作られているコンポーネントを使用するため、ウェブページの結果物がやや似たように作られてしまう欠点がありますが、これを克服するためにBootstrapのようなフレームワークを使用せずとも、自分だけのユニークなレスポンシブウェブサイトを直接コーディングを通じて制作する方法を詳細に実習していただけます。
完走後には、漠然と難しいとだけ思っていたレスポンシブウェブ制作が思ったより簡単だということを感じ、今後は自分だけのレスポンシブウェブを手軽で多様に制作するようになるでしょう。
[[SPAN_1]]📌[[/SPAN_2]][[SPAN_2]] レスポンシブレイアウトを作成するためのCSSの@mediaqueryの使用方法を学び、繰り返し実習します。[[/SPAN_2]]
📌 開発者が望むレイアウトやスタイルに変形する部分も繰り返し実習します。
📌 動的に反応する要素も直接作ってみるために、実務で最も多く活用されるカルーセル要素とスクロール時に上部のナビゲーションメニューのアクティブスタイルが変わるコンポーネントをjsコードを通じて実装します。
[[SPAN_1]]📌[[/SPAN_2]][[SPAN_2]] 実際のウェブサイトでよく活用されるアニメーション技法を練習し、希望する要素にマウスホバー時にデザイン要素がアニメーションするインタラクティブウェブを実習します。[[/SPAN_2]]
[[SPAN_1]]📌[[/SPAN_2]][[SPAN_2]]外部プラグインを接続して、自分が作成したコードに様々な機能を簡単に活用できるライブラリを追加する方法を実習します。[[/SPAN_2]]

ユニークなウェブページを作りたいです。
型にはまったスタイルよりも、自分だけのユニークなスタイルとレイアウトを持つウェブを実装したい方

フレームワークを使わずにレスポンシブWebを作りたいです。
Bootstrapのようなフレームワークを使わずにレスポンシブWebを実装する実務スキルまでアップグレードしてマスターしたい方

フロントエンド開発者として就職したいです。
frontend開発者として就職するためにポートフォリオ制作を控えており、フレームワークを使用しなくてもレスポンシブウェブを作れるようになる必要がある方

英コーディ キム先生 Inflearn 受講レビューです。
Spring Boot, JPA, TDD, JSP, Java, Spring, Spring Boot, React, フロントエンド, バックエンド, フルスタック, Java
非専攻者向けフルスタックコースでは、各コース過程別に何を学びますか?ウェブ開発をするということは、誰でも来ることができる店舗をオンライン上に作ることと同じです。HTMLはHyper Text Markup Languageの略で、ウェブページの主要な核心内容となる情報を持って基本骨組みを作る作業を学びます。
CSSはCascading Style Sheetの略で、Cascadingは階層的な、滝のような意味を持つ単語です。cssは文字通りhtml構造の親子関係を階層的に選択して、望む要素に望むスタイルの色や形、アニメーションを適用し、ユーザーが見て退屈ではなく興味深く美しいウェブをデザインできるシートを作成して適用します。また、cssに自信が持てるまで様々な実務サイトのクローンデザイン、モバイルデザイン、ウェブデザインをHTML/CSSを反復的にコーディングしながらウェブデザインを多様に制作する経験を積みます。
もしかして、Reactを勉強していて挫折したことはありませんか?キム先生のクラスでは、Reactの基礎となるJavaScriptを段階的に学習するため、バニラスクリプトからJavaScript ES6文法、jQueryなどの基本文法から様々な実習例題を通してスクリプトの基礎をしっかりと固めた後、Reactの多様な文法の理解と実習を通してコンポーネント、state、メモ化を活用した掲示板と会員機能を実装し、TypeScript文法を身につけてToDoList実習例題を制作するなど、諦めずにReactへの道を開いてくれます。
デバイス機器に応じてレイアウトが変わるレスポンシブWebページ開発のためにBootstrap(BOOTSTRAP)を活用する方法について、理論と実習を適切に配分してBootstrapの構成要素を理解し、実習を通じてすぐに確認しながら実際のレスポンシブWebサイトを実装して完成させます。
また、Bootstrapのあらかじめ決められたスタイルではなく、自分だけの個性的なスタイルのレスポンシブWebを制作したい方のために、Bootstrapを使わずに純粋にhtml/css/jQueryのみを活用してデバイス別に様々なレイアウトを実装できる実習を、ハンソッ弁当のレスポンシブWeb制作を通してマスターしてみます。
ウェブ開発バックエンドの最も基本的な言語であるJavaを、最も基本的な文法から始めて段階的に中級レベルまで習得し、様々な例題実習を通じて自分で望むプログラムをコーディングできる能力を自然に身につけることができます。
Javaのコレクションフレームワークは、collection文字通り収集、つまり保存するクラスを自体的に内蔵している内部ライブラリで、データの様々なタイプを一箇所にまとめて管理・保存できる多様な文法を習得し、Javaの基礎から応用まで様々な例題を実習することで、Web開発バックエンドの礎を堅固にする土台を作ります。
データベース(DB)テーブルを作成し、dbに読み書き、修正、削除するCRUD実習を通してSQL文法を学び実習することで、会員登録、ログインや掲示板作成時にdbを活用できるよう準備します。
もしかして最近実務で最も多く使われているSpring Bootから勉強を始めて挫折した経験はありませんか?
キム先生のクラスでは、Spring Bootを完璧に理解するために最も基礎的な文法であるJSPから学習し、前世代から現世代へのバックエンド文法の進化を直接体感しながら自然に概念と使用法を身につけ、ウェブ開発のバックエンドを自動で実装してくれるSpring Bootが動作する原理を理解します。
ORM、JPA、エンティティの基本概念と活用、Spring Securityの理解とセキュリティを活用した会員機能の実装、JUnit testの実習とH2コンソールの使用法などの実習を基に、Spring Bootを活用して会員と掲示板機能がある実務Webサイトを実装し、GitHubでの協業まで、ポートフォリオ制作のための基礎を完璧に習得します。
もしかして開発したプロジェクトが自分のコンピューター内でしか実行されず、実際のサービスとしてデプロイできずにもどかしい思いをした経験はありませんか?
キム先生のクラスでは、単純にコードを書くだけにとどまらず、ドットホームを活用したWebホスティングからGIT、AWS EC2へのプロジェクトデプロイまで全過程を段階的に追いながら学習します。
ドメイン接続、FTPアップロード、GitHubを通じたデプロイ、jarパッケージング、サーバー設定、画像アップロードパス指定、nohupを活用した無停止実行まで、実務で必ず必要なデプロイプロセスを習得できます。
このプロセスを通じて、自分が作ったWebサイトを実際に世の中に公開できる経験を積み、開発者としての自信と実際のサービス運営能力を同時に身につけることができます。
#Java #java #国費支援 #ブートキャンプ #SpringBoot #springboot #frontend #backend #fullstack #fullstackdeveloper #jsp #react #リアクト #フロントエンド #バックエンド #フルスタック #html #css #css3 #コーディング講義 #コーディング授業 #コーディング基礎 #コーディング学院 #コーディング勉強 #javascript #ジャバスクリプト #コーディングオンライン講座 #コーディング教育 #インタラクティブ #インタラクティブウェブ #Spring #spring #開発者 #開発者就職 #aws #db #データベース #jdbc #Oracle #oracle #sql #jpa #スレッド #threads #thread #シリアル化 #デシリアル化 #継承 #ポリモーフィズム #メソッド #オーバーロード #オーバーライド #クラス #演算 #Eclipse #eclipse #domtree #jQuery #プラグイン #オブジェクト #オブジェクト実習 #オブジェクト生成 #オブジェクト #object #モーダルウィンドウ #モーダル #modal #es6 #ドキュメントオブジェクトモデル #js #javascripttutorial #javascriptexamples #interactiveweb #interactive #ナビゲーション制作 #gnb #position #ウェブレイアウト #レイアウト #form #フォームタグ #emmet #エメット #TDD
講義数は全14個、5時間10分です。
授業で使用される画像や完成されたファイルをダウンロードして実習に活用していただけます。
(該当ファイルは教育用ファイルとして個人実習用のみ使用可能であり、無断で配布することはできません。)
学習対象は
誰でしょう?
HTML/CSSを活用したレスポンシブWebページ/Webアプリ開発に興味のある方
実際に実戦ページを作りながらコーディングの勉強を始めようとする方
自分で自由に企画したスタイルのウェブページを作りたい方
Bootstrapは使えるものの、望むスタイルや動的な実装のカスタマイズに 어려움가 있는方
Bootstrapを活用したレスポンシブWebページ作成[2024年改訂版]を受講し、実践編に進みたい方
フロントエンド分野への就職を目指し、レスポンシブなポートフォリオを制作しようとしている就職活動生
前提知識、
必要でしょうか?
HTML5、CSS3、JavaScriptの理論に関する基本知識
キャリア認証
495
受講生
31
受講レビュー
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で多く寄せられた追加講義へのリクエストにお応えして、 フルスタック講義を最新バージョンで企画・制作およびアップロード中です。皆様の温かい関心とコメントは、ヨンコーディ・キム先生の講義制作の大きな原動力になります。
ゆっくりではありますが、一歩一歩着実に質の高い講義で皆さんと共に歩んでいきます。
全体
14件 ∙ (5時間 10分)
講座資料(こうぎしりょう):
全体
4件
5.0
4件の受講レビュー
受講レビュー 16
∙
平均評価 5.0
5
今回の講座も楽しみにしています。 講師の方の全カリキュラムを受講していますが、フルバージョン統合型講座の受講期間をもう少し延長していただくことはできませんか? 分量が半端ないのですが😭
はい。講義の50%以上を受講され、ご要望いただければ受講期間を1年延長しております。確認したところ、50%以上受講されていましたので、ご要望通り受講期間を1年延長いたしました。ありがとうございます。これからも頑張ってください:)
多くの方々のご要望にお応えし、講座受講期間を無期限に変更いたしました。 心ゆくまでご受講いただければ幸いです。ありがとうございます :)
受講レビュー 1
∙
平均評価 5.0
受講レビュー 11
∙
平均評価 4.8
修正済み
5
受講期間が終了してしまい、残念ながら完走はできませんでしたが、講義力は良かったです。他の講義も2つも追加で購入していたのに、全部聞けませんでした。無制限ではなかったんですね😭😭残念です
多くの方々のご要望にお応えして、講義受講期間を無制限に変更いたしました。楽しく気持ちよく受講していただけることを願っております。ありがとうございます :)
受講期限が切れていたにも関わらず、講義3件すべてを再度聞けるようにしてくださり、ありがとうございます😭😭 復旧された講義をすべて聞いて、他の講義も決済して聞きます
受講レビュー 1
∙
平均評価 5.0
知識共有者の他の講座を見てみましょう!
同じ分野の他の講座を見てみましょう!
期間限定セール、あと7日日で終了
¥22
28%
¥5,132