Bootstrapを活用したレスポンシブWeb制作[実践編]ブートキャンプ

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

🎬講義紹介

デバイス機器に応じてレイアウトが変わるレスポンシブウェブ実務ページをBootstrapを活用して直接制作してみます！

この講義ではデバイス機器に応じてレイアウトが変わるレスポンシブウェブページやウェブアプリ、ウェブデザイン開発のためにBootstrap4を100%活用して制作する実習を通じて、完成度の高いレスポンシブウェブサイトを制作できるよう構成いたしました。

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

講義内容である制作実習を目で見るだけでなく、実際に一緒に進めながら自分自身でレスポンシブWebサイトを一つずつ構築していくと、いつの間にかレスポンシブコーディング能力も向上し、クオリティの高いWebサイトが自然に完成します。

BootstrapやBootstrapを活用しながら初心者が最も難しく感じる部分である開発者の好みに合わせてカスタマイズする部分に関する内容も多数含めて授業内容を構成したため、基本的に持っているBootstrapのスタイルを開発者が望むスタイルに変形できるよう構成し、基本的にBootstrapが持っている動的な機能以外にもjQueryの外部プラグインを活用して動的な要素も追加する方法を紹介することで、Bootstrapの最大の欠点と言えるような同一スタイルの判で押したような Webページではなく、既存のBootstrapの定型化されたスタイルの枠を脱してカスタマイズして再構成する部分も詳細に学習できるよう構成いたしました。

✨ この講義の特徴

📌 Bootstrap4のグリッドシステムの概念を理解し、実際のWebページに適用してレスポンシブレイアウトを作成します。

[[SPAN_1]]📌[[/SPAN_2]][[SPAN_2]] Bootstrap4の様々な構成要素であるコンポーネントを実際のWebページの適切な場所に適用して活用します。[[/SPAN_2]]

📌 Bootstrapのスタイルを活用するだけでなく、開発者がカスタマイズして希望するスタイルに変形する部分を多様に実習します。

📌 動的に反応する要素を作るために、Bootstrapが提供するJavaScriptを活用して動作させる方法だけでなく、外部のプラグインを活用したり、直接コーディングして望む動的な要素を追加する方法も実習します。

😀 こんな方におすすめです

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

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

htmlの意味と基本コード作成方法及びレイアウト構築

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

✔STEP02 | 非専攻者のための [モダン ウェブ インタラクティブ CSS3] ブートキャンプ [該当コース移動クリック]

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制作] ブートキャンプ[該当コース移動 クリック]

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

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

また、Bootstrapのあらかじめ決められたスタイルではなく、自分だけの個性的なスタイルのレスポンシブウェブを制作したい方のために、Bootstrapを使わずに純粋に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 #ジャバスクリプト #コーディングOnline Classes #コーディング教育 #インタラクティブ #インタラクティブウェブ #スプリング #spring #開発者 #開発者就職 #aws #db #データベース #jdbc #オラクル #oracle #sql #jpa #スレッド #threads #thread #シリアル化 #デシリアル化 #継承 #ポリモーフィズム #メソッド #オーバーロード #オーバーライド #クラス #演算 #エクリプス #eclipse #domtree #ジェイクエリ #プラグイン #オブジェクト #オブジェクト実習 #オブジェクト生成 #オブジェクト #object #モーダルウィンドウ #モーダル #modal #es6 #文書オブジェクトモデル #js #javascripttutorial #javascriptexamples #interactiveweb #interactive #ナビゲーション制作 #gnb #position #ウェブレイアウト #レイアウト #form #フォームタグ #emmet #エメット #TDD #ブートストラップ

受講前の参考事項