Slide bài giảng khóa học front end

229 41 0
Slide bài giảng khóa học front end

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

Thông tin tài liệu

Học lập trình frontend là bước đầu xây dựng một sự nghiệp thành công trong ngành IT. Học lập trình frontend từ căn bản đến nâng cao và xây dựng giao diện web đẹp mắt. thành coder chuyên nghiệp. Bắt đầu từ con số 0. Phù hợp cho mọi đối tượng. Hỗ trợ việc làm.

KHĨA HỌC FRONT-END Bài 01: Giới thiệu khóa học, học HTML Nội dung 01 Giới thiệu khóa học 02 Lộ trình khóa học 03 Giới thiệu cơng việc Front-end thực tế 04 Khái niệm UI - UX 05 Hướng dẫn cài đặt phần mềm 06 Học HTML 01 Giới thiệu khóa học Lập trình Front-end gì? ● Tạo giao diện website để người dùng nhìn thấy ● Tạo giao diện để người dùng tương tác ● Các bạn làm việc với designer đội back-end 01 Giới thiệu khóa học Mục tiêu khóa học: ● Tự tay lập trình giao diện web theo thiết kế ● Giúp bạn nắm vững kiến thức tảng ● Đủ khả ứng tuyển cơng ty Khóa học gồm 44 buổi học, kéo dài khoảng tháng 01 Giới thiệu khóa học Yêu cầu khóa học: ● Hạn chế nghỉ học (không buổi) ● Xem lại học sau học xong lượt (slide + file code) ● Code lại ví dụ có học ● Làm tập đầy đủ 02 Lộ trình khóa học Lộ trình khóa học: gồm phần ● Phần 1: Giới thiệu định hướng, học HTML, HTML5 (3 buổi) ● Phần 2: Học CSS, CSS3, Project mini (5 buổi) ● Phần 3: Học Bootstrap (4 buổi) ● Phần 4: Học GIT, GITHUB, Project mini (2 buổi) ● Phần 5: Javascript nâng cao, Project mini 3(9 buổi) ● Phần 6: Package Managers, BEM, SASS/SCSS, Project mini (3 buổi) ● Phần 7: ReactJS, Redux, React Router, Project mini (10 buổi) ● Phần 8: Ant Design Ant Design Charts (5 buổi) ● Phần 9: Project cuối khóa (3 buổi) 03 Giới thiệu công việc Front-end thực tế Một số project thực tế: Landing page Luxcat ● ● Link Figma: Website bán xanh ● Link Figma: Website bán tour du lịch ● Link Figma: https://www.figma.com/fil https://www.figma.com/file https://www.figma.com/file/ e/lMf7r2dDxYkoSvEaUwbXIl /1JlT57DtzExkmj1caWNXXl/C uuYCdMEwYTs77ncvzrbO58/T /LUXCAT %C3%A2y-Xanh-Haluta OP-TEN-TRAVEL Link Website: https://luxcat.co ● Link Website: https://haluta.vn ● Link Website: https://toptentravel.com.vn 03 Giới thiệu cơng việc Front-end thực tế Tìm job tuyển dụng tại: ● https://www.topcv.vn/ ● https://itviec.com/ ● Group tuyển dụng IT Facebook 04 Khái niệm UI - UX UI gì? ● UI Design (User Interface Design): thiết kế giao diện người dùng ● Nếu website đẹp khiến nhiều người thích thú, tạo thiện cảm tốt, tăng độ tin tưởng UX gì? ● UX Design (User Experience Design): thiết kế trải nghiệm người dùng ● UX thao tác mà người dùng thực website 05 Hướng dẫn cài đặt phần mềm Phần mềm: ● Visual Studio Code (Link tải: https://code.visualstudio.com/download) Extensions (Tiện ích mở rộng): ● Auto Rename Tag - Tự động sửa tên thẻ ● Beautify - Làm đẹp code ● Color Highlight - Hiển thị màu sắc theo mã màu ● CSS Variables Autocomplete - Gợi ý biến CSS để code nhanh ● HTML Boilerplate - Tạo khung HTML soạn sẵn ● HTML Snippets - Gợi ý code HTML ● Live Server - Khi lưu code web tự load lại ● Material Icon Theme - Icon cho theme dễ nhìn ● Path Intellisense - Gợi ý đường dẫn file Nội dung 01 Components: Collapse, Dropdowns, Forms, Modal, Navs, Pagination 02 Dựng tiếp layout 01 Components 1.1 Collapse (Sự biến hình) – Hay sử dụng 01 Components 1.1 Collapse (Sự biến hình) – Ví dụ 01 Components 1.2 Dropdowns (Thả xuống) 01 Components 1.3 Forms (Biểu mẫu) – Hay sử dụng 01 Components 1.3 Forms (Biểu mẫu) – Bài tập làm thêm 01 Components 1.4 Modal – Hay sử dụng 01 Components 1.4 Modal – Ví dụ 01 Components 1.5 Navs – Hay sử dụng 01 Components 1.5 Navs – Ví dụ (https://thamtraisanhp.vn/) 01 Components 1.6 Pagination 02 Dựng tiếp layout 02 Dựng tiếp layout 02 Dựng tiếp layout 02 Dựng tiếp layout

Ngày đăng: 08/06/2023, 11:04

Tài liệu cùng người dùng

Tài liệu liên quan