[APTECH PHP 17 – HTML 6] Responsive Website với CSS Media Query và CSS Framework Bootstrap Breakpoint Responsive

aptech-php-da-nang-17-html-6
aptech-php-da-nang-17-html-6

Hướng dẫn về Website Responsive với CSS Media Query. Cách thiết kế một website với các giao diện khác như như điện thoại, máy tính và các thiết bị phổ biến khác. Hướng dẫn về CSS Framework Boootstrap Responsive.

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

  1. CSS Media Query.
  2. Các thiết bị với màn hình phổ biến trong lập trình và thiết kế Website.
  3. Học về CSS Framework Bootstrap 4 Grid, layout và Responsive.
  4. Tư duy và thói quen tốt về lập trình, thiết kế website với các giao diện người dùng khác nhau.
  5. Tìm hiểu về Wireframe, Mockup và Prototype trong thiết kế giao diện Website.

Bài tập về nhà :

  1. Hoàn thiện xử lý Website theo từng giao diện với CSS Media Query.
  2. Hoàn thiện cách thức lập trình Website responsive theo Bootstrap 4.
  3. Thiết kế Wireframe theo ý tưởng cá nhân với 2 loại giao diện từ 0-767px và > 768px.

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

  1. Hoàn thiện và đóng góp về giao diện Wireframe.
  2. Lập trình Website theo giao diện Wireframe đã thiết kế.
  3. Học về Card Component của Bootstrap 4.

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

  1. Giới thiệu về Media CSS trong Responsive https://viblo.asia/p/gioi-thieu-ve-media-css-trong-responsive-4dbZNDEL5YM
  2. Mockups, Wireframes ,Prototype khi nào và tại sao nên sử dụng? https://viblo.asia/p/mockups-wireframes-prototype-khi-nao-va-tai-sao-nen-su-dung-bxjeZYloGJZ
  3. 20 công cụ dựng prototype và wireframe miễn phí cho web designer http://genk.vn/20-cong-cu-dung-prototype-va-wireframe-mien-phi-cho-web-designer-20161205164023226.chn
  4. Giới thiệu về Media CSS trong Responsive https://viblo.asia/p/gioi-thieu-ve-media-css-trong-responsive-4dbZNDEL5YM
  5. Sử dụng @Media CSS tạo Responsive cho Website https://freetuts.net/su-dung-media-css-tao-responsive-cho-website-660.html
  6. Giới thiệu về Bootstrap Card Component https://viblo.asia/p/gioi-thieu-ve-bootstrap-card-component-WAyK8VxolxX

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

Gửi phản hồi

%d bloggers like this: