Hiện nay khi làm frontend chúng ta có rất nhiều thư viện hay framework được sử dụng phổ biến như Bootstrap, jQuery, Angular, Reac, Vue, … Mỗi thư viện sẽ có cách sử dụng và đặc thù khác nhau, vì thế khi bạn phỏng vấn vào từng vị trí cụ thể sẽ có những câu hỏi khác nhau dành cho từng framework. Trong bài viết này mình sẽ không đi sâu vào câu hỏi dành cho từng thư viện trên mà sẽ chỉ đề cập đến phần nội dung kiến thức dành cho lập trình viên Frontend.

Frontend Developer cần được trang bị những kiến thức và HTML, CSS và JavaScript – đấy là những ngôn ngữ (kỹ năng) chủ đạo; ngoài ra kiến thức về UI/UX cùng một số thao tác sử dụng cơ bản phần mềm thiết kế như Photoshop hay AI cũng là cần thiết. Chúng ta cùng bắt đầu vào các câu hỏi cụ thể nhé.

A. Kiến thức về HTML

 Phân biệt thẻ HTML inline và block, khi nào sử dụng 2 loại này?

HTML block/inline ý chỉ cách hiển thị 1 thẻ HTML trên trình duyệt, trong đó block là dạng khối với width mặc định là 100%, height thì phụ thuộc vào nội dung bên trong, ngược lại thì inline sẽ hiển thị dạng nối tiếp nhau với width phụ thuộc vào độ dài của dữ liệu hiển thị.

Các thẻ dạng block là div, p, header, footer, table, …

Các thẻ dạng inline là span, i, b, a, br, label, button, …

Về cách sử dụng, nếu muốn các dữ liệu hiển thị trên 1 hàng thì sẽ sử dụng thẻ inline, còn nếu muốn tạo 1 khối có thể thiết lập khoảng trống giữa nội dung và đường viền thì sẽ sử dụng các thẻ block. Ngoài ra chúng ta có thể sử dụng thuộc tính display trong CSS để thiết lập hiển thị inline hay block.

2. Mô tả cấu trúc bố cục thường sử dụng của HTML

Thông thường 1 trang web sẽ có cấu trúc gồm những phần như dưới đây:

• Header: Phần bắt đầu của web, chứa các thông tin về tiêu đề, logo, liên hệ (các thẻ meta), các link CDN css thông thường cũng được import ở đây.
• Footer: Phần cuối cùng của trang web, thông thường sẽ chứa các thông tin liên hệ, bản quyền, tác giả hay các link liên kết.
• Menu hay Nav: thanh điều hướng của trang. Có nhiều kiểu style menu khác nhau, phổ biến là top menu, sidebar.
• Body: Phần thân của website, chứa các phần tử chính hiển thị lên màn hình như văn bản, hình ảnh, liên kết, form, …
• Style: phần khai báo thuộc tính CSS sử dụng trong trang web.
• Script: phần khai báo mã JavaScript sử dụng trong trang web.

3. HTML5 là gì? Sự khác biệt giữa HTML và HTML5

HTML5 là một ngôn ngữ lập trình, còn HTML đơn thuần là một ngôn ngữ đánh dấu dành cho việc hiển thị. HTML5 được phát triển trên nền tảng HTML với nhiều cải tiến và hỗ trợ giúp cho lập trình viên cũng như người sử dụng (end-user). HTML5 được phát hành từ năm 2018, có khả năng tương thích với các trang web cũ, chuẩn hóa các kỹ thuật không chính thức và twang khả năng phục vụ đa phương tiện. 

Đối với lập trình viên, HTML5 hỗ trợ tốt hơn khi thiết kế web dành cho di động, thuộc tính data được thêm vào các thẻ giúp bạn có thể tùy biến dữ liệu mà không cần sử dụng thêm đoạn xử lý JS nào khác.

Đối với người dùng đầu cuối, HTML5 giúp nâng cao trải nghiệm, xem được các hình ảnh, video đa phương tiện mà không cần cài đặt thêm các plugin khác.

B. Kiến thức về CSS

1. Có những cách nào để khai báo CSS, thứ tự ưu tiên giữa các cách sử dụng đó.

Có 3 cách thông thường để sử dụng CSS trên 1 trang HTML

• Inline: đặt trực tiếp bên trong các phần tử HTML qua thuộc tính style.
• Internal: khai báo css trong thẻ style nằm trong chính trang HTML đó. Có 3 rule sử dụng để liên kết giữa css và phần tử bao gồm: thông qua thẻ, thông qua khai báo class hoặc thông qua khai báo id.
• External: đặt phần css này thành 1 file riêng so với file html và sử dụng thẻ link để liên kết với nhau. Cách liên kết cũng tương tự như khai báo Internal, thông qua thẻ, class và id.

Về thứ tự ưu tiên, CSS sẽ ưu tiên khai báo inline có tác dụng cao nhất, tiếp đó sẽ đến id, class và thẻ. Ngoài ra chúng ta có thể sử dụng khai báo !important để ưu tiên css mình muốn sử dụng.

2. Bạn thường dùng kỹ thuật nào để responsive một trang web

Responsive là cách thiết kế website làm sao cho các phần tử trong web có thể hiển thị một cách phù hợp trên các thiết bị với kích thước và độ phân giải khác nhau. Có một số thủ thuật (tips) hay sử dụng như sau:

• Sử dụng percentages (%): để set width/height của nội dung hiển thị, chúng ta có thể sử dụng % giúp nó co giãn theo kích thước của màn hình. Set % cũng thường sử dụng cho việc chia khối layout.
• Sử dụng Media Query: Media Query là 1 module giúp chúng ta xác định được device đang hiển thị, từ đó style các thành phần của web một cách hợp lý. 
• Sử dụng max-width, min-width: cho phép đặt chiều rộng tối đa cho 1 phần tử, ngăn không cho phần tử này vượt quá phạm vi bạn set và giúp bạn giữ được bố cục layout màn hình.
• Sử dụng Box-sizing: Box-sizing giúp chúng ta thoải mái điều chỉnh padding cho từng loại màn hình khác nhau mà không sợ ảnh hưởng đến width của phần tử.

3. Hãy giải thích các thuộc tính về vị trí (position) trong CSS

Thuộc tính vị trí (position) trong CSS có những giá trị sau:

• Absolute: vị trí tuyệt đối cho phần tử theo thành phần bao ngoài hoặc cửa sổ trình duyệt.
• Static: vị trí ở trạng thái mặc đinh của phần tử (trường hợp này thì các thuộc tính top, bottom, left, right đều không có hiệu lực).
• Relative: vị trí tương đối so với vị trí mặc định.
• Fixed: định vị trí theo màn hình và luôn cố định ở 1 vị trí trên viewport.
• Sticky: vị trí của phần tử được xác định khi người dùng sử dụng thanh cuộn.

C. Kiến thức về JavaScript

Liệt kê 1 số function thao tác với DOM bạn hay sử dụng

Một số thao tác DOM cơ bản thường sử dụng:

• getElementById: trả về phần tử có thuộc tính ID là giá trị được chỉ định.
• getElementsByClassName: trả về tập hợp các phần ử trong trang có thuộc tính class được chỉ định.
• querySelector: trả về phần tử đầu tiên trong tập hợp các kết quả được tìm thấy bởi CSS selector được chỉ định. 
• addEventListener / removeEventListener: thêm / xóa sự kiện hay hành động cho 1 phần tử HTML.
• appendchild / removechild: thêm / xóa 1 DOM Node vào DOM Tree.

BOM là gì? Các loại BOM hay dùng.

BOM viết tắt của Brower Object Model là những đối tượng liên quan đến trình duyệt browser. Có 1 số loại BOM hay dùng như:

• Window: đối tượng toàn cục cấp cao nhất, thường sử dụng để lấy kích thước trình duyệt (window.innerHeight), mở cửa sổ mới (window.open) hoặc đóng (window.close), di chuyển (window.moveTo), … Các BOM còn lại dưới đây các bạn đều có thể sử dụng như 1 thuộc tính của Window (ví dụ Window.Screen).
• Screen: lấy width, height, color depth hay pixel depth của màn hình.
• Location: thao tác với url của trình duyệt như: tải lại (reload), replace (ghi đè), load trang mới (assign).
• History: thao tác với lịch sử web, trở về trang trước hoặc tới trang tiếp theo, …
• Navigator: lấy thông tin ngôn ngữ, hệ điều hành, version của client và trình duyệt.
• Cookies: thao tác với Cookies của trình duyệt.

Cơ chế bất đồng bộ trong JavaScript

JavaScript là 1 ngôn ngữ Single thread (luồng đơn), tức là nó chỉ có 1 thread duy nhất. Điều đó có nghĩa là các câu lệnh được thực hiện 1 cách tuần tự theo thời gian, xong cái trước mới bắt đầu thực hiện cái sau. Cơ chế bất đồng bộ sinh ra để khắc phục việc JavaScript không hỗ trợ multi-thread bằng cách bắt đầu thực hiện cái sau ngay cả khi cái trước chưa hoàn thành.

Trong JS, chúng ta sử dụng Callback, Promise hoặc Async/Await để thực hiện bất đồng bộ. Lưu ý là Promise được thêm vào trong ES6, còn Async/Await chỉ có mặt trong phiên bản ES7 về sau. Bài toán chúng ta hay sử dụng Async/Await nhất là khi cần lấy dữ liệu từ server thông qua API, lúc này sẽ cần chờ đợi phản hồi từ server trả về; và đấy chính là một yêu cầu HTTP không đồng bộ.

Kết bài

Trên đây là tổng hợp của mình về một số câu hỏi phỏng vấn thường gặp cho vị trí FrontEnd Developer. Còn rất nhiều câu hỏi khác mà bạn có thể gặp, vì thế hãy trang bị cho mình đầy đủ các kiến thức liên quan từ HTML, CSS hay JS, nó sẽ giúp bạn tự tin để có thể pass được vị trí lập trình viên mà bạn mong muốn. Chúc các bạn thành công và hẹn gặp lại các bạn ở các bài viết sau của mình.