[APTECH PHP 17 – HTML 3] HTML block, BEM, SCSS, CSS Box Model, Flex và cơ bản về CSS Framework Bootstrap 4

Lập Trình Ứng Dụng Website với PHP và MySQL

Chúng ta đã có cái nhìn tổng quan về Lập Trình Website thông qua việc xác định các HTML block. Làm quen với việc điều chỉnh bố cục sử dụng CSS Flex và làm quen với CSS Framework Bootstrap 4.

aptech-php-da-nang-17-html-3
aptech-php-da-nang-17-html-3

Trong buổi học này, chúng ta đã được học :

  1. Giải đáp bài tập về nhà với CSS padding, border, margin.
  2. Tổng hợp các cách sắp xếp bố cục một Website với margin, padding và CSS Flex.
  3. Sử dụng các thuộc tính của CSS Flex như flex-direction, justify-content, align-items, …
  4. Làm quen với kỹ thuật đặt tên BEM và extension của CSS là SCSS để viết mã nguồn nhanh hơn, sạch hơn.
  5. Hướng dẫn sử dụng Bootstrap 4 với : container, row, col, …

Bài tập về nhà :

  1. Chuyển toàn bộ bài tập CV cá nhân và layout từ CSS thuần sang CSS Framework Bootstrap 4.
  2. Học và làm các ví dụ về Bootstrap 4 trong W3schools https://www.w3schools.com/bootstrap4/
  3. Làm các giao diện ví dụ trong https://getbootstrap.com/docs/4.3/examples/

Trong buổi học tiếp theo, chúng ta sẽ học :

  1. Tiếp tục sử dụng CSS Framework Bootstrap 4.
  2. Học thêm về HTML Semantic.
  3. Học thêm về các property khác của CSS như : border-radius, text-align, …

Các bài đọc hiểu:

  1. Bootstrap 4 cơ bản https://www.w3schools.com/bootstrap4/default.asp
  2. Bootstrap là gì? Giới thiệu về bootstrap và học bootstrap, bootstrap tutorial https://kipalog.com/posts/Bootstrap-la-gi–Gioi-thieu-ve-bootstrap-va-hoc-bootstrap–bootstrap-tutorial
  3. Tìm hiểu Bootstrap 4 trong 5 phút https://dancongngheorg.wordpress.com/2018/03/20/tim-hieu-bootstrap-4-trong-5-phut/
  4. How the Bootstrap 4 Grid Works https://uxplanet.org/how-the-bootstrap-4-grid-works-a1b04703a3b7
  5. Tìm hiểu về Grid System trong Bootstrap https://viblo.asia/p/bai-2-tim-hieu-ve-grid-system-trong-bootstrap-MgNeWXjRkYx
  6. Tìm hiểu Grid Bootstrap trong 15 phút https://viblo.asia/p/tim-hieu-grid-bootstrap-trong-15-phut-rQOvPxOrvYj

Chúc các bạn may mắn và thành công.

1 Comment

Gửi phản hồi

%d bloggers like this: