Trọn bộ câu hỏi phỏng vấn front-end và cách trả lời

Dưới đây là một số câu hỏi phỏng vấn Front-end phổ biến dành cho vị trí Intern hoặc Fresher nhằm giúp ứng viên vượt qua vòng phỏng vấn cũng như tạo ấn tượng tốt với nhà tuyển dụng. Những câu hỏi này đã được VietnamWorks tổng hợp lại và hy vọng rằng chúng có thể giúp ích cho các bạn. Cùng theo dõi ngay bài viết sau.

Các câu hỏi phỏng vấn về HTML

Doctype trong html là gì? Các loại Doctypes khác nhau là gì?

Khai báo DOCTYPE (Document Type Declaration) là dòng mã đầu tiên được yêu cầu trong mọi tài liệu HTML hoặc XHTML, còn được gọi là kiểu tài liệu HTML. Nó cung cấp thông tin cho trình duyệt web về phiên bản HTML mà trang web được viết. Điều này đảm bảo rằng trang web được phân tích cú pháp giống nhau bởi các trình duyệt web khác nhau.

Có ba loại DOCTYPE phổ biến là Strict, Transitional và Frameset. Tùy vào yêu cầu của dự án và phiên bản HTML được sử dụng, bạn có thể lựa chọn loại DOCTYPE phù hợp để khai báo cho trang web của mình.

Thuộc tính data- là gì?

Thuộc tính data trong HTML là một thuộc tính cho phép bạn lưu trữ thêm thông tin hoặc dữ liệu trong DOM. Bằng cách sử dụng thuộc tính data, bạn có thể viết HTML hợp lệ với các dữ liệu riêng tư được nhúng trong đó. Ngoài ra, các thư viện Javascript như Knockout cũng sử dụng thuộc tính data để lưu trữ dữ liệu trong DOM và giúp cho việc xử lý dữ liệu trở nên dễ dàng hơn.

HTML semantic có nghĩa là gì?

Đây là một trong những câu hỏi phỏng vấn front-end phổ biến nhà tuyển dụng có thể hỏi bạn nhằm xem kinh nghiệm chuyên môn của bạn đến đâu. Khái niệm HTML semantic được hiểu là sử dụng các thẻ HTML có ý nghĩa phù hợp nhất cho nhiệm vụ mà chúng ta đang thực hiện trên trang web. Điều này giúp cho mã HTML trở nên dễ đọc và dễ hiểu hơn cho các nhà phát triển và cả cho trình đọc màn hình.

Thay vì sử dụng các phần tử chung chung như <div> và <span>, ta nên sử dụng các thẻ HTML có ý nghĩa như <form>, <article>, <table>, <header>, <footer>, <nav>, v.v. để tạo ra các phần tử có ý nghĩa và giúp cho người đọc dễ dàng hiểu được cấu trúc và ý nghĩa của trang web.

Khả năng truy cập Web là gì (Web Accessibility)?

Khả năng truy cập web có nghĩa là đảm bảo rằng trang web của bạn có thể được sử dụng bởi tất cả mọi người, bao gồm cả những người khuyết tật. Điều này bao gồm việc đảm bảo rằng người dùng có thể điều hướng trang web của bạn chỉ bằng bàn phím và cũng đảm bảo rằng những người gặp khó khăn khi nghe hoặc nhìn cũng có thể sử dụng trang web của bạn. Đây là một trong những câu hỏi phỏng vấn front-end phổ biến nhà tuyển dụng có thể hỏi bạn.

Trong trường hợp bạn đang tìm kiếm cơ hội việc làm sinh viên, việc làm part time tphcm, việc làm Tân Phú hoặc tìm việc part time Hà Nội, hãy chú trọng vào việc chuẩn bị kỹ lưỡng cho các câu hỏi liên quan đến HTML, CSS và JavaScript, những yếu tố không thể thiếu trong các dự án front-end.

Sự khác biệt giữa thẻ và thuộc tính là gì?

Các thẻ (tag) HTML là các phần tử (element) được sử dụng để xây dựng trang web, ví dụ như <a>, <button> và <div>. Các thuộc tính (attribute) HTML mô tả các đặc điểm của các phần tử này, chẳng hạn như src, class và id. Ví dụ, trong đoạn văn “<p align=”center”> Câu hỏi phỏng vấn front-end </p>”, thuộc tính ‘align’ được sử dụng để căn chỉnh đoạn văn để hiển thị ở giữa.

Sự khác biệt giữa phần tử inline và phần tử block là gì?

Các phần tử inline như span, a và img không có chiều cao hoặc chiều rộng cố định. Trong khi đó, các phần tử khối như div, p và h1 có dòng riêng và chiếm toàn bộ chiều rộng của phần tử cha.

Các câu hỏi phỏng vấn về CSS

CSS framework là gì?

CSS là viết tắt của Cascading Style Sheet, là một ngôn ngữ tạo kiểu phổ biến được sử dụng để thiết kế các trang web bằng HTML. Ngoài ra, CSS còn có thể được áp dụng cho các tài liệu XML khác như XML thuần túy, SVG và XUL.

Hãy cho biết các cách khác nhau để tích hợp CSS vào trang HTML

Để tích hợp một kiểu CSS vào trang web, có ba phương pháp sau:

• Sử dụng thẻ style trong phần head của trang HTML để viết kiểu CSS và tích hợp vào trang.
• Sử dụng inline-styling để viết kiểu CSS trực tiếp vào từng phần tử HTML.
• Viết CSS trong một tập tin riêng biệt và sử dụng thẻ liên kết để liên kết tập tin CSS đó với trang HTML.

Đối với những bạn mới ra trường, các chương trình thực tập như account intern, business analyst intern, hay fresher java là cơ hội tuyệt vời để học hỏi và phát triển kỹ năng thực tế.

BEM là gì? Tại sao lại cần dùng BEM?

Đây là câu hỏi phỏng vấn front-end quen thuộc của nhà tuyển dụng. BEM là viết tắt của Block, Element và Modifier, đây là một quy ước đặt tên CSS giúp viết các lớp CSS dễ đọc và rõ ràng hơn. Bên cạnh đó, BEM cũng nhằm mục đích tạo ra các khối CSS độc lập để có thể tái sử dụng chúng trong các dự án khác nhau.

Ưu và nhược điểm khi sử dụng External Style Sheets?

Ưu điểm của việc sử dụng kiểu CSS trong trang web bao gồm:

• Kiểm soát được kiểu dáng của nhiều documents thông qua việc sử dụng chúng trên trang web.
• Các phần tử HTML có thể được tạo ra với nhiều lớp khác nhau để áp dụng các kiểu CSS khác nhau.
• Các chiến lược chọn và nhóm được sử dụng để tập hợp các kiểu trong các trường hợp phức tạp.

Tuy nhiên, việc sử dụng kiểu CSS cũng có một số nhược điểm như:

• Việc tải xuống các tệp kiểu bổ sung sẽ làm tăng thời gian tải trang.
• Để hiển thị các documents, các mẫu bên ngoài phải được xếp chồng lên nhau, điều này có thể làm cho mã HTML trở nên phức tạp hơn.
• Không thực tế cho các định nghĩa kiểu nhỏ (small style definitions).

Bạn cần nêu rõ ưu và nhược điểm khi sử dụng External Style Sheets khi nhà tuyển dụng hỏi câu hỏi phỏng vấn front-end này để thu hút cũng như ghi điểm trong mắt họ.

Box model trong CSS là gì? Thuộc tính CSS nào là một phần của nó?

Mô hình hình hộp (Box model) được sử dụng để xác định chiều cao và chiều rộng của một hộp hình chữ nhật bao quanh các phần tử HTML. Hộp CSS bao gồm các thành phần sau:

• Nội dung (Content): Đây là nội dung thực tế của hộp, có thể chứa văn bản hoặc hình ảnh.
• Phần đệm (Padding): Đây là khu vực bao quanh nội dung, giữa nội dung và đường viền. Phần đệm được sử dụng để tạo khoảng cách giữa nội dung và đường viền.
• Đường viền (Border): Đây là khu vực bao quanh phần đệm. Đường viền là thành phần trang trí để tạo ra hiệu ứng khung cho hộp.
• Lề (Margin): Đây là khu vực bao quanh đường viền. Lề được sử dụng để tạo khoảng cách giữa hộp hiện tại và các phần tử ngoài.

Nếu bạn đang tìm kiếm công việc freelancer hoặc work from home, hãy chú ý đến các kỹ năng đàm phán và quản lý thời gian, vì đây là yếu tố quan trọng để thành công trong những môi trường làm việc linh hoạt này.

Các câu hỏi phỏng vấn JavaScript

Hãy giải thích về event delegation

Đây là một trong những câu hỏi phỏng vấn front-end được nhà tuyển dụng thường xuyên hỏi. Event delegation là một kỹ thuật cho phép thêm event listener vào một phần tử mẹ thay vì thêm vào các phần tử con. Khi sự kiện xảy ra trên một phần tử con, nó sẽ lan truyền lên đến phần tử mẹ và kích hoạt listener được gắn vào phần tử đó. Việc sử dụng event delegation mang lại các lợi ích sau:

• Giảm bộ nhớ sử dụng vì chỉ cần một trình xử lý duy nhất trên phần tử mẹ thay vì phải đính kèm trình xử lý sự kiện trên mỗi phần tử con.
• Không cần phải hủy bỏ liên kết trình xử lý sự kiện trên các phần tử bị xóa và liên kết sự kiện cho các phần tử mới được thêm vào.

Giải thích cách hoạt động của this trong JavaScript

Giá trị của this trong JavaScript là một khái niệm khó hiểu. Nó phụ thuộc vào cách hàm được gọi và các quy tắc sau được áp dụng:

• Nếu từ khóa new được sử dụng khi gọi hàm, thì bên trong hàm này là một đối tượng hoàn toàn mới.
• Nếu apply, call hoặc bind được sử dụng để gọi / tạo một hàm, thì bên trong hàm này là đối tượng được truyền vào dưới dạng đối số.
• Nếu một hàm được gọi là một phương thức, chẳng hạn như obj.method() – thì this là đối tượng mà hàm là thuộc tính của nó.
• Nếu một hàm được gọi dưới dạng một lệnh gọi hàm miễn phí, nghĩa là nó được gọi mà không có bất kỳ điều kiện nào ở trên, thì đây là đối tượng toàn cục. Trong trình duyệt, đối tượng toàn cục là đối tượng window. Nếu trong chế độ nghiêm ngặt (‘use strict’), this sẽ là undefined thay vì đối tượng toàn cục.
• Nếu áp dụng nhiều quy tắc trên, quy tắc nào cao hơn sẽ được ưu tiên và sẽ đặt giá trị cho this.
• Nếu hàm là một arrow function ES2015, nó sẽ bỏ qua tất cả các quy tắc trên và nhận this của phạm vi xung quanh tại thời điểm nó được tạo.

Cơ hội việc làm tại các khu vực khác như Bình Dương, việc làm Bình Thuận, tuyển dụng Đà Lạt, việc làm Tam Kỳ, …

Sự khác biệt giữa các host objects và native objects là gì?

Trong JavaScript, có hai loại đối tượng chính bao gồm:

• Native objects (Đối tượng nguyên thuỷ): Đây là các đối tượng được định nghĩa bởi đặc tả ECMAScript của ngôn ngữ JavaScript. Một số ví dụ về native objects bao gồm String, Math, RegExp, Object, Function, v.v. Những đối tượng này được tích hợp sẵn trong ngôn ngữ và có thể được sử dụng trong bất kỳ chương trình JavaScript nào.
• Host objects (Đối tượng máy chủ): Đây là các đối tượng được cung cấp bởi môi trường thời gian chạy, chẳng hạn như trình duyệt hoặc Node. Một số ví dụ về host objects bao gồm window, XMLHTTPRequest, v.v. Những đối tượng này không được định nghĩa bởi đặc tả ECMAScript mà được cung cấp bởi môi trường thời gian chạy và có thể khác nhau giữa các môi trường khác nhau.

Xem thêm: Bật mí cách đặt câu hỏi phỏng vấn giúp nhà tuyển dụng đánh giá chính xác ứng viên

Ưu điểm và nhược điểm của việc sử dụng Ajax là gì?

Ưu điểm:

• Tương tác tốt hơn: Nội dung mới từ máy chủ có thể được thay đổi động mà không cần tải lại toàn bộ trang, tạo ra một trải nghiệm người dùng tốt hơn.
• Giảm kết nối đến máy chủ: Tập lệnh và biểu định kiểu chỉ phải được yêu cầu một lần, giảm băng thông mạng sử dụng và tăng tốc độ tải trang.
• Trạng thái có thể được duy trì trên một trang: Các biến JavaScript và trạng thái DOM sẽ vẫn tồn tại vì trang vùng chứa chính không được tải lại.

Nhược điểm:

• Các trang web động khó đánh dấu hơn: Do nội dung được tải động, các công cụ tìm kiếm có thể khó đánh dấu trang web.
• Không hoạt động nếu JavaScript đã bị tắt trong trình duyệt: Nếu JavaScript đã bị tắt, Ajax sẽ không hoạt động.
• Một số trình duyệt web không thực thi JavaScript: Nếu trình duyệt không hỗ trợ JavaScript, nội dung đã được tải bằng Ajax sẽ không hiển thị.
• Các trang web sử dụng Ajax để tìm nạp dữ liệu có thể sẽ phải kết hợp dữ liệu từ xa đã tìm nạp với các mẫu phía máy khách để cập nhật DOM. Điều này có thể làm cho mã JavaScript phức tạp hơn và gây ra bất kỳ lỗi cú pháp nào có thể ảnh hưởng đến hiệu suất ứng dụng. Các thiết bị di động cấp thấp có thể gặp khó khăn với việc phân tích cú pháp và thực thi mã JavaScript này.

Q45: “use strict” là gì? Những thuận lợi và khó khăn khi sử dụng nó là gì?

“use strict” là một câu lệnh quan trọng trong JavaScript để bật chế độ nghiêm ngặt và giới hạn các tính năng của ngôn ngữ này. Tuy nhiên, chế độ này cũng có nhược điểm như thiếu một số tính năng, không truy cập vào function.caller và function.arguments, và khó khăn trong việc kết hợp các tập lệnh được viết ở các chế độ nghiêm ngặt khác nhau.

Với danh sách câu hỏi phỏng vấn front-end trên đây mà VietnamWorks đã chia sẻ đến bạn, hy vọng bạn sẽ chuẩn bị được cho mình câu trả lời chỉn chu nhất. Từ đó, bạn có thể ghi điểm trong mắt nhà tuyển dụng và vượt qua vòng phỏng vấn một cách thành công. 

Khám phá thêm việc làm hấp dẫn từ các nhà tuyển dụng sau: Zalo tuyển dụng, Alm, FPT tuyển dụng, VNPT tuyển dụng, C&B tuyển dụng …

— HR Insider —

VietnamWorks – Website tuyển dụng trực tuyến số 1 Việt Nam