inflearn logo
inflearn logo

Bootstrap を活用したレスポンシブ Web 制作 [基本概念編] ブートキャンプ

デバイスに応じてレイアウトが変更されるレスポンシブなWebページを作成するために、Bootstrapを活用する方法について解説した講義です(改訂版)。

難易度 初級

受講期間 無制限

Bootstrap
Bootstrap
Responsive Web
Responsive Web
Web Design
Web Design
HTML/CSS
HTML/CSS
Bootstrap
Bootstrap
Responsive Web
Responsive Web
Web Design
Web Design
HTML/CSS
HTML/CSS
날개 달린 동전

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

날개 달린 동전

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

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

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

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

5.0

5.0

codingfrog

100% 受講後に作成

上級開発者の方がヤングコーディー・キムサム様の講義をお勧めいただき受講しましたが、週末の間楽な気持ちで聞きながら頑張りました。 ブートストラップの理論も核心内容をよく見てくれ、各実習例を活用した例を見せて、どのように使うべきかをすぐに感じることができました。 始めたキムにブートストラップ本番授業まで定住行きに行きます!

5.0

p.cdoomco

100% 受講後に作成

講義を1年前に購入してから、気にせず生活していましたが、慌てて受講を始めたら、本業が忙しくて結局怠けてしまい、全部聴けませんでした。今日が受講期間の最終日です😭 受講期間をもう少し余裕をもって延長していただけないでしょうか?

5.0

조병기

32% 受講後に作成

1/3くらい聞いたけど.. 講義時間が他講義に比べてちょっと長い方です。ブートストラップの各コンポタントがCSSの内容も教えてくださって、単にインポートする以上のどこを修正して、追加して使用すればよいのかアプリケーションの余地をたくさん教えてくれます。 多くの助けになります。

受講後に得られること

  • HTML/CSS/jQuery を活用したレスポンシブ ウェブページ / ウェブ アプリ / ウェブ デザイン

  • Bootstrap の構成要素とスタイル

  • Bootstrap で提供される JavaScript と jQuery の活用

  • ブートストラップ理論だけでなく、簡単な例を通してブートストラップを活用する方法を実践します。


📚講義紹介

デバイス機器に応じてレイアウトが変わるレスポンシブWebページやWebアプリ、Webデザイン開発のためにBootstrapを活用する方法について、理論と実習を適切に配分してBootstrapの構成要素を理解し、実習を通してすぐに確認できるよう構成しました。

ウェブページ、ウェブアプリ、レスポンシブウェブを制作するためのHTML/CSS/jQueryに関する基本知識をお持ちの方を対象としていますが、基本知識が不足していても講義を繰り返し視聴しながら実践できるよう制作されており、実務で使用するショートカットキーを利用してhtmlコードを素早く作成する方法であるemmetの使用法も学習することができます。

既存の講義と比較して、各チャプターごとにselfEXコーディング問題を直接解いて、解説講義を通じて制作方法を確認できるよう構成し、基礎をしっかりと固めながら制作スキルを向上させることができるようアップグレードいたしました。

💡 このような内容を学びます


レスポンシブカルーセルとフォーム実装

🎈レスポンシブナビゲーションバーとカードコンテンツの実装

📊デバイスに応じて変わる画像とコメントの実装

🌠Heraレスポンシブウェブメインページ一部実装

英語コーディングのキム先生Inflearn受講レビューです。

풀스택 로드맵4

Spring Boot、JPA、TDD、JSP、Java、Spring、Spring Boot、React、フロントエンド、バックエンド、フルスタック、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サイトを実装して完成させます。

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


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 #java #国費支援 #ブートキャンプ #スプリングブート #springboot #frontend #backend #fullstack #fullstackdeveloper #jsp #react #リアクト #フロントエンド #バックエンド #フルスタック #html #css #css3 #コーディング講義 #コーディング授業 #コーディング基礎 #コーディング学院 #コーディング勉強 #javascript #ジャバスクリプト #コーディングオンライン講座 #コーディング教育 #インタラクティブ #インタラクティブウェブ #スプリング #spring #開発者 #開発者就職 #aws #db #データベース #jdbc #オラクル #oracle #sql #jpa #スレッド #threads #thread #シリアル化 #デシリアル化 #継承 #ポリモーフィズム #メソッド #オーバーロード #オーバーライド #クラス #演算 #エクリプス #eclipse #domtree #ジェイクエリ #プラグイン #オブジェクト #オブジェクト実習 #オブジェクト生成 #オブジェクト #object #モーダルウィンドウ #モーダル #modal #es6 #ドキュメントオブジェクトモデル #js #javascripttutorial #javascriptexamples #interactiveweb #interactive #ナビゲーション制作 #gnb #position #ウェブレイアウト #レイアウト #form #フォームタグ #emmet #エメット #TDD #ブートストラップ

何か気になることはありますか?

Q. Bootstrapには様々なバージョンがありますが、どのバージョンで学習しますか?

Twitterの開発者によって開発され無料配布されたBootstrapは、継続的にバージョンがアップグレードされており、アップロード現在時点基準でversion1からversion5まで存在します。その中でも最新の機能を含みながらも最近実務で最も多く活用されているBootstrap4を基準に講義が進行されます。

Q. 以前にキム・セジ先生の[Bootstrap3を活用したレスポンシブWebページ作成]講座を受講した購読者です。既存の講座と変わった点は何ですか?

まず、心から感謝申し上げます。既存の講義を受講された方々から称賛や励まし、要望事項など多くのDMをいただき、今回の講義では既存の講義で理論にのみ偏っていた部分を強化し、実習の比率を増やし、SelfEX問題を通じて理論で学んだ構成要素を基に直接コーディングし、解説講義を通じて制作能力を補強できるようにアップグレードいたしました。

また、Bootstrap4にアップグレードされたことで既存のBootstrap3と変わった点についての説明を通じて、既存の購読者の方々の追加購読時にも素早い理解を助け、様々に追加された最新機能を最大限簡単に理解し活用できるよう講義を制作いたしました。

受講前の参考事項

学習資料

  • 各チャプターごとにPDF教材と実習ファイルをダウンロードして教材として活用していただけます。

  • 講義数は全31個、19時間13分です。

  • 授業で使用される画像や完成されたファイルをダウンロードして実習に活用することができます。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • レスポンシブなWebページ/Webアプリの開発にHTML/CSSを活用することに興味のある方

  • Bootstrap の使い方を学びたい方

  • キムサムのブートストラップ3講義を聞いて、ブートストラップ4講義を待っている人

  • 最近実務で最も多く使われているBootstrapバージョンで、レスポンシブWebやWebデザイン、Webアプリを作成したい方

  • フロントエンド分野に就職するためにフロントエンドポートフォリオを作成しようとしている就職準備生

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

  • html5、css3、jQuery の基本的な知識

こんにちは
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で多く寄せられた追加講義へのリクエストにお応えして、 フルスタック講義を最新バージョンで企画・制作およびアップロード中です。皆様の温かい関心とコメントは、ヨンコーディ・キム先生の講義制作の大きな原動力になります。

 

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

 

もっと見る

カリキュラム

全体

31件 ∙ (19時間 12分)

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

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

受講レビュー

全体

5件

5.0

5件の受講レビュー

  • weaponcho0687님의 프로필 이미지
    weaponcho0687

    受講レビュー 4

    平均評価 5.0

    5

    32% 受講後に作成

    1/3くらい聞いたけど.. 講義時間が他講義に比べてちょっと長い方です。ブートストラップの各コンポタントがCSSの内容も教えてくださって、単にインポートする以上のどこを修正して、追加して使用すればよいのかアプリケーションの余地をたくさん教えてくれます。 多くの助けになります。

    • shin48869502님의 프로필 이미지
      shin48869502

      受講レビュー 2

      平均評価 5.0

      5

      100% 受講後に作成

      上級開発者の方がヤングコーディー・キムサム様の講義をお勧めいただき受講しましたが、週末の間楽な気持ちで聞きながら頑張りました。 ブートストラップの理論も核心内容をよく見てくれ、各実習例を活用した例を見せて、どのように使うべきかをすぐに感じることができました。 始めたキムにブートストラップ本番授業まで定住行きに行きます!

      • jinimini님의 프로필 이미지
        jinimini

        受講レビュー 5

        平均評価 4.8

        5

        32% 受講後に作成

        • pcdoomco8127님의 프로필 이미지
          pcdoomco8127

          受講レビュー 11

          平均評価 5.0

          5

          100% 受講後に作成

          講義を1年前に購入してから、気にせず生活していましたが、慌てて受講を始めたら、本業が忙しくて結局怠けてしまい、全部聴けませんでした。今日が受講期間の最終日です😭 受講期間をもう少し余裕をもって延長していただけないでしょうか?

          • youngcodikimssam
            知識共有者

            p.cdoomco様、他の分野にも関わらず挑戦される姿は本当に素晴らしいですね。50%以上ご受講されましたので、1年間受講延長させていただきました。今後もいつも応援しております。ありがとうございます:)

          • youngcodikimssam
            知識共有者

            多くの方々からのご要望にお応えし、講座受講期間を無制限に変更いたしました。 楽しく快適にご受講いただけますよう願っております。 ありがとうございます :)

        • ysy99996276님의 프로필 이미지
          ysy99996276

          受講レビュー 2

          平均評価 5.0

          5

          100% 受講後に作成

          ブートストラップを活用する方法と、いろいろな状況まで考慮していただき、お知らせいただきありがとうございました。講義がちょっと長くてもみなしてみたら、ブートストラップの中にどのような機能があるのか​​、どのような役割を果たすのかまでよく説明してくれるようです!

          youngcodikimssamの他の講座

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

          似ている講座

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

          ¥4,894