Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?

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

  1. HTML & CSS
  2. 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."

  1. Kiểm tra lỗi khi viết mã Javascript > Thử http://jshint.com/
  2. Minify CSS và JS để tăng tốc độ tải > Thử https://www.minifier.org/
  3. Biên dịch ra mã CSS mỗi khi thay đổi mã lệnh SASS
  4. 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

  1. Blog Top Dev > https://blog.topdev.vn/
  2. Techtalk > https://techtalk.vn/
  3. 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.