Change background image

COURSE Học lập trình Website từ CiOne - Chương 6 - Responsive Web Design

Discussion in 'Ebook & Tutorials' started by DannyTuan, Jun 14, 2018.

  1. DannyTuan

    DannyTuan Ban Quản Trị Staff Member Administrator

    Joined:
    Jun 14, 2018
    Messages:
    208
    Gender:
    Male
    Location:
    Danny Production
    Home Page:
    [​IMG]

    Khoá học này cung cấp các kiến thức giúp bạn thiết kế giao diện có thể hiển thị tốt trên các kích thước màn hình khác nhau từ một giao diện chính kết hợp với các kiến thức về HTML và CSS cơ bản.

    Đây là xu thế, cũng như là yêu cầu tối thiểu đối với một website hiện đại ngày nay, ngoài việc gia tăng độ trải nghiệm và thân thiện với người dùng chủ yếu sử dụng các thiết bị di động. Nó còn giúp tăng thứ hạng của website đối với các công cụ tìm kiếm

    Các chủ đề sẽ được thảo luận gồm:
    • Giới thiệu về Responsive Web Design
    • Tìm hiểu khái niệm viewport trên di động
    • Tìm hiểu thẻ meta viewport
    • Tìm hiểu Media Query và áp dụng để thiết kế giao diện Responsive
    • Tìm hiểu quy trình Mobile-First trong thiết kế giao diện Responsive
    Điều kiện tiên quyết
    Đã tham gia các khoá học HTML, CSS trên CiOne hoặc có kiến thức tương đương.
     
  2. DannyTuan

    DannyTuan Ban Quản Trị Staff Member Administrator

    Joined:
    Jun 14, 2018
    Messages:
    208
    Gender:
    Male
    Location:
    Danny Production
    Home Page:
    Tổng quan về Responsive Web Design
    Các kiến thức tổng quan về Responsive Web Design, tìm hiểu bước đầu tiên áp dụng Responsive lên giao diện website

    Giới thiệu khóa học

    Tìm hiểu khái niệm viewport trên di động

    Tìm hiểu thẻ meta viewport

    Thử thách 1: Thiết lập thẻ meta viewport
     
  3. DannyTuan

    DannyTuan Ban Quản Trị Staff Member Administrator

    Joined:
    Jun 14, 2018
    Messages:
    208
    Gender:
    Male
    Location:
    Danny Production
    Home Page:
    Tìm hiểu Media Query
    Cơ chế hoạt động của Responsive Design

    Tìm hiểu về Media Query - Phần 1

    Thử thách 2: sử dụng Media Query để nhúng file css

    Tìm hiểu về Media Query - Phần 2

    Thử thách 3: sử dụng Media Query với @media
     
  4. DannyTuan

    DannyTuan Ban Quản Trị Staff Member Administrator

    Joined:
    Jun 14, 2018
    Messages:
    208
    Gender:
    Male
    Location:
    Danny Production
    Home Page:
    Áp dụng Responsive Design vào trang web
    Từng bước kết hợp CSS cơ bản và Media Query để Responsive cho trang web theo quy trình thống nhất

    Breakpoint và Mobile-First

    Thử thách 4: Áp dụng Breakpoint và Mobile-First vào xây dựng bố cục giao diện

    Xây dựng hệ thống lưới (Grid System)

    Thử thách 5: Áp dụng hệ thống lưới vào bố cục trang web

    Áp dụng Responsive Design cho hình ảnh

    Thử thách 6: Áp dụng Responsive cho hình ảnh

    Áp dụng Responsive Design cho thanh menu

    Thử thách 7: Xây dựng thanh menu có áp dụng Responsive Design

    Media Type: Print

    Thử thách 8: Bố cục lại nội dung trên trang in
     

Share This Page