Slide 1.
Mục tiêu của buổi offline
Slide 2.
Nội dung của buổi offline
Các kỹ năng cần có của một Frontend Dev
- HTML & CSS
- Javascript 3.Responsive Design 4.CSS Library & Framework 5.Javascript Library & Framework 6.CSS Preprocessing 7.Building and Automation Tools
Slide 3 - Frontend Dev là làm gì ?
Frontend Dev là người chịu trách nhiệm xây dựng giao diện ứng dụng và các tương tác giữa người dùng với ứng dụng.
Slide 4 - HTML & CSS
HTML và CSS là bộ đôi dùng để định dạng cấu trúc và cách trình bày nội dung của một trang web.
NOTICE: Đưa vào đây bài thực hành trong khóa học HTML
Slide 5 - Javascript
Javascript là ngôn ngữ lập trình dùng để
- Tạo nên tương tác người dùng
- Xây dựng giao diện
- Gửi, nhận và xử lý dữ liệu
Slide 6 - Khởi động với Javascript
Bắt đầu với những gì đơn giản nhất
Đưa vào đây Lab 1
Slide 7 - HTML DOM = HTML Document Object Model
Dùng để
- Thao tác tìm, tạo, thay đổi, xóa các phần tử HTML.
- Gắn kết hàm xử lý sự kiện lên các phần tử HTML.
- Định dạng cách trình bày các phần tử HTML.
Đưa vào đây bài Lab 4 - Sociss Todo.
Slide 8 - AJAX = Asynchronous JavaScript And XML
Dùng để
- Gửi dữ liệu đến web server.
- Truy vấn dữ liệu từ web server
- Thông qua HTML DOM để cập nhật lại nội dung trang web mà không cần tải lại trang.
Đưa vào đây bài Lab 3 - Sociss Weather Card.
Slide 9 - Responsive Design
"Trang web sẽ trình bày nội dung khác nhau trên các kích thước màn hình khác nhau."
Đưa vào đây bài Lab 5 - Responsive Card
Slide 10 - CSS Library & Framework
"CSS library và framework cung cấp cho bạn các tags và classes đã được định nghĩa mã lệnh CSS, giúp cho bạn phát triển giao diện web nhanh, đẹp và ổn định trên nhiều trình duyệt."
Thử nghiệm Bootstrap để hiểu về CSS Framework.
Đưa vào đây bài Lab 6 - Bootstrap landing page.
Slide 11 - Javascript Library & Framework
"Javascript library và framework cung cấp cho bạn mã lệnh đã được viết sẵn để giải quyết các vấn đề thường gặp trong việc xây dựng giao diện người dùng, giúp bạn tập trung vào phát triển các nghiệp vụ hoặc tính năng quan trọng hơn, tiết kiệm chi phí, thời gian và công sức."
- Thử nghiệm dùng JQuery tăng tốc thao tác với HTML DOM
Đưa vào đây Bài Lab 7 - JQuery working with HTML DOM.
- Thử nghiệm dùng Angular JS giải quyết bài toán mô hình MVC ứng dụng Weather Card ở Lab 3
Đưa vào đây bài Lab 8 - Weather Card on Angular JS 1.x
Slide 12 - Lưu ý khi chọn sử dụng Library hoặc Framework
Trả lời các câu hỏi dưới đây
- Nó có thật sự tiết kiệm thời gian, công sức và chi phí ?
- Ứng dụng bạn có đủ lớn hoặc thật sự phức tạp để cần đến nó ?
- Sử dụng nó có ảnh hướng đến bạn hay người dùng của bạn hay không ?
- Đồng nghiệp của bạn có sử dụng được nó, nó có an toàn và đầy đủ tài liệu ?
Framework là dàn khung của cả dự án, hay cân nhắc và tìm hiểu thật kỹ trước khi quyết định.
Slide 13 - CSS Preprocessing
"Cho phép bạn lập trình CSS, khai báo biến, viết hàm, thực hiện vòng lặp , tính toán, ... "
Bản chất của nó là sử dụng một ngôn ngữ CSS mở rộng với các ký pháp cho phép bạn khai báo biến, viết hàm, .... Rồi sau đó mã lệnh mở rộng này sẽ được biên dịch bởi CSS Preprocessing và cho ra mã CSS thuần mà bạn đã sử dụng lâu nay.
Đưa vào đây bài Lab 8 - Thử dùng Sass
Slide 14 - Building and Automation Tools
"Tự động hóa các công việc lặp đi lặp lại trong quá trình làm việc."
- Kiểm tra lỗi khi viết mã Javascript > Thử http://jshint.com/
- Minify CSS và JS để tăng tốc độ tải > Thử https://www.minifier.org/
- Biên dịch ra mã CSS mỗi khi thay đổi mã lệnh SASS
- Reload trình duyệt bằng phím F5 mỗi khi thay đổi mã lệnh HTML hoặc CSS
Hãy tự động hóa nó, thử nghiệm với bài Lab 9 - Demo Using Grunt tools
Slide 15 - Bạn cần làm gì nữa ?
"Rèn luyện, thử nghiệm và liên tục cập nhật kiến thức từ các diễn đàn, cộng đồng và blog công nghệ"
Các nguồn tin cậy
- Blog Top Dev > https://blog.topdev.vn/
- Techtalk > https://techtalk.vn/
- Diễn đàn Viblo > https://viblo.asia/
Và tất nhiên là không thể thiếu cộng đồng của chúng ta Sociss Class tại
fb.com/groups/sociss.edu.vn
End Slide
Thanks You So Much