인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
Programming

/

Web Publishing

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

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

（5.0）受講レビュー 4件

受講生 49名

Bootstrap
Responsive Web
Web Design
HTML/CSS

初級者のための講座です。

こんなことが学べます

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

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

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

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


📚 講義紹介

デバイスデバイスによってレイアウトが変わるレスポンシブなWebページやWebアプリ、Webデザインの開発にブートストラップを活用する方法に関する理論と実習を適切に分配し、ブートストラップのコンポーネントを理解し、実習を通じてすぐにすぐに確認できるように構成しました。

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

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

💡こんなことを学びます


✨反応型キャロセルとフォームフォームの実装

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

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

🌠ヘラレスポンシブWebメインページのいくつかの実装

InflearnレスポンシブWebブートストラップ受講

ヤングコーディーキンサム Inflearn 受講坪です。

バニラjs、JavaScript、JavaQuery、モダンスクリプト、タイプスクリプト、リアクト、JavaScript、React、jQuery、vanilla-javascript、ES6、TypeScript、TML / CSS、Webデザイン、クローンコーディング、モバイルデザイン、国費支援ブートキャンプ、インタラクティブWeb、フロントエンド、フルスタック、バックエンド、JavaScript、ES6、TypeScript、react-jsx、TailwindCSS、Java、オブジェクト指向、Java、Spring Boot、Spring、オブジェクト指向、JSP

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

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

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

htmlの意味と基本コードの作成方法とレイアウトの編成

ウェブ開発をするということは、誰もが来ることができる店をオンライン上に作るのと同じです。 HTMLはHyper Text Markup Languageの略で、Webページの主要なコアコンテンツとなる情報をもって基本骨格を作る作業を学びます。


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

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

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


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

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

もしかしたら、リアクトを勉強してイライラしたことがありますか？キムサムクラスではリアクトの基礎となるJavaScriptを段階的に学習するために、バニラスクリプトからJavaScript es6文法、ジェイクエリーなどの基本文法から様々な実習例を通じてスクリプトの基本をしっかりと刻んだ後、Reactの様々な文法の理解と実習を通じて、コンポーネント、state、メモ化を活用した掲示板や会員機能を実装し、タイプスクリプト文法を身につけてToDoList実習例を制作するなど、あきらめずにリアクトに行く道を開きます。


✔STEP04 |​非専攻者のための[レスポンシブWeb制作]ブートキャンプ [該当プロセス移動クリック]

レスポンシブWebを作成するための@メディアクエリの理解と使い方を習得し、簡単にレスポンシブを構築できるフレームワークであるブートストラップを習得して活用する

デバイスデバイスによってレイアウトが変わるレスポンシブWebページ開発にブートストラップ（BOOTSTRAP）を活用する方法についての理論と実習を適切に分配し、ブートストラップの構成要素を理解し、実習を通じてすぐに確認し、実際の反応兄ウェブサイトを実装して完成してみます。

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


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

最も基本的な文法の理解と実践から始まり、Javaの基礎と中級文法を学ぶ

Web開発バックエンドの最も基本的な言語であるJavaを最も基本的な文法から始め、徐々に中級まで習得し、さまざまな例の実習を通じて自分で好きなプログラムをコーディングする能力を自然に習得することになります。


✔STEP05-2 |​非専攻者のための[JAVA基礎から深化まで]ブートキャンプ[該当課程移動クリック]

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

Javaのコレクションフレームワークは、コレクションの文字通り収集、つまり保存するクラスを独自に組み込んでいる内部ライブラリで、データのさまざまなタイプをまとめて管理して保存できるさまざまな文法を習得し、Javaの基礎から深化まで様々な例を練習することでウェブ開発バックエンドの礎石を丈夫にする基礎を作ります。


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

Databaseの理解と実践

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


✔STEP06 |非専攻者のための[JSPからSpringBootまで]ブートキャンプ[公開予定]

JSPからスプリングブートまで

もしかしたら最近の実務で最もよく使われているスプリングブートから勉強していてイライラした経験がありましたか？

キムサムクラスでは、スプリングブートを完全に理解するために最も基礎文法であるJSPから学習し、前世代から現在世代のバックエンド文法の進化を直接体感し、自然に概念と使い方を体得し、ウェブ開発のバックエンドを自動的に知って実装してくれるスプリングブートが動作する原理を理解します。

ORM、JPA、エンティティの基本概念と活用、Spring Securityの理解とセキュリティを活用した会員機能の実装、Junit Testの実習とh2コンソールの使い方などの実習に基づいてSpring Bootを活用して会員と掲示板機能のある実務ウェブサイトを実装し、FitHubとしてコラボレーションするまで、ポートフォリオを構築するための基本を完全に理解してください。

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

❔ご質問がありますか？

Q. ブートストラップにはさまざまなバージョンがありましたが、どのバージョンで学習しますか？

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

Q. 既存のキム・セジサムの「ブートストラップ3（BOOTSTRAP）を活用したレスポンシブWebページ作成」講義を聞いた購読者です。既存の講義と異なる点は何ですか？

一度心から感謝します。既存講義を聞いた方々に褒め言葉や励まし、要請事項など多くのDMを受け、今回の講義では既存講義で理論だけに重点を置いた部分を強化して実習の割合を増やし、SelfEX問題を通じて理論で学んだ構成要素をもとに直接コーディングして解説講義を通じて製作能力を補強できるようにアップグレードしました。

また、ブートストラップ4にアップグレードされ、既存のBootstrap3と異なる点についての説明を通じて、既存の購読者の追加購読時にも迅速な理解を支援し、多様に追加された最新機能を最大限容易に理解して活用できるように講義を制作しました。

受講前の注意

学習資料

  • 各チャプターごとにpdf教案と実習ファイルをダウンロードして教材として活用できます。

  • 講義分は合計31個、19時間13分です。

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

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

学習対象は
誰でしょう？

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

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

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

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

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

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

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

こんにちは
です。

245

受講生

18

受講レビュー

14

回答

5.0

講座評価

16

講座

👩 이 강의를 만든 사람

[ 비전공자도 쉽고 재미있게 배우는 코딩! ] 을 목표로 15년 넘게 풀스택(백엔드, 프론트엔드) 및 영상, 코딩, 디자인, 빅데이터, 머신러닝 등을 강의하며 개발자 인력양성에 진심인 현직 직업훈련교사

🎖 경력사항

[컴퓨터 1도 모르는 사람이 부업으로 월100만원 수입내보기 첫걸음] 의 저자

NCS 국가직무능력강의 고용노동부 평가 A등급 강사선정

그린컴퓨터아카데미수원 우수강사선정(2017, 2018, 2019 3년연속 최우수1등상 수상)

전) 삼성ODD 기획 개발팀 담당

가톨릭대학교 컴퓨터공학부 특강

용인송담대학 멀티미디어학부 특강 및 다수

🚵 자격사항

직업능력훈련교사[정보기술개발] 고용노동부

직업능력훈련교사[정보기술운영] 고용노동부

직업능력훈련교사[정보기술전략·계획] 고용노동부

직업능력훈련교사[인공지능] 고용노동부

직업능력훈련교사[실감형콘텐츠제작] 고용노동부

직업능력훈련교사[문화콘텐츠제작] 고용노동부

직업능력훈련교사[멀티미디어] 고용노동부

직업능력훈련교사[일반사무] 고용노동부

직업능력훈련교사[총무] 고용노동부

직업능력훈련교사[디자인] 고용노동부

직업능력훈련교사[영상제작 ] 고용노동부

직업능력훈련교사[인쇄] 고용노동부

직업능력훈련교사[출판] 고용노동부

빅데이터전문가1급 한국직업능력진흥원

정보처리기사 한국산업인력공단

사무자동화산업기사 한국산업인력공단

컴퓨터활용능력 2급 대한상공회의소

ITQ OA 마스터 한국생산성본부

워드프로세서 1급 대한상공회의소

멀티미디어콘텐츠제작전문가 한국콘텐츠진흥원

시각디자인산업기사 한국산업인력공단

컴퓨터그래픽스운용기능사 한국산업인력공단

웹디자인기능사 한국산업인력공단

GTO 포토샵 1급 글로벌공인자격검정원

GTO 일러 1급 글로벌공인자격검정원

👩‍🏫 현) 그린컴퓨터아카데미 직업능력훈련교사 재직중

담당과정) 정보기술개발/프론트엔드/백엔드/풀스택/자바 웹개발/UIUX엔지니어링/빅데이터플랫폼구축/빅데이터시스템개발/ 프로그래밍언어/파이썬/자바/빅데이터분석/ 빅데이터전문가/프로그래밍언어/콘텐츠기획

  인프런의 부트스트랩3(BOOTSTRAP)를 활용한 반응형 웹페이지 만들기 약 10만명 구독을 기념으로 그동안 추가 강의에 대한 많은 요청을 DM으로 받아 풀스택 강의를 최신버전으로 기획 제작 및 업로드 중입니다. 여러분의 많은 관심과 따뜻한 댓글은 영코디 킴쌤의 강의제작에 큰 원동력이 됩니다.

 

느리지만 차근차근 질좋은 강의로 한걸음씩 여러분과 함께하겠습니다.

 

カリキュラム

全体

31件 ∙ (19時間 12分)

講義資料（こうぎしりょう）:

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

受講レビュー

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