Khóa học jQuery cơ bản đến nâng cao qua 20 bài tập – Miễn phí

Khóa học jQuery cơ bản đến nâng cao qua 20 bài tập – Miễn phí

Xem ngay

Ưu điểm của khóa học

• Sử dụng công cụ Chrome Developer Tool trong thiết kế web hiện đại
• Thao tác với thư viện jQuery, juQuery ui, Tweenmax
• Tự xây dựng các plugin mới bằng jQuery
• Nâng cao khả năng tự đọc hiểu các tài liệu tự lập trình jQuery
• Tăng khả năng tương tác với người dùng
• Tạo hiệu ứng động cho những thay đổi của nội dung, tài liệu
• Lấy thông tin từ server mà không cần tải lại trang web
• Có khả năng chỉnh sửa giao diện của một Webside bất kì

Nội dung của khóa học

Phần 1: Tổng quan về jQuery

• Bài 1: Giới thiệu jQuery

Phần 2: Cài đặt và chạy File jQuery

• Bài 2: Giới thiệu và cài đặt Sublime text và Plugin emmet
• Bài 3: Cài đặt Plugin khác và cách sử dụng
• Bài 4: Cài đặt jQuery và ví dụ đầu tiên với jQuery

Phần 3: Giới thiệu 3 phần quan trọng của jQuery

• Bài 5: 3 Phần quan trọng của jQuery & Thực hành các hàm cơ bản qua ví dụ

Phần 4: Project 1 hiệu ứng accordion

• Bài 6: Giới thiệu project và tạo file ban đầu
• Bài 7: Xử lý phần html và css
• Bài 8: Xử lý phần jquery, giới thiệu hàm next(), slideUp(), slideToggle() và các hàm xử lý class
• Bài 9: Tổng kết kiến thức học từ bài 1

Phần 5: Project 2 One Page website

• Bài 10: Giới thiệu project và xu hướng web one page
• Bài 11: One page website phần html
• Bài 12: One page website phần css
• Bài 13: One page website phần jquery : hàm chuyển động body
• Bài 14: One page website phần jquery : giới thiệu hàm offset1
• Bài 15: Hướng dẫn bài ứng dụng và tổng kết kiến thức project 2

Phần 6: Project 3 Cách làm hiệu ứng ảnh và kết hợp hàm animate, offset, click, addClass .. đã học

• Bài 16: Giới thiệu project 3 và các kiến thức áp dụng
• Bài 17: Quy trình làm bài hiệu ứng và setup ban đầu
• Bài 18: Viết mã Html
• Bài 19: Viết mã Css
• Bài 20: Viết mã jquery: phần xử lý cho nút
• Bài 21: Viết mã jquery: phần xử lý hiệu ứng phóng to ảnh
• Bài 22: Viết mã jquery: phần xử lý tổng hợp
• Bài 23: Tổng kết kiến thức đã học trong project 3

Phần 7: Giới thiệu các thuộc tính css3 nâng cao cho hiệu ứng

• Bài 24: Giới thiệu các kiến thức sẽ học trong phần 7
• Bài 25: Giới thiệu các thuộc tính cơ bản của css3
• Bài 26: Giới thiệu dòng thuộc tính transform và transition

Phần 8: Áp dụng transition làm hiệu ứng

• Bài 27: Viết mã Html
• Bài 28: Viết mã Css và hiệu ứng
• Bài 29: Sử dụng hàm tweenmax cho hiệu ứng load nội dung
• Bài 30: Viết mã Html
• Bài 31: Viết mã Css
• Bài 32: Phần css hiệu ứng
• Bài 33: Sử dụng hàm tweenmax kết hợp jquery cho hiệu ứng load thêm
• Bài 34: Giới thiệu thuộc tính transition delay cho các ứng dụng khác

Phần 9: Sử dụng animation

• Bài 35: Giới thiệu animation
• Bài 36: Sử dụng animation
• Bài 37: Project 4: Animation làm hiệu ứng load của website – phần 1 html
• Bài 38: Project 4: Animation làm hiệu ứng load của website – phần 2 css
• Bài 39: Project 4: Animation làm hiệu ứng load của website – phần 3 Chuyển động
• Bài 40: Project 5: Animation làm hiệu ứng load của website – phần 1 html
• Bài 41: Project 5: Animation làm hiệu ứng load của website – phần 2 css
• Bài 42: Project 5: Animation làm hiệu ứng load của website – phần 3 Chuyển động
• Bài 43: Tổng kết

Phần 10: Sử dụng jquery kết hợp với css3

• Bài 44: Giới thiệu kiến thức và cách kết hợp jquery và css3
• Bài 45: Project 6: Viết hiệu ứng modal box – phần 1 html
• Bài 46: Project 6: Viết hiệu ứng modal box – phần 2 css
• Bài 47: Project 6: Viết hiệu ứng modal box – phần 3 jquery
• Bài 48: Project 6: Viết hiệu ứng modal box – phần 4 Các hiệu ứng slideIn, slideIn Bottom, newspaper
• Bài 49: Project 6: Viết hiệu ứng modal box – phần 5 Thuộc tính tâm quay, các hiệu ứng slide fall, sticky
• Bài 50: Project 6: Viết hiệu ứng modal box – phần 6 Thuộc tính perspective, rotateY(), tâm quay
• Bài 51: Project 6: Viết hiệu ứng modal box – phần 7 Thuộc tính translateZ() kết hợp animation nhiều keyframes
• Bài 52: Project 6: Viết hiệu ứng modal box – phần 8 Hàm thời gian của jquery và các hiệu ứng
• Bài 53: Project 7: Push menu sử dụng jquery – phần 1 html và css
• Bài 54: Project 7: Push menu sử dụng jquery – phần 2 html
• Bài 55: Project 7: Push menu sử dụng jquery – phần 3 Hướng dẫn các bài ứng dụng khác

Phần 11: Sử dụng jquery viết hiệu ứng tại trang apple.com

• Bài 56: Giới thiệu hiệu ứng trang apple.com và kiến thức cần áp dụng
• Bài 57: Hiệu ứng apple.com – Phần 1 html
• Bài 58: Hiệu ứng apple.com – Phần 2 css
• Bài 59: Hiệu ứng apple.com – Phần 3 Phần jquery xử lý cho nút next phần 1
• Bài 60: Hiệu ứng apple.com – Phần 4 Phần jquery xử lý cho nút next phần 2
• Bài 61: Hiệu ứng apple.com – Phần 5: Phần jquery xử lý cho nút next phần 3
• Bài 62: Hiệu ứng apple.com – Phần 6: Phần jquery xử lý cho nút prev
• Bài 63: Hiệu ứng apple.com – Phần 7: Phần jquery xử lý cho nút chuyển slide
• Bài 64: Hiệu ứng apple.com – Phần 8: Phần jquery xử lý thời gian và hoàn thiện hiệu ứng

Phần 12: Sử dụng jquery viết các kiểu hiệu ứng khác nhau cho slide

• Bài 65: Jquery cho các hiệu ứng slide giới thiệu
• Bài 66: Jquery cho các hiệu ứng slide: hiệu ứng ‘let me in’
• Bài 67: Jquery cho các hiệu ứng slide: hướng dẫn các hiệu ứng khác và tổng kết

Phần 13: Sử dụng jquery viết các hiệu ứng scroll

• Bài 68: Giới thiệu các kiến thức sử dụng
• Bài 69: Project 8: Hiệu ứng scroll thay đổi header – phần 1 – html
• Bài 70: Project 8: Hiệu ứng scroll thay đổi header – phần 2 – css
• Bài 71: Project 8: Hiệu ứng scroll thay đổi header – phần 3 – jquery
• Bài 72: Project 8: Hiệu ứng scroll thay đổi header – phần 4 – hướng dẫn bài tập áp dụng
• Bài 73: Project 8: Hiệu ứng scroll thay đổi header – phần 5 – phân tích hiệu ứng scroll jquery trong web thực tế
• Bài 74: Project 9: Giới thiệu bài và kiến thức sử dụng: scroll, wow js, animate css
• Bài 75: Project 9: Bắt đầu xử lý html và css
• Bài 76: Project 9: Xử lý hiệu ứng jquery
• Bài 77: Project 9: Sử dụng thư viện animate.css kết hợp jquery
• Bài 78: Project 9: Sử dụng thư viện wow.js kết hợp jquery phần 1 html + css
• Bài 79: Project 9: Sử dụng thư viện wow.js kết hợp jquery phần 2 jquery
• Bài 80: Bài tập cuối chương áp dụng hàm scroll jquery đã học
• Bài 81: Tổng kết phần scroll jquery

Phần 14: Hiệu ứng sắp xếp và hiệu ứng filter

• Bài 82: Giới thiệu các kiến thức và project 10
• Bài 83: Hiệu ứng sắp xếp sử dụng thư viện isotope kết hợp jquery
• Bài 84: Hiệu ứng filter phần 1 – viết mã html
• Bài 85: Hiệu ứng filter phần 2 – viết mã jquery
• Bài 86: Hiệu ứng filter phần 3 – filter bằng cách kết hợp jquery và isotope
• Bài 87: Hiệu ứng filter phần 4 – filter bằng cách quicksearch
• Bài 88: Tổng kết hiệu ứng filter và sắp xếp

Phần 15: Hiệu ứng kết hợp bootstrap và jquery

• Bài 89: Giới thiệu kiến thức
• Bài 90: Cài đặt cơ bản bootstrap và plugin
• Bài 91: Hiệu ứng popover
• Bài 92: Hiệu ứng tooltip
• Bài 93: Hiệu ứng tab
• Bài 94: Hiệu ứng modal
• Bài 95: Hiệu ứng carousel
• Bài 96: Hiêu ứng scrollspy – phần 1 html
• Bài 97: Hiệu ứng scroll spy – phần 2 hiệu ứng scroll và animate

Phần 16: Hiệu ứng Gsap kết hợp jquery

• Bài 98: Giới thiệu kiến thức
• Bài 99: Giới thiệu và ví dụ về tweenmax – phần 1
• Bài 100: Giới thiệu và ví dụ về tweenmax – phần 2
• Bài 101: Áp dụng tweenmax kết hợp jquery
• Bài 102: Giới thiệu TimelineMax
• Bài 103: Giới thiệu bài tập luyện tập kiến thức tổng hợp
• Bài 104: Hướng dẫn kĩ thuật viết hiệu ứng loading của website
• Bài 105: Hướng dẫn kĩ thuật viết hiệu ứng loading của website (Tiếp)

Phần 17: Tổng kết khóa học

• Bài 106: Tổng kết kiến thức
• Bài 107: Hướng dẫn viết hiệu ứng

Giới thiệu giảng viên

Giảng viên: Nguyễn Đức Việt