Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
Programming

/

Web Publishing

Bootcamp thực hành: Thiết kế web responsive với Bootstrap

Trong buổi học thực hành của khóa học "Xây dựng trang web phản hồi bằng BOOTSTRAP [Ấn bản sửa đổi năm 2024]", chúng ta sẽ trực tiếp xây dựng một trang web thực tế có bố cục thay đổi theo thiết bị, sử dụng Bootstrap 4.

(5.0) 3 đánh giá

42 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

  • Thiết kế và sản xuất thực tế trang web/ứng dụng web/thiết kế web đáp ứng bằng HTML/CSS/jQuery

  • Áp dụng các thành phần và kiểu dáng của Bootstrap vào trang thực tế.

  • Sử dụng jQuery được cung cấp bởi Bootstrap để áp dụng vào trang thực tế.

  • Áp dụng và ứng dụng những nội dung đã học từ phần lý thuyết Bootstrap vào trang web thực tế.

  • Kỹ năng tùy chỉnh các kiểu dáng Bootstrap mặc định theo phong cách mà nhà phát triển mong muốn.

  • Thêm các yếu tố động mong muốn bằng cách áp dụng plugin jQuery bên ngoài


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

Triển khai thanh điều hướng sticky-top dính ở phía trên và scrollspy tự động kích hoạt menu khi cuộn, đồng thời sử dụng các plugin bên ngoài waypoint và animate.css để nội dung hiển thị với hiệu ứng animation khi cuộn

Triển khai carousel responsive hiển thị nội dung đa dạng khi nhấp vào các nút prev, next, indicator ở đầu trang

Triển khai layout responsive sử dụng hệ thống grid của Bootstrap

Triển khai bản đồ sử dụng api Kakao Map & sử dụng accordion và form của Bootstrap

Triển khai video YouTube responsive & Sử dụng class hiển thị/ẩn theo kích thước thiết bị

🎬강의소개

Hãy cùng tạo ra các trang web thực tế có bố cục thay đổi theo thiết bị một cách trực tiếp bằng cách sử dụng Bootstrap!

Trong khóa học này để phát triển trang web phản hồi, ứng dụng web và thiết kế web có bố cục thay đổi theo thiết bị, chúng tôi đã cấu trúc để bạn có thể tạo ra một trang web phản hồi hoàn chỉnh thông qua thực hành sử dụng 100% Bootstrap 4.

Dành cho những người có kiến thức cơ bản về lý thuyết HTML/CSS/jQuery/bootstrap để tạo trang web, ứng dụng web và web responsive, nhưng ngay cả khi thiếu kiến thức cơ bản, khóa học cũng được thiết kế để bạn có thể xem lại nhiều lần và thực hành theo, đồng thời bạn cũng 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ế.

Không chỉ quan sát nội dung bài giảng về thực hành sản xuất bằng mắt, mà thực sự làm theo và tự mình xây dựng từng trang web responsive, bạn sẽ không biết khi nào khả năng lập trình responsive của mình đã được cải thiện và một trang web chất lượng cao được hoàn thành một cách tự nhiên.

Khi sử dụng Bootstrap, phần mà người mới bắt đầu gặp khó khăn nhất là tùy chỉnh theo ý muốn của developer, vì vậy nội dung khóa học đã được cấu trúc bao gồm nhiều phần về vấn đề này để có thể biến đổi style cơ bản của Bootstrap thành style mà developer mong muốn, và ngoài các tính năng động cơ bản mà Bootstrap có sẵn, còn giới thiệu cách thêm các yếu tố động bằng cách sử dụng plugin bên ngoài của jQuery, từ đó có thể học chi tiết phần tùy chỉnh và tái cấu trúc để thoát khỏi khuôn mẫu style định sẵn của Bootstrap truyền thống, thay vì tạo ra những trang web giống hệt nhau như được đúc khuôn - điều có thể coi là nhược điểm lớn nhất của Bootstrap.

Đặc điểm của khóa học này

📌 Hiểu khái niệm hệ thống lưới của Bootstrap 4 và áp dụng vào trang web thực tế để tạo layout responsive.

📌 Áp dụng và sử dụng các component - những thành phần cấu tạo đa dạng của Bootstrap 4 vào đúng vị trí trên trang web thực tế.

📌 Không chỉ sử dụng các style của Bootstrap mà còn thực hành đa dạng việc tùy chỉnh để biến đổi thành style mong muốn của nhà phát triển.

📌 Chúng ta sẽ thực hành không chỉ cách sử dụng JavaScript do Bootstrap cung cấp để tạo các yếu tố phản ứng động mà còn cách sử dụng các plugin bên ngoài hoặc lập trình trực tiếp để thêm các yếu tố động theo ý muốn.

😀 Tôi khuyến nghị cho những người như thế này

Tôi hiểu lý thuyết về trang web responsive nhưng việc thực tế tạo ra nó thì mơ hồ quá.
Những bạn hiểu lý thuyết tạo web responsive nhưng khi thực sự muốn làm thì cảm thấy mơ hồ

Tôi muốn thực hành cách sử dụng Bootstrap để triển khai web responsive trong thời gian ngắn.
Dành cho những ai muốn làm chủ Bootstrap trong thời gian ngắn để tạo ra web responsive ngay lập tức

Tôi muốn làm chủ cả kỹ năng thực tế trong việc tùy chỉnh Bootstrap - vốn được triển khai với cùng một phong cách cho tất cả - để thể hiện theo phong cách riêng của mình.
Dành cho những ai muốn tạo ra trang web responsive độc đáo bằng cách thêm phong cách mong muốn và áp dụng các plugin bên ngoài theo ý muốn

Đâ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[Click để chuyển đến khóa học tương ứng]

Ý 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, chúng ta sẽ học cách tạo ra khung cơ bản bằng cách sử dụng các thông tin chính tạo nên nội dung cốt lõi của trang web.


STEP02 | Bootcamp [CSS3 tương tác web hiện đại] dành cho người không chuyên [Nhấp để 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à tính phân cấp, giống như thác nước. CSS theo đúng nghĩa đen là tạo ra và áp dụng một bảng tính cho phép lựa chọn các phần tử mong muốn theo cách phân cấp thông qua mối quan hệ cha-con trong cấu trúc HTML, từ đó có thể thiết kế web đẹp mắt, thú vị và không nhàm chán cho người dùng bằng cách áp dụng màu sắc, hình dạng và hoạt ảnh theo phong cách mong muốn. Ngoài ra, để 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 cho các thiết kế clone của các trang web thực tế, thiết kế mobile và thiết kế web khác nhau.


STEP03 | Bootcamp [Từ JS đến React] dành cho người không chuyên[Nhấp để 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 [Thiết kế Web Responsive] dành cho người không chuyên[Click để chuyển đến khóa học này]

Hiểu và học cách sử dụng @media query để tạo web responsive, đồng thời nắm vững và ứng dụng Bootstrap - framework giúp tạo responsive một cách dễ dàng

Để phát triển trang web responsive có bố cục thay đổi theo thiết bị, chúng ta sẽ phân bổ hợp lý giữa lý thuyết và thực hành về cách sử dụng Bootstrap, hiểu các thành phần cấu tạo 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 xây dựng 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á tính riêng 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 Java cơ bản và trung cấp

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 [JAVA từ cơ bản đến nâng cao] dành cho người không chuyên ngành[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

Framework Collection 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ữ theo đúng nghĩa của collection - thu thập, tức là lưu trữ. Bằng cách học các cú pháp đa dạng có thể 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 các ví dụ đa dạng từ cơ bản đến nâng cao của Java, chúng ta 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[Nhấp để 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 diễn đàn.


STEP06 | Bootcamp cho người không chuyên ngành [Từ JSP đến SpringBoot] [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 về 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 hảo 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, từ đó sử dụng Spring Boot để xây dựng website thực tế có chức năng thành viên và bảng tin, cho đến 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 tương ứng]

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 - toàn bộ quy trình một cách chi tiết.

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 với tư cách là 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 #interactive #webinteractive #spring #spring #developer #việclàmdeveloper #aws #db #cơsởdữliệu #jdbc #oracle #oracle #sql #jpa #thread #threads #thread #serialization #deserialization #kếthừa #đathái #method #overloading #overriding #class #phéptoán #eclipse #eclipse #domtree #jquery #plugin #đốitượng #thựchànhđốitượng #tạođốitượng #object #object #modalwindow #modal #modal #es6 #documentobjectmodel #js #javascripttutorial #javascriptexamples #interactiveweb #interactive #tạonavigation #gnb #position #weblayout #layout #form #formtag #emmet #emmet #TDD #bootstrap

Những điều cần lưu ý trước khi học

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

  • Tổng khối lượng bài giảng là 11 bài, 4 giờ 29 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 chỉnh để sử dụng trong thực hành.
    (Các tệp này là tệp giáo dục chỉ có thể được sử dụng cho mục đích thực hành cá nhân và không được phép phân phối trái phép.)

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

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

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

  • Dành cho những bạn đã hiểu lý thuyết về Bootstrap nhưng vẫn còn mơ hồ khi thực hành.

  • Dành cho những bạn đã học xong khóa "Thiết kế trang web responsive bằng Bootstrap (phiên bản sửa đổi năm 2024)" và muốn chuyển sang phần thực hành.

  • Những người có thể sử dụng Bootstrap nhưng gặp khó khăn trong việc tùy chỉnh các kiểu dáng mong muốn hoặc các triển khai động.

  • Một sinh viên đang chuẩn bị tìm việc trong lĩnh vực front-end và muốn tạo một portfolio responsive.

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

  • Kiến thức cơ bản về lý thuyết HTML5, CSS3, jQuery, Bootstrap 4

Xin chào
Đây là

324

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ả

11 bài giảng ∙ (4giờ 29phú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ả

3 đánh giá

5.0

3 đánh giá

  • shin48869502님의 프로필 이미지
    shin48869502

    Đánh giá 2

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    I'm going to have fun completing the two-day theory class and the practical class on Saturday and Sunday. I thought the front-end, which I thought was difficult, was made so simple and fast and easy to create a responsive web using Bootstrap. I thought I should have taken it earlier if I had known I could master it in such a short time. I thought Bootstrap could only be used in the Bootstrap style, but I liked that the design can be changed to suit the user's needs, and there were many parts for customization in the practical content. I think this is a good lecture that is necessary not only for back-end developers like me, but also for those who are new to coding. I highly recommend it. Thank you, Youngcodi Kim. I'll be waiting for the next lecture.

    • pcdoomco8345님의 프로필 이미지
      pcdoomco8345

      Đánh giá 15

      Đánh giá trung bình 5.0

      5

      36% đã tham gia

      I'm following your curriculum completely. I will take the course diligently. It's a little disappointing that the course duration is only one year. 😭

      • youngcodikimssam
        Giảng viên

        Thank you. You have completed more than 50% of the course, so we have extended your course period for another year as requested. Keep up the great work! :)

      • youngcodikimssam
        Giảng viên

        Due to popular demand, we have made the lecture access period unlimited. We hope you enjoy your studies. Thank you :)

    • ysy99996276님의 프로필 이미지
      ysy99996276

      Đánh giá 2

      Đánh giá trung bình 5.0

      5

      100% đã tham gia

      I think it would be great to buy it as a series and watch it.

      835.769 ₫

      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!