강의

멘토링

로드맵

Inflearn brand logo image
Programming

/

Web Publishing

Sử dụng Bootstrap để tạo trang web phản hồi [Phần khái niệm cơ bản] Bootcamp

Đây là bài giảng về cách sử dụng Bootstrap để tạo trang web phản hồi, tức là trang web có bố cục thay đổi tùy theo thiết bị. [Phiên bản sửa đổi]

(5.0) 5 đánh giá

59 học viên

  • youngcodikimssam
부트스트랩
실습 중심
반응형웹
Bootstrap
Responsive Web
Web Design
HTML/CSS

Đánh giá từ những học viên đầu tiên

Dịch cái này sang tiếng Việt

  • Trang web phản hồi / ứng dụng web / thiết kế web sử dụng HTML/CSS/jQuery

  • Các thành phần và kiểu dáng của Bootstrap

  • 활용하는 Bootstrap cung cấp JavaScript và jQuery

  • Thực hành sử dụng bootstrap thông qua các ví dụ đơn giản cũng như lý thuyết về bootstrap.


📚강의소개

Chúng tôi đã cấu trúc khóa học với sự phân bổ hợp lý giữa lý thuyết và thực hành về cách sử dụng Bootstrap để phát triển trang web responsive, ứng dụng web và thiết kế web có bố cục thay đổi theo từng thiết bị, giúp bạn hiểu các thành phần của Bootstrap và có thể kiểm tra ngay lập tức thông qua thực hành.

Khóa học này dành cho những người có kiến thức cơ bản về HTML/CSS/jQuery để tạo trang web, ứng dụng web và web responsive, tuy nhiên ngay cả khi thiếu kiến thức cơ bản, bạn vẫn có thể xem lại bài giảng nhiều lần và thực hành theo, đồng thời có thể học cách sử dụng emmet - phương pháp tạo mã html nhanh chóng bằng các phím tắt được sử dụng trong thực tế.

So với các khóa học trước đây, chúng tôi đã nâng cấp để bạn có thể trực tiếp giải các bài tập coding selfEX trong mỗi chương và xác nhận phương pháp thực hiện thông qua các bài giảng giải thích, giúp củng cố nền tảng vững chắc đồng thời nâng cao kỹ năng thực hành.

💡 Bạn sẽ học những nội dung như thế này


Triển khai carousel responsive và biểu mẫu

🎈Triển khai thanh điều hướng responsive và nội dung thẻ

📊Triển khai hình ảnh và bình luận thay đổi theo thiết bị

🌠Triển khai một phần trang chủ web responsive của Hera

Đây là đánh giá khóa học Inflearn của thầy Kim - Young Coder.

풀스택 로드맵4

Spring Boot, JPA, TDD, JSP, Java, Spring, Spring Boot, React, Frontend, Backend, Fullstack, Java

Trong khóa học Fullstack dành cho người không chuyên ngành, mỗi khóa học sẽ dạy những gì?

STEP01 | Bootcamp [HTML Starter] dành cho người không chuyên[Nhấp để chuyển đến khóa học]

Ý nghĩa của HTML và cách viết mã cơ bản cũng như tạo layout

Phát triển web giống như việc tạo ra một cửa hàng trực tuyến mà ai cũng có thể đến. HTML là viết tắt của Hyper Text Markup Language, bạn sẽ học cách tạo khung cơ bản bằng cách sử dụng những thông tin chính tạo nên nội dung cốt lõi của trang web.


STEP02 | Bootcamp cho người không chuyên [Từ CSS Style đến Animation] [Click để chuyển đến khóa học này]

Ý nghĩa của CSS và cách viết mã cơ bản từ đầu đến việc áp dụng style mong muốn vào HTML để thiết kế web

CSS là viết tắt của Cascading Style Sheet, trong đó Cascading là từ có nghĩa là phân cấp, giống như thác nước. CSS đúng như tên gọi, nó lựa chọn các phần tử theo cấu trúc phân cấp cha-con của HTML để áp dụng màu sắc, hình dạng, hoạt ảnh theo phong cách mong muốn cho các phần tử cần thiết, tạo ra một trang web không nhàm chán mà thú vị và đẹp mắt cho người dùng xem. Ngoài ra, cho đến khi bạn tự tin với CSS, bạn sẽ tích lũy kinh nghiệm tạo ra nhiều thiết kế web đa dạng thông qua việc lặp đi lặp lại việc coding HTML/CSS để thiết kế clone các trang web thực tế, thiết kế mobile, thiết kế web.


STEP03 | Bootcamp [Từ JS đến React] dành cho người không chuyên[Click để chuyển đến khóa học này]

Làm quen với vanilla script và cú pháp JavaScript ES6, sử dụng React

Bạn đã từng cảm thấy nản lòng khi học React chưa? Trong lớp học của thầy Kim, để học từng bước JavaScript - nền tảng của React, chúng ta sẽ bắt đầu từ vanilla script, cú pháp JavaScript ES6, jQuery và các cú pháp cơ bản khác thông qua nhiều ví dụ thực hành đa dạng để xây dựng nền tảng vững chắc cho script. Sau đó, thông qua việc hiểu và thực hành các cú pháp đa dạng của React, chúng ta sẽ triển khai bảng tin và chức năng thành viên sử dụng component, state, memoization, đồng thời học cú pháp TypeScript để tạo ra ví dụ thực hành ToDoList, v.v. Chúng tôi sẽ mở ra con đường đến với React mà không bỏ cuộc.


STEP04 | Bootcamp [Tạo Web Responsive] dành cho người không chuyên[Click để chuyển đến khóa học này]

Hiểu và sử dụng @media query để tạo responsive web, học và ứng dụng Bootstrap - framework giúp dễ dàng tạo responsive

Phân bổ hợp lý giữa lý thuyết và thực hành về cách sử dụng Bootstrap để phát triển trang web responsive có bố cục thay đổi theo thiết bị, hiểu các thành phần của Bootstrap và kiểm tra ngay lập tức thông qua thực hành, cuối cùng hoàn thành việc triển khai một trang web responsive thực tế.

Ngoài ra, dành cho những ai muốn tạo ra trang web responsive với phong cách cá nhân độc đáo thay vì sử dụng style có sẵn của Bootstrap, chúng ta sẽ thành thạo việc triển khai các layout đa dạng cho từng thiết bị bằng cách sử dụng thuần túy html/css/jQuery mà không dùng Bootstrap thông qua thực hành tạo trang web responsive Hansot Dosirak.


STEP05-1 | Bootcamp [Cơ bản JAVA] dành cho người không chuyên [Nhấp để chuyển đến khóa học tương ứng]

Bắt đầu từ việc hiểu và thực hành các ngữ pháp cơ bản nhất để học các ngữ pháp cơ bản và trung cấp của Java

Bạn sẽ học Java - ngôn ngữ cơ bản nhất của phát triển web backend, bắt đầu từ những cú pháp cơ bản nhất và dần dần tiến tới trình độ trung cấp. Thông qua các bài thực hành đa dạng, bạn sẽ tự nhiên có được khả năng tự mình lập trình những chương trình mong muốn.


STEP05-2 | Bootcamp [Từ cơ bản đến nâng cao JAVA] dành cho người không chuyên[Nhấp để chuyển đến khóa học tương ứng]

Hiểu và thực hành từ cơ bản đến ngữ pháp nâng cao của Java

Collection Framework của Java là một thư viện nội bộ tích hợp sẵn các lớp lưu trữ đúng như tên gọi collection - thu thập, tức là lưu trữ. Thông qua việc học các cú pháp đa dạng cho phép gom nhóm và quản lý, lưu trữ các kiểu dữ liệu khác nhau ở một nơi, và thực hành với nhiều ví dụ từ cơ bản đến nâng cao của Java, chúng ta sẽ tạo nền tảng vững chắc làm nền móng cho việc phát triển web backend.


STEP05-3 | Bootcamp [Oracle SQL] dành cho người không chuyên[Click để chuyển đến khóa học tương ứng]

Hiểu biết và Thực hành về Database

Tạo bảng cơ sở dữ liệu (DB) và thực hành CRUD để đọc, ghi, sửa đổi, xóa dữ liệu trong db, qua đó học và thực hành cú pháp SQL để chuẩn bị sử dụng db khi đăng ký thành viên, đăng nhập hoặc viết bài trên bảng tin.


STEP06 | Bootcamp [Từ JSP đến SpringBoot] dành cho người không chuyên [Nhấp để chuyển đến khóa học này]

Từ JSP đến Spring Boot

Bạn có từng trải qua việc học Spring Boot - framework được sử dụng nhiều nhất trong thực tế hiện nay - rồi cảm thấy nản lòng không?

Trong lớp học của thầy Kim, để hiểu hoàn hảo Spring Boot, chúng ta sẽ bắt đầu học từ cú pháp cơ bản nhất là JSP, trực tiếp cảm nhận sự tiến hóa của cú pháp backend từ thế hệ trước đến thế hệ hiện tại, tự nhiên nắm vững các khái niệm và cách sử dụng, đồng thời hiểu được nguyên lý hoạt động của Spring Boot - framework tự động triển khai backend cho phát triển web.

Nắm vững hoàn toàn các kiến thức cơ bản để tạo portfolio thông qua việc thực hành các khái niệm cơ bản và ứng dụng của ORM, JPA, entity, hiểu biết về Spring Security và triển khai chức năng thành viên sử dụng security, thực hành junit test và cách sử dụng h2 console, v.v. để triển khai website thực tế có chức năng thành viên và bảng tin sử dụng Spring Boot và thậm chí cả việc hợp tác qua GitHub.


STEP07 | Xây dựng dịch vụ web cho triển khai thực tế [Từ hosting đến AWS]

[Nhấp để chuyển đến khóa học]

Hoàn thiện dịch vụ web với hosting và triển khai AWS

Bạn có từng trải qua cảm giác bức bối khi dự án mình phát triển chỉ chạy được trong máy tính của mình mà không thể triển khai thành dịch vụ thực tế không?

Trong lớp học của thầy Kim, chúng ta không chỉ dừng lại ở việc viết code đơn thuần, mà sẽ học từng bước từ web hosting sử dụng Dothome đến triển khai dự án trên GIT, AWS EC2 theo toàn bộ quy trình.

Kết nối tên miền, tải lên FTP, triển khai thông qua GitHub, đóng gói jar, cấu hình máy chủ, chỉ định đường dẫn tải lên hình ảnh, thực thi không gián đoạn bằng nohup - bạn có thể nắm vững toàn bộ quy trình triển khai cần thiết trong thực tế.

Thông qua quá trình này, tôi sẽ tích lũy kinh nghiệm thực sự công bố website mình tạo ra với thế giới, đồng thời có được sự tự tin như một developernăng lực vận hành dịch vụ thực tế.

#java #java #hỗtrợhọcphí #bootcamp #springboot #springboot #frontend #backend #fullstack #fullstackdeveloper #jsp #react #react #frontend #backend #fullstack #html #css #css3 #bàigiảngcoding #lớphọccoding #cơbảncoding #trườnghọccoding #họccoding #javascript #javascript #khóahọccodingonline #giáodụccoding #tươngtác #webtươngtác #spring #spring #developer #việclàmdeveloper #aws #db #cơsởdữliệu #jdbc #oracle #oracle #sql #jpa #luồng #threads #thread #tuầnthự #giảituầnthự #kếthừa #đathái #phươngthức #nạpchồng #ghibè #lớp #phéptoán #eclipse #eclipse #domtree #jquery #plugin #đốitượng #thựchànhđốitượng #tạođốitượng #object #object #cửasổmodal #modal #modal #es6 #mônghìnhđốitượngtàiliệu #js #javascripttutorial #javascriptexamples #interactiveweb #interactive #tạonavigation #gnb #position #bốcụcweb #bốcục #form #thẻform #emmet #emmet #TDD #bootstrap

Bạn có thắc mắc gì không?

Q. Bootstrap có nhiều phiên bản khác nhau, vậy sẽ học phiên bản nào?

Bootstrap được phát triển bởi các nhà phát triển Twitter và phân phối miễn phí, liên tục được nâng cấp phiên bản và tính đến thời điểm hiện tại đã có từ version1 đến version5. Trong số đó, khóa học sẽ được tiến hành dựa trên Bootstrap4 - phiên bản chứa các tính năng mới nhất và được sử dụng nhiều nhất trong thực tế gần đây.

Q. Tôi là người đã từng theo dõi khóa học [Tạo trang web responsive sử dụng Bootstrap 3] của cô Kim Se Ji. Khóa học này có gì khác so với khóa học trước đó không ạ?

Trước tiên, tôi chân thành cảm ơn các bạn. Từ những người đã học khóa học trước, tôi đã nhận được rất nhiều tin nhắn với lời khen ngợi, động viên và các yêu cầu, nên trong khóa học này, tôi đã nâng cấp bằng cách tăng cường phần thực hành để khắc phục những phần chỉ tập trung vào lý thuyết trong khóa học trước, tăng tỷ lệ thực hành và thông qua các bài tập SelfEX, các bạn có thể trực tiếp lập trình dựa trên các thành phần đã học trong lý thuyết và củng cố khả năng phát triển thông qua các bài giảng giải thích.

Ngoài ra, khi nâng cấp lên Bootstrap 4, chúng tôi đã tạo ra khóa học giải thích những điểm khác biệt so với Bootstrap 3 trước đây để giúp các subscriber hiện tại có thể hiểu nhanh khi đăng ký thêm, đồng thời có thể hiểu và sử dụng các tính năng mới nhất được bổ sung một cách dễ dàng nhất có thể.

Những lưu ý trước khi học

Tài liệu học tập

  • Mỗi chương đều có thể tải xuống tài liệu giảng dạy PDF và file thực hành để sử dụng làm giáo trình.

  • Tổng lượng bài giảng là 31 bài, 19 giờ 13 phút.

  • Bạn có thể tải xuống các hình ảnh được sử dụng trong bài học hoặc các tệp hoàn thành để sử dụng trong thực hành.

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Những người quan tâm đến việc phát triển trang web/ứng dụng web phản hồi sử dụng HTML/CSS

  • Bootstrap là gì?

  • Những người đã học bài giảng Bootstrap 3 của Kim và đang chờ bài giảng Bootstrap 4

  • Những người muốn tạo web đáp ứng, thiết kế web hoặc ứng dụng web với phiên bản Bootstrap được sử dụng rộng rãi nhất trong thực hành gần đây

  • Người tìm việc muốn tạo danh mục đầu tư front-end để có được việc làm trong lĩnh vực front-end

Cần biết trước khi bắt đầu?

  • Kiến thức cơ bản về html5, css3, jQuery

Xin chào
Đây là

335

Học viên

23

Đánh giá

18

Trả lời

5.0

Xếp hạng

19

Các khóa học

👩 이 강의를 만든 사람

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

 

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

 

Chương trình giảng dạy

Tất cả

31 bài giảng ∙ (19giờ 12phút)

Tài liệu khóa học:

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

5 đánh giá

5.0

5 đánh giá

  • codingfrog님의 프로필 이미지
    codingfrog

    Đánh giá 2

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    선임 개발자분이 영코디 킴쌤님의 강의를 추천해주셔서 수강했는데 주말동안 편한 마음으로 들으면서 완강했습니다. 부트스트랩의 이론도 핵심내용을 잘 짚어주시고 각 실습예제들을 활용한 예시를 보여주셔서 어떻게 사용해야 할지 금방 감을 잡을 수 있었습니다. 시작한 김에 부트스트랩 실전수업까지 정주행하러 갑니다!!

    • p.cdoomco님의 프로필 이미지
      p.cdoomco

      Đánh giá 11

      Đánh giá trung bình 5.0

      5

      100% đã tham gia

      강의를 1년전에 구입하고나서 신경 안쓰고 살다가 허겁지겁 수강시작하게됬는데 생업이 바쁘다보니 결국 게을러서 다듣지못했는데 오늘이 수강기간 마지막날이네요 ㅠ 수강기간즘 넉넉하게 연장해주실수없을까요?

      • 영코디 킴쌤
        Giảng viên

        네 p.cdoomco님, 다른 분야임에도 도전하시는 모습이 정말 참 멋지시네요. 50%이상 수강하셔서 1년 수강연장해 드렸습니다. 앞으로도 항상 응원하겠습니다. 감사합니다 :)

      • 영코디 킴쌤
        Giảng viên

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

    • 조병기님의 프로필 이미지
      조병기

      Đánh giá 4

      Đánh giá trung bình 5.0

      5

      32% đã tham gia

      1/3 정도 들었는데.. 강의 시간이 타 강의에 비해 좀 긴편입니다. 부트스트랩의 각 컴포턴트이 CSS의 내용도 알려 주셔서 단순히 가져다 쓰는 것 이상 어디를 수정해서, 추가해서 사용하면 되는지 응용의 여지를 많이 알려 줍니다. 많은 도움이 됩니다.

      • ysy9999님의 프로필 이미지
        ysy9999

        Đánh giá 2

        Đánh giá trung bình 5.0

        5

        100% đã tham gia

        부트 스트랩 활용하는 법과 이런저런 상황까지 고려해주시면서 알려주셔서 도움이 많이 되었습니다. 강의가 좀 길긴해도 다보고 나면 부트스트랩안에 어떠한기능이 있는지 어떠한 역할을 하는지까지 잘 설명해주시는거같습니다!!

        • cjh9307님의 프로필 이미지
          cjh9307

          Đánh giá 4

          Đánh giá trung bình 4.8

          5

          32% đã tham gia

          836.689 ₫

          Khóa học khác của youngcodikimssam

          Hãy khám phá các khóa học khác của giảng viên!

          Khóa học tương tự

          Khám phá các khóa học khác trong cùng lĩnh vực!