Front-End Developer Checklist 2019

Front-End Developer Checklist 2019

02-01-2019    

Skill Checklist đầy đủ nhất dành cho Front-end Developer ở mọi level khác nhau, kèm theo là một số tài liệu tham khảo liên quan ở mỗi mục.

Website là ở khắp mọi nơi (Web eating the world) vì thế sẽ không thiếu cơ hội phát triển cho một front-end developer chất. Không như back-end, sự phát triển của front-end trong những năm gần đây phải nói là chóng mặt, vì thế sẽ hơi khó để theo kịp đặc biệt là đối với những người mới bắt đầu.

Phần dưới đây, tui đã liệt kê ra khá đầy đủ những skill mà bất kì front-end developer nào cũng nên hướng tới, ở mọi level từ người mới bắt đầu, amateur hoặc những developer lâu năm kinh nghiệm. Ô kê, hãy bắt đầu đi vào chi tiết.

Front-end Development và Front-end Developer chính xác là gì?

Đã bao giờ bạn nhìn vào một trang web ưa thích như Youtube, Zing Mp3 hay P**nhub và tự hỏi làm cách nào để làm được những trang web pro như vậy? Đã bao giờ bạn chú ý tới những giao diện responsive đẹp lung linh hoặc những animation đỉnh cao và ước ngày nào đó có thể tạo ra chúng, tạo ra những thứ đó khó tới mức nàp?

HTML

Tất cả những thứ liên quan tới những gì bạn thấy trên mỗi website được tao ra bởi “front-end development”. Front-end developer (nhà phát triển mặt tiền :v) là người implement những Web design (bản vẽ thường do đội ngũ designer tạo ra) trở thành những trang web cho người dùng (end-user) sử dụng.

Theo một số cuộc thống kế và nghiên cứu, năm 2014 chỉ ở nước Mỹ có 150 nghìn front-end developer và số lượng này có thể tăng lên tới 190 nghìn vào năm 2024. Sự thay đổi nhanh chóng về công nghệ về Front-end sẽ khiến cho cuộc cạnh tranh các vị trí Front-end developer trở nên thú dị hơn khi mà các developer ít cập nhật công nghệ sẽ bị bỏ lại phía sau.

Front-end Developer Checklist

Các kĩ năng khác nhau cần thiết cho các mức level khác nhau, và chúng được chia ra làm 4 phase.

1. Skill cho Beginners

  • HTML + CSS

HTML (ngôn ngữ đánh dấu siêu văn bản) và CSS là hai thứ mà mọi front-end developer nào cũng phải nắm rõ. HTML cấu thành nên “bộ xương” của trang web, trong khi CSS thêm màu sắc và hiệu ứng làm cho chúng dễ nhìn hơn trong mắt người dùng. Tất cả mọi thứ như chữ, ảnh và màu sắc ta thấy trên web đều được implement từ HTML và CSS.

Chi tiết hơn, HTML chủ yếu sử dụng cho web layout (thiết kế bố cục web), bạn cần thành thạo sử dụng các thẻ div form table ul li span, etc. Sau đó CSS sẽ giúp bạn hoàn thành implement chi tiết layout của một trang web với CSS Style.

Về cơ bản, để sử dụng CSS bạn cần nắm rõ các thuộc tính như float position height width overflow margin padding và một số thẻ liên quan. HTMl và CSS cơ bản là rất dễ học (đặc biệt là HTML), CSS cơ bản thì dễ, tuy nhiên để thành thạo thì phải qua nhiều thời gian code (giao diện nhìn càng ngầu thì phần code CSS càng khó :v).

  • JavaScript

HTML và CSS không phải là ngôn ngữ lập trình (không có xử lí logic), mà chỉ là ngôn ngữ đánh dấu. Javascript là ngôn ngữ lập trình được sử dụng ở phía client-side (các trình duyệt: Chrome, Firefox, IE…). JavaScript dùng để làm cho trang web mượt hơn với những hiệu ứng chuyển động đẹp mắt, hô trợ cho việc tương tác giữa user với server.

Theo khảo sát trên StackOverflow, JavaScript là ngôn ngữ phổ biến nhất được sử dụng trong cộng đồng developer và áp đảo hoàn toàn với tỉ lệ 62.5% so với tất cả những ngôn ngữ khác. Nhờ có NodeJS, JavaScript giờ muốn lập trình gì cũng được (cả server-side, mobile app hoặc desktop app), mà cái này sẽ đề cập sau :v.

  • JQuery

JQuery là một bộ thư viện JavaScript được sử dụng khá rộng rãi. Nó khá nhẹ và tương thích với hầu như mọi trình duyệt (từ Safari 2, Opera 6 và thậm chỉ là IE 6 trở lên). Nó giúp handle HTML, event và các hiệu ứng chuyển động (xử lí bằng Javascript) đơn giản hơn (kiểu như wrap các đoạn code hay xài của JS ấy).

Ngoài ra nó cũng hỗ trợ Ajax (gọi XMLHttpRequest từ trình duyệt). Một lời khuyên là bạn nên nắm kĩ các khái niệm cơ bản và nguyên tắc hoạt động của Javascript, các tương tác với HTML Dom trước khi bắt đầu xài JQuery (vì JQuery đã làm sẵn hết nên có thể khiến bạn lười đó :v).

JQuery

… Bài viết vẫn đang được cập nhật, chưa xong :smile:.