Tổng quan

Khóa học này cung cấp kiến thức, kỹ năng cho học viên trong thiết kế website chạy trên nhiều thiết bị khác nhau và cách thức tạo các hiệu ứng animation trên website. 

Thời lượng

24 giờ

Mục tiêu khóa học

Sau khi hoàn tất khóa học, học viên nắm bắt HTML5 và CSS3, trang bị đủ kiến thức và kỹ năng cần thiết trong công tác:

• Xây dựng website chạy trên nhiều thiết bị
• Tạo các hiệu ứng animation trên website bằng CSS3 

Đối tượng tham gia khóa học

Các nhân viên thiết kế website

Điều kiện tham gia khóa học

Kiến thức, kỹ năng viết html và javascript

Nội dung khóa học

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

• Giới thiệu html5 và css3
• Mục tiêu khóa học

2.     Giới thiệu về responsive

• Thiết kế responsive là gì
• Thiết bị Mobile
• Khi nào không cần thiết kế website dạng responsive
• Những ví dụ về thiết kết website responsive
• Bắt đầu với html5
• Những gì mới trong css3

3.     Kiểm tra site dạng responsive

• Kiểm tra thiết kế responsive trên trình duyệt như thế nào
• Kiểm tra trên giả lập thiết bị
• Kiểm tra trên thiết bị vật lý

4.     Sức mạnh của media queries

• Giới thiệu về media queries
• Sử dụng media queries trong css
• Tạo ứng dụng web mobile
• Mật độ pixel hiển thị

5.     Sử dụng Fluid layout

• Các dạng layout
• Nguyên tắc cơ bản khi làm việc với Fluid
• Tạo Fluid với CSS Grid

6.     Những framework bên trong responsive

• Các hệ thống Grid
• Các framework CSS
• Lựa chọn giải pháp xây dựng site
• Mẫu CSS framework dùng trong site

7.     Chuyển 1 site sang responsive

• Chuyển style và script
• Refactoring
• Full Reskin

8.     Chuyển sang trạng thái responsive với javascript

• Sự khác biệt về chức năng thông qua các trạng thái responsive
• Các kỹ thuật chuyển
• Ứng dụng kỹ thuật chuyển responsive javascript

9.     Tối ưu hóa responsive

• Lý do quan tâm đến tốc độ thực thi responsive
• Cải thiện hiệu suất network
• Tăng tốc Rendering path
• Tối ưu hóa server
• Đo tốc độ thực thi của site

10.   Cơ bản về CSS3

• Tại sao sử dụng CSS3
• Các trình duyệt hổ trợ CSS3
• Các tiền tố CSS
• Hạn chế CSS3 animation
• Tại sao CSS3 lại hơn javascript và flash

11.  CSS3 Transforms và Transitions

• CSS transforms
• CSS transitions
• Việc chờ và kết hợp các hiệu ứng transition

12.  Transition cho image

• CrossFade
• Gallery enhanced
• Popup image captions
• Card fan
• Clapperboard caption
• Background image transition và animation page load

13.  Transitions cho UI Elements

• Navigation markup
• Horizontal navigation bar
• Navigation bar đơn giản với CSS3
• Highlight current page trong navigation bar
• Horizontal tab navigation với CSS3 transitions
• Animation custom validation error trên form
• UI button depress transition
• UI button reveal transition
• Horizontal drop-down navigation bar css3 transitions
• Các hiệu ứng transitions sau khi button click
• Animation cho các phần tử trong form

14.  Keyframe animations

• Cú pháp
• Kiểm soát keyframe animation playback
• Sự xáo trộn và kết nối các animation
• Trình tự lập đi lập lại animation
• Tạm ngưng animation
• Slide show
• Tạm ngưng slide show
• Biến đổi transition giữa các image
• New sticker/notifications animation
• Lightbox image gallery
• Logo animation khi page load

15.  SVG animations và filters

• Giới thiệu về SVG
• Đặt SVG trên trang
• Điều chỉnh SVG với CSS
• Các hiệu ứng trên SVG

16.  Animation responsive và javascript

• Thay đổi kích thước element trong RWD không thông qua transition
• Thay đổi kích thước element trong RWD thông qua transition
• Chỉ định viewport size với CSS3 media queries và transition
• Tối ưu hóa transition và animation trên mobile
• Tích hợp media queries với SVG
• Trigger Transition và animation với javascript
• Tùy chỉnh transition trên javascript

17.  3D transforms, transitions, animations

• Perspective
• Rotation
• Translate
• Card caption flip
• Backface visibility
• Transform style
• Circular 3D gallery
• Cải tiến gallery với level 4 selectors và javascript
• Nhúng level 4 selectors
• 3D transform và transition cho UI elemen