Trong bài viết này, VietnamWorks inTECH sẽ mang đến cho bạn bộ câu hỏi phỏng vấn “tủ” dành riêng cho vị trí Front-end Developer. 

Trước khi đi vào chi tiết, chúng ta sẽ cùng tìm hiểu Front-end Developer là gì nhé?

I. Front-end Developer là gì?

Front-end (Giao diện người dùng) là một phần của trang web mà người dùng tương tác trực tiếp được. Nó bao gồm mọi thứ mà người dùng trải nghiệm trực tiếp: màu sắc và kiểu văn bản, hình ảnh, biểu đồ và bảng, button, màu sắc và menu điều hướng. HTML, CSS và JavaScript là những ngôn ngữ được sử dụng để phát triển Front End. 

Nhiệm vụ chính của một lập trình viên Front-end là xây dựng, phát triển giao diện website nhằm đem đến cho người dùng những trải nghiệm tốt nhất trên chính sản phẩm website mà họ tạo ra.

Hiện nay, do nguồn cung nhân lực còn hạn chế nên sức nóng của tuyển dụng Front-end vẫn chưa hết hạ nhiệt. Theo thống kê mới nhất, khoảng lương phổ biến của một Front-end dao động từ khoảng 11 - 23 triệu đồng/tháng.

II. Bộ câu hỏi phỏng vấn dành riêng cho Front-end Developer

1. Các Kỹ năng kỹ thuật (Technical Skill) và Kỹ năng cần thiết khác để trở thành Front-end Developer là gì?

Là một Front-end, chúng ta cần phải nắm vững các kiến thức về: HTML, CSS, JQuery, JavaScript.

Ngoài các kỹ năng kỹ thuật được đề cập ở trên, bạn cũng nên trang bị cho mình những kiến thức được đề cập sau đây:

  • Có kinh nghiệm trong bất kỳ Hệ thống quản lý nội dung (CMS) nào như WordPress, Drupal và Joomla.
  • Kiến thức về Kiểm thử nhiều trình duyệt (Cross browser testing)
  • Kiến thức về OOPS và PHP.
  • Kiến thức cơ bản về SEO & các công cụ như Dreamweaver và Flash - được sử dụng để trình bày thông tin trên nền web (web based) cho end user.

2. Hãy phân biệt sự khác nhau giữa visibility:hidden; và display:none?

Visibility:Hidden; –  phần tử sẽ bị ẩn đi, tuy nhiên nó vẫn chiếm không gian hiển thị.

Display:None; – ẩn phần tử đi và phần tử đó không còn chiếm không gian hiển thị

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

HTML và XHTML đều là ngôn ngữ đánh dấu để viết các trang web. Sự khác biệt chính giữa hai loại này là cú pháp HTML dựa trên SGML trong khi cú pháp XHTML dựa trên XML.

4. Tại sao các công ty thường dùng Typescript mà không phải Javascript?

Vì Typescript có những ưu điểm vượt trội hơn so với Javascript như:

  • Hỗ trợ OOP mạnh: hầu hết những tư tưởng, cú pháp của lập trình hướng đối tượng đều được typescript hỗ trợ. Ví dụ như: kế thừa, đóng gói, constructor, abstract, interface, implement, override…v.v đều có cả.
  • Hỗ trợ cơ chế module hóa, hỗ trợ namespace… giúp xây dựng các hệ thống lớn với nhiều member cùng làm việc mà không quá khó khăn.
  • Cú pháp mạnh lạc rõ ràng, được các IDE hỗ trợ tận tình, gợi ý câu lệnh cực ngon. Điển hình như Visual Studio code.
  • Được hỗ trợ bởi nhiều framework lớn. Điển hình như Nativescript, Vuejs, Angular 2, Ionic… kể cả NodeJs cũng đã hỗ trợ Typescript rồi.

Trên đây chỉ là một vài ý kiến để bạn tham khảo, bạn có thể tự đưa ra nhận định của riêng mình theo kinh nghiệm cá nhân. 

5. Điểm khác nhau của tag <span> và <div> là gì?

Thẻ <div> để phân chia nội dung trang, là loại phần tử cấp độ block tổng quát. Thẻ <span> trong HTML là loại phần tử cấp độ inline tổng quát.

6. Định nghĩa về CORS

CORS (hay nói một cách giông dài là Cross-Origin Resource Sharing) là một kĩ thuật được sinh ra để làm cho việc tương tác giữa client và server được dễ dàng hơn, nó cho phép JavaScript ở một trang web có thể tạo request lên một REST API được host ở một domain khác.

7. Có bao nhiêu cách khai báo biến trong CSS? Trình bày về mức độ ưu tiên trong CSS?

Có 3 cách để khai báo CSS là:

  • inline: Viết trực tiếp vào thẻ HTML thông qua thuộc tính style.
  • internal: Viết tại file HTML và nằm trong cặp thẻ <style> </style>
  • external: Viết ra một file riêng có đuôi là . css và import lại vào file HTML thông qua thẻ <link>

Mức độ ưu tiên khi áp dụng nhiều CSS từ cao xuống thấp là: thẻ  -> inline -> id -> class.

8. Hãy phân biệt sự khác nhau giữa Type và Interface?

Interface là một cách để mô tả cho một kiểu dữ liệu, chẳng hạn như một đối tượng. Không giống như một Interface, Type có thể đặt tên cho bất kỳ kiểu dữ liệu nào, bao gồm các kiểu dữ liệu nguyên thủy, kiểu dữ liệu hợp nhất và kiểu dữ liệu giao nhau.

Bạn có thể đưa ra thêm ví dụ để làm rõ nhận định của mình.

9. Bạn biết gì về BEM? Có nên sử dụng BEM trong công việc không?

BEM là viết tắt của cụm Block – Element – Modifier, là tiêu chuẩn quy ước đặt tên cho các tên lớp CSS. BEM giúp việc lập trình Frontend dễ hiểu, dễ đọc hơn, dễ làm việc và dễ mở rộng cũng như bảo trì khi làm việc với CSS.

Đối với những dự án nhỏ thì BEM có thể chưa cần đến, tuy nhiên các dự án lớn và làm việc nhóm thì BEM rất quan trọng. BEM giúp cho team làm việc với nhau dễ dàng hơn: Khi làm Teamwork với nhau, mỗi người đều sẽ có một cách đặt tên class riêng và sẽ bị conflict với nhau.

10. Phân biệt sự khác nhau giữa Null và Undefined?

Undefined nghĩa là một biến đã được khai báo nhưng chưa được gán giá trị, null là được gán cho một biến.

11. Làm thế nào để có thể tăng performance cho trang?

Chúng ta có thể tăng performance trang bằng các cách sau:

  • Dọn dẹp HTML document.
  • Giảm các yêu cầu HTTP bên ngoài.
  • Nén file, tối ưu hóa hình ảnh.
  • Sử dụng một frameworks tối giản.
  • Kết hợp JavaScript ở cuối trang.
  • Tối giản CSS, JavaScript, HTML.
  • Tăng tốc độ với một CDN và Caching.

12. Put và Post khác nhau như thế nào?

Khi chúng ta viết các API thì chúng ta thường sử dụng phương thức POST để tạo dữ liệu còn PUT thì để cập nhật lại dữ liệu.

13. JavaScript là ngôn ngữ lập trình hướng đối tượng – bạn nghĩ sao về nhận định này?

JavaScript được coi là ngôn ngữ lập trình hướng đối tượng (OOP) vì nó đáp ứng các tính chất của lập trình hướng đối tượng như: Tính đóng gói (Encapsulation) Tính trừu tượng (Abstraction)

14. Hãy nêu sự khác nhau giữa host object và native object?

Native objects là một phần của ngôn ngữ JavaScript được xác định bởi đặc tả ECMAScript, chẳng hạn như String, Math, RegExp, Object, Function, ... Host objects được cung cấp bởi môi trường runtime (trình duyệt hoặc Node), chẳng hạn như window, XMLHTTPRequest,...

15. Hãy cho biết sự khác nhau giữa cookies, session storage, và local storage?

  • Cookie cho phép các ứng dụng lưu trữ dữ liệu trong trình duyệt của khách hàng. 
  • Session storage cho phép các ứng dụng lưu trữ dữ liệu cho đến khi đóng cửa sổ. 
  • Local storage cục bộ cho phép các ứng dụng lưu trữ dữ liệu không ngừng.

16. Các tag Meta có ý nghĩa như thế nào? Những tags nào ảnh hưởng đến SEO trong HTML?

Thẻ Meta là các đoạn văn bản mô tả nội dung của trang, các thẻ này không xuất hiện trên chính trang mà chỉ xuất hiện trong phần mã nguồn của trang. Về cơ bản chúng giúp cho các công cụ tìm kiếm hiểu rõ hơn về nội dung của một trang web, do vậy rất tốt cho SEO.

Những tags có ảnh hưởng đến SEO trong HTML:

  • Tag Title (<title>)
  • Tag Meta Description
  • Tag <a> (hyperlink – hypertext anchor)
  • Heading content (h1, h2, h3, h4, h5, h6)
  • Tag link canonical (avoid duplicate or similar content)
  • Tag <strong> & tag <b>
  • Tag <em> & tag <i>

17. Pseudo-class trong CSS là gì?

Pseudo-Class trong CSS được sử dụng để thêm các hiệu ứng đặc biệt tới một số Selector mà không cần sử dụng đến JavaScript hoặc bất cứ ngôn ngữ Script nào. Ví dụ viết CSS đổi màu các liên kết khi rê chuột vào, đổi thuộc tính một phần tử khi nhấp vào, định dạng đường dẫn khi đã và chưa được click vào...

18. Theo bạn Web Accessibility là gì?

Web Accessibility (Khả năng truy cập web) là một cách để thiết kế, phát triển và mã hóa các trang web cũng như công cụ web mà người khuyết tật cũng có thể sử dụng. Nó làm cho việc sử dụng công nghệ trở nên dễ dàng đối với một số người gặp khó khăn về nghe hoặc nhìn. Nó đảm bảo rằng web cũng có thể sử dụng được bởi những người có nhiều khuyết tật.

19. Bạn có câu hỏi nào dành cho chúng tôi không?

Đây là câu hỏi mà chắc chắn bạn sẽ luôn được nhà tuyển dụng hỏi. Đối với câu hỏi này, đây chính là cơ hội để bạn tìm hiểu kỹ hơn về văn hóa công ty, cũng như quy trình làm việc của một team mà bạn sắp sửa làm việc cùng.

Đối với dạng câu hỏi này bạn nên hỏi những câu hỏi liên quan đến công việc. Như thế sẽ giúp bạn nắm rõ hơn công việc mà mình sẽ làm và thể hiện thái độ bạn có quan tâm đến vị trí này.

Một số câu hỏi gợi ý mà bạn có thể tham khảo:

  • Ai sẽ là người review code cho tôi?
  • Team có các buổi sharing học hỏi lẫn nhau hay không?
  • Các nhân viên thường sẽ nhận được phản hồi hoặc nhận xét công việc như thế nào và khi nào?
  • Anh/chị có thể cho tôi biết một chút về nhóm mà tôi sẽ hợp tác cùng không?

Tổng kết

Trên đây chúng ta đã cùng tìm hiểu về những câu hỏi mà Front-end Developer thường gặp trong các buổi phỏng vấn. Hy vọng, bài viết có thể giúp bạn phần nào tự tin hơn khi đối diện với nhà tuyển dụng. Ngoài ra, để tìm việc Front-end Developer, đừng quên theo dõi các tin tuyển dụng mới nhất trên VietnamWorks mỗi ngày nhé! 

VietnamWorks inTECH

TẠO TÀI KHOẢN MỚI: XEM FULL “1 TÁCH CODEFEE” - NHẬN SLOT TƯ VẤN CV TỪ CHUYÊN GIA - CƠ HỘI RINH VỀ VOUCHER 200K