강의

멘토링

로드맵

Inflearn brand logo image
Programming

/

Web Publishing

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

Bootstrap(BOOTSTRAP)を活用したレスポンシブWebページ作成[2024年改訂版]の実際の制作授業として、デバイスに応じてレイアウトが変わるレスポンシブWebの実務ページをBootstrap4を活用して直接制作してみます。

  • youngcodikimssam
부트스트랩
포트폴리오
실습 중심
Bootstrap
Responsive Web
Web Design
HTML/CSS

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

こんなことが学べます

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

  • Bootstrap のコンポーネントおよびスタイルを実務ページに適用する

  • Bootstrapが提供するjQueryを活用して、実務ページに適用

  • ブートストラップの理論編で学習した内容を、実際のウェブページに適用しながら応用する。

  • 基本的に持っているBootstrapのスタイルを、開発者が望むスタイルにカスタマイズするスキル

  • jQueryの外部プラグインを適用して、希望する動的な要素を追加


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

上部に張り付くsticky-topナビゲーションバーとスクロール時に自動でメニューがアクティブになるscrollspyを実装し、スクロール時にコンテンツがアニメーションしながら表示されるよう外部プラグインであるwaypointとanimate.cssを活用

ページ上部のprev、next、indicatorボタンクリック時に様々なコンテンツを表示するレスポンシブカルーセルの実装

Bootstrapのグリッドシステムを活用したレスポンシブレイアウトの実装

カカオマップAPIを活用した地図実装&ブートストラップのアコーディオンとform形式の活用

YouTubeビデオをレスポンシブに実装&デバイスサイズに応じて表示・非表示にするクラスの活用

🎬講義紹介

デバイス機器に応じてレイアウトが変わるレスポンシブウェブ実務ページを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を活用して動作させる方法だけでなく、外部のプラグインを活用したり、直接コーディングして望む動的な要素を追加する方法も実習します。

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

レスポンシブWebページの理論は理解できるけど、実際に制作するのは漠然としています。
レスポンシブWebを作る理論は理解できるけど、いざ制作しようとすると漠然とした方

Bootstrapの活用法を実習しながら短時間でレスポンシブWebを実装したいです。
Bootstrapを短時間でマスターしてすぐにレスポンシブWebを作りたい方

すべて同じスタイルで実装されるBootstrapをカスタマイズして、自分だけのスタイルで表現する実務スキルまでマスターしたいです。
自分が望むスタイルを追加し、望む外部プラグインを適用してユニークなレスポンシブWebを制作したい方

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

풀스택 로드맵4

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

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

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 #ブートストラップ

受講前の参考事項

学習資料

  • 講義の分量は全11個、4時間29分です。

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

こんな方に
おすすめです

学習対象は
誰でしょう?

  • HTML/CSS を活用したレスポンシブウェブページ/ウェブアプリ開発に関心のある方

  • Bootstrapの理論は理解できたものの、いざ活用するとなるとまだ漠然としている方

  • Bootstrapを活用したレスポンシブWebページ作成[2024年改訂版]を受講し、実践編に進みたい方

  • Bootstrapは使えるものの、 원하는 스타일や動的な 구현のカスタマイズに 어려움이 있는 方

  • フロントエンド分野への就職を目指し、レスポンシブなポートフォリオを制作しようとしている就職活動生

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

  • HTML5、CSS3、jQuery、Bootstrap4の理論に関する基礎知識

こんにちは
です。

335

受講生

23

受講レビュー

18

回答

5.0

講座評価

19

講座

👩 이 강의를 만든 사람

[ 비전공자도 쉽고 재미있게 배우는 코딩! ] 을 목표로 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으로 받아 풀스택 강의를 최신버전으로 기획 제작 및 업로드 중입니다. 여러분의 많은 관심과 따뜻한 댓글은 영코디 킴쌤의 강의제작에 큰 원동력이 됩니다.

 

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

 

カリキュラム

全体

11件 ∙ (4時間 29分)

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

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

受講レビュー

全体

3件

5.0

3件の受講レビュー

  • codingfrog님의 프로필 이미지
    codingfrog

    受講レビュー 2

    平均評価 5.0

    5

    100% 受講後に作成

    토 일 이틀동안 이론수업에 이어서 실전수업까지 재미있게 완강하고 갑니다. 어렵게만 생각했던 프론트엔드가 부트스트랩을 활용하니 이렇게 간단하면서도 빠르고 쉽게 반응형 웹이 만들어진다니 너무 신기하고 이렇게 짧은 시간에 마스터할 줄 알았으면 진작 들을걸 하는 생각도 들었습니다. 부트스트랩은 부트스트랩 스타일로만 사용할 수 있는줄 알았는데 디자인을 사용자가 원하는대로 변경해서 쓸 수 있다는 점과 커스터마이징하는 부분이 실습내용에 많아서 그 부분도 좋았습니다. 저처럼 백엔드 개발자 뿐만 아니라 코딩공부를 처음 입문하시는 분들에게도 필요한 좋은 강의인 것 같습니다. 강추합니다. 영코디 킴쌤님, 감사합니다. 다음 강의도 기다리고 있겠습니다.

    • pcdo.omco님의 프로필 이미지
      pcdo.omco

      受講レビュー 15

      平均評価 5.0

      5

      36% 受講後に作成

      강사님 의 커리큘럼을 전부다 따라가고있습니다. 잘수강하겠습니다. 수강기간이 1년인점은 조금아쉽습니다. ㅠ

      • 영코디 킴쌤
        知識共有者

        감사합니다. 50%이상 수강하셔서 요청하신대로 수강기간 1년 더 연장해 드렸습니다. 앞으로도 파이팅입니다 :)

      • 영코디 킴쌤
        知識共有者

        많은 분들의 요청에 힘입어 강의수강기간을 무제한으로 변경하였습니다. 즐겁고 기분좋게 수강하시길 기원합니다. 감사드립니다 :)

    • ysy9999님의 프로필 이미지
      ysy9999

      受講レビュー 2

      平均評価 5.0

      5

      100% 受講後に作成

      시리즈로 사서 보기 너무 좋은거 같습니당

      ¥4,685

      youngcodikimssamの他の講座

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

      似ている講座

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