Bí kíp giúp Front-end developer thành công trong phỏng vấn

Front-end developer là người làm nhiệm vụ xây dựng giao diện người dùng hoặc ứng dụng web – nơi mọi người có thể xem và tương tác trực tiếp. Vì vậy, ngoài những kỹ năng mềm cần thiết, kỹ năng chuyên môn với những kiến thức lập trình là yếu tố để quyết định bạn có được nhận vào vị trí đó hay không. Tham khảo những câu hỏi dưới đây để có thể chuẩn bị tốt hơn cho buổi phỏng vấn của mình nhé!

Các câu hỏi phỏng vấn front end về kỹ thuật

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

DOCTYPE là khai báo kiểu tài liệu HTML. Đây là dòng code đầu tiên phải có trong mọi tài liệu HTML hoặc XHTML. Nó được sử dụng để thông báo cho trình duyệt của khách truy cập trang web rằng tài liệu được hiển thị là tài liệu HTML. Mặc dù bản thân nó không phải là một phần tử HTML, nhưng mọi tài liệu HTML phải được khai báo bằng DOCTYPE để tuân thủ các tiêu chuẩn HTML.

Có 3 loại Doctypes :

• Strict Doctype 
• Transitional Doctype
• Frameset Doctype

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

Thuộc tính data-* được sử dụng để lưu trữ dữ liệu riêng trên trang hoặc ứng dụng, giúp chúng ta có thể nhúng dữ liệu riêng trên tất cả các thành phần của HTML.

Thuộc tính data-* attributes gồm 2 phần:

• Tên thuộc tính không nên chứa bất kỳ ký tự viết hoa nào và có ít nhất một ký tự đứng đằng sau tiền tố “data-“
• Giá trị của thuộc tính có thể là chuỗi bất kỳ

Làm thế nào để tạo public key trong html?

Sử dụng thẻ keygen để tạo khoá và gửi thông qua biểu mẫu trong HTML

<keygen name=”name” challenge=”challenge string” keytype=”type” keyparams=”pqg-params”>

HTML semantic là gì?

HTML semactic là sử dụng các thẻ cụ thể, thích hợp nhất cho nhiệm vụ như <form>, <article> và <table> thay vì chỉ sử dụng <div> và <span>.

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

Web Accessibility là cách để mọi người có thể truy cập vào website và internet, kể cả họ là người khuyết tật.

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

• Thẻ (tag) HTML là các phần tử (element) như <a>, <button> và <div>. 
• Thuộc tính (attribute) HTML là các mô tả đặc điểm của các phần tử như src, class và id.

Ví dụ: <p align = ”center”> Câu hỏi phỏng vấn front end </p>, trong đó ‘align’ là thuộc tính căn giữa văn bản và <p> là thẻ.

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

• Phần tử inline không được có chiều cao hoặc chiều rộng, các thẻ sẽ nối tiếp nhau và không xuống hàng. Ví dụ <span>, <a> và <img>
• Phần tử block chiếm toàn bộ chiều rộng có sẵn, mỗi phần tử sẽ nằm ở 1 dòng. Ví dụ: <div>, <p> và <h1>

Hãy so sánh Display none và visibility hidden

Display none và Visibility hidden đều dùng để ẩn phần tử nhưng khi ẩn phần tử bằng display none, sẽ không có không gian được phân bổ cho phần tử, còn ẩn phần tử bằng visibility hidden sẽ có một khoảng trống xuất hiện trên trang.

Nếu HTML5 là một nền tảng web mở. Các khối building block của HTML5 là gì?

Các building block của html5:

• Semantics – Cho phép bạn mô tả chính xác hơn nội dung.
• Connectivity – Cho phép giao tiếp với máy chủ theo những cách mới và sáng tạo.
• Offline and storage – Cho phép các trang web lưu trữ cục bộ dữ liệu ở phía client và hoạt động offline hiệu quả hơn.
• Multimedia – Làm cho video và âm thanh trở nên hay hơn trong Open Web.
• 2D/3D graphics and effects – Cho phép nhiều tùy chọn trình bày đa dạng hơn.
• Performance and integration – Cung cấp khả năng tối ưu hóa tốc độ cao hơn và sử dụng phần cứng máy tính tốt hơn.
• Device access – Cho phép sử dụng các thiết bị đầu vào và đầu ra khác nhau.
• Styling – Cho phép tác giả viết các chủ đề phức tạp hơn.

Mô tả sự khác biệt giữa cookie, sessionStorage và localStorage.

cookie, sessionStorage và localStorage là key-value ở phía client, chúng chỉ được lưu trữ dưới dạng chuỗi.

	cookie	localStorage	sessionStorage
Nơi khởi tạo	Client hoặc server. Nếu là Server có thể dùng Set-Cookie header	Client	Client
Thời gian hết hạn	Tự cài đặt	Vô thời hạn	Khi đóng tab
Liên tục trên các phiên trình duyệt	Tùy thuộc vào thời gian hết hạn được cấu hình	Có	Không
Gửi đến server với mọi HTTP request	Cookies được tự động gửi qua  Cookie header	Không	Không
Lưu trữ tối đa (per domain)	4kb	5MB	5MB
Truy cập	Bất kỳ cửa sổ nào	Bất kỳ cửa sổ nào	Trên cùng tab

Hãy giải thích việc sử dụng phần tử canvas trong HTML5

<canvas> là phần tử dùng để vẽ các thành phần đồ họa từ bằng ngôn ngữ JavaScript. Phần tử này hoạt động như một container, chỉ có chức năng chứa các đối tượng đồ họa. Bắt buộc bạn phải dùng JavaScript để vẽ.

<canvas id=”canvas1″ width=”400″ height=”200″></canvas>

Mô tả sự khác biệt giữa <script>, <script async> và <script defer>.

• <script>: Thẻ script này sẽ thực hiện bình thường theo thứ tự sau:
  • JS chặn phân tích cú pháp HTML
  • Tìm nạp tập lệnh từ mạng
  • Thực thi tập lệnh
  • Phân tích cú pháp HTML chỉ được bắt đầu sau khi tập lệnh được thực thi đầy đủ
• <script async>: Được sử dụng để thông báo cho trình duyệt biết rằng tệp script có thể được thực thi không đồng bộ. Khi quá trình parse html gặp phải script này sẽ thực hiện như sau:
  • Tiếp tục parse html cho đến khi script này được download xong
  • Sau đó, quá trình parse html mới tạm dừng để execute những code script
  • Tiếp tục quay lại quá trình parse html.
• <script defer>: Được sử dụng để ra lệnh cho trình duyệt chỉ thực thi tệp script khi tài liệu HTML đã được phân tích cú pháp đầy đủ.

Progressive rendering là gì?

Progressive rendering là kỹ thuật render hình ảnh dần dần. Ban đầu, hình sẽ nhiễu với độ phân giải thấp, sau khi quá trình render diễn ra, mỗi pixel trong hình sẽ được thêm nhiều sampler để tinh chỉnh chất lượng cuối cùng.

DOM là gì?

DOM (Document Object Model – tạm dịch Mô hình Các Đối tượng Tài liệu) là một chuẩn được định nghĩa bởi W3C. DOM được dùng để truy xuất và thao tác trên các tài liệu có cấu trúc dạng HTML hay XML bằng các ngôn ngữ lập trình thông dụng như Javascript, PHP…

Geolocation API trong HTML5 là gì?

Geolocation (định vị địa lý) API được sử dụng để chia sẻ vị trí của người dùng đang sử dụng trình duyệt. Điều này cho phép một website hoặc một ứng dụng có thể cung cấp một nội dung và ngôn ngữ tùy chỉnh dựa trên vị trí của người dùng.

Hình ảnh raster và hình ảnh vector là gì?

• Hình ảnh Raster: Là hình ảnh được tạo bởi những điểm ảnh. Nó được thể hiện bằng những chấm vuông trên ảnh. Mỗi chấm vuông mang một sắc độ màu sắc khác nhau. Một số định dạng tập tin raster bao gồm PNG (.png), JPEG (.jpg), v.v.
• Hình ảnh Vector: Là hình ảnh được tạo bởi phương pháp toán học, bằng cách nối từ điểm này tới điểm kia, tạo thành những shape (hình dáng) hoặc line (đường thẳng). Hình này sẽ có tập tin là .svg

Cách sử dụng thuộc tính novalidate cho thẻ biểu mẫu (form tag) trong HTML5 là gì?

Thuộc tính novalidate của phần tử <form> được dùng để xác định rằng dữ liệu trong form không cần phải được xác nhận tính hợp lệ trước khi gửi.

Hãy mô tả cấu trúc bố cục của HTML.

Cấu trúc cơ bản của một trang web như sau:

• <header>: xác định phần đầu của trang web, nó dùng để làm “thùng chứa” cho các phần tử là tiêu đề, liên kết, hình ảnh logo, ….
• <footer>: dùng để định nghĩa phần chân trang của tài liệu hoặc một khu vực
• <nav>: Menu điều hướng của trang HTML.
• <article>: là phần tử để bao bọc nội dung độc lập, nó có thể là một bài post của diễn đàn, một bài viết của trang, một bài báo, một bình luận … hoặc bất kỳ một nội dung độc lập nào.
• <section>: dùng để phân chia một cách logic một trang, một article, mỗi <section> là một khối xác định, thường nó có chứa các tiêu đề (h1 – h6) để phân chia <section>
• <aside>: nội dung thứ cấp của phần nội dung chính của trang,  thường dùng để biểu diễn sidebar

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

CSS là gì?

CSS (Cascading Style Sheets) là một ngôn ngữ tạo phong cách cho trang web. CSS sẽ giúp chúng ta có thể thêm style vào các phần tử HTML đó như đổi bố cục, màu sắc trang, đổi màu chữ, font chữ, thay đổi cấu trúc…

CSS framework là gì?

CSS framework là một tập hợp các thư viện được sử dụng để thiết kế web. Chúng cung cấp một cấu trúc cơ bản để giải quyết những vấn đề có tính lặp lại trong quá trình xây dựng giao diện cho website.

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

Có ba cách để có thể tích hợp một kiểu CSS nhất định:

• Tích hợp kiểu bằng cách sử dụng các style-tags trong phần head của trang HTML.
• Tích hợp style của mình bằng cách sử dụng inline-styling
• Viết CSS trong một tập tin riêng biệt và thêm nó vào trang HTML bằng cách sử dụng thẻ liên kết.

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

BEM (Block – Element – Modifier) là quy ước đặt tên CSS để viết các lớp CSS rõ ràng hơn và dễ đọc hơn. Bên cạnh đó, nhờ BEM người ta có thể viết các khối CSS độc lập để sử dụng lại trong dự án khác nhau.

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

• Ưu điểm
  • Nhiều phần tử HTML có nhiều tài liệu chứa các lớp
  • Một tệp có thể kiểm soát nhiều tài liệu có các kiểu khác nhau
  • Các phương thức như bộ chọn và nhóm có thể được sử dụng để nhóm các kiểu trong các trường hợp hỗn hợp
• Nhược điểm
  • Cần phải tải thêm vào các documents
  • Không thực tế cho các small style definitions
  • Để hiển thị các documents, trang định dạng bên ngoài phải được tải

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

Mỗi phần tử trong 1 trang web đều là một khối chữ nhật riêng biệt. Box model được hiểu là sự chiếm không gian của phần tử trong trang web, nó là tổng của:

• Content: Nội dung của phần tử
• Border: Đường viền
• Padding: Khoảng đệm (khoảng cách từ border đến content)
• Margin: Lề (khoảng cách từ border của phần tử này đến border của phần tử khác)

Thiết kế responsive là gì?

Responsive là chế độ cho phép các trang web ‘thích ứng’” với mọi kích thước màn hình mà không làm ảnh hưởng đến khả năng sử dụng và trải nghiệm người dùng. Khi đó, văn bản, phần tử giao diện người dùng và hình ảnh sẽ thay đổi tỷ lệ và thay đổi kích thước tùy thuộc vào chế độ xem. 

Thiết kế responsive cho phép lập trình viên viết một bộ code HTML, CSS và JavaScript cho nhiều thiết bị, nền tảng và trình duyệt. Thiết kế responsive phù hợp với thiết bị và phù hợp với nguyên tắc Don’t Repeat Yourself – DRY.

CSS selector là gì?

CSS selector là một thành phần của bộ quy tắc CSS, được sử dụng để xác định các phần tử bạn muốn tạo style bằng CSS. Có nhiều loại CSS selector khác nhau, mỗi loại có cú pháp riêng, dưới đây là một số CSS selector phổ biến:

• CSS Element Selector
• CSS Id Selector
• CSS Class Selector
• CSS Universal Selector
• CSS Group Selector

Mục đích của z-index là gì và nó được sử dụng như thế nào?

Z-index là thuộc tính thiết lập thứ tự xếp chồng lên nhau của một phần tử vị trí. Giá trị mặc định của z-index là 0 và có thể là số dương hoặc số âm. Các phần tử có chỉ số z-index cao hơn sẽ được xếp chồng lên trên và ngược lại. Z-Index chỉ làm việc cùng với thuộc tính position.

Sự khác biệt giữa “resetting” và “normalizing” CSS là gì? Khi nào nên chọn resetting?

• Resetting: dành cho những ai muốn tự mình viết lại CSS cho toàn bộ các thành phần trong website, kể cả việc thiết lập kích thước chữ cho các thẻ tiêu đề.
• Normalizing: dùng để thiết lập các style của tất cả đối tượng HTML (element) theo một chuẩn nhất định

Grid system là gì?

Grid System là một hệ thống lưới và bao gồm nhiều dòng và nhiều cột, số lượng dòng bao nhiêu tùy thuộc vào thiết kế của bạn nhưng số lượng cột trên mỗi dòng luôn luôn là 12. Kích thước trong Grid System tính bằng cột, mỗi cột này sẽ chiếm một % nhất định kích thước của layout.

Pseudo-elements là gì? Hãy cho biết syntax của nó?

Pseudo-Elements – phần tử giả, được sử dụng để tạo một số style đặc biệt của element được chọn. Nó có thể được sử dụng để:

• Định dạng style cho chữ cái đầu tiên hoặc dòng đầu tiên của một phần tử. 
• Chèn nội dung trước hoặc sau nội dung của một phần tử.

Cú pháp của một Pseudo-Elements:

selector::pseudo-element {

   property:value;

}

Ưu điểm của việc sử dụng Translate() thay vì absolute position là gì?

Translate() không khiến trình duyệt kích hoạt repaint và bố cục mà chỉ hoạt động trên trình tổng hợp. Absolute position kích hoạt repaint hoặc chỉnh sửa DOM. Vì vậy, Translate() mang lại hiệu suất tốt hơn

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

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

Event Delegation là một kỹ thuật được sử dụng để lắng nghe các sự kiện con. Nghĩa là bạn uỷ quyền cho phần tử mẹ có thể lắng nghe các sự kiện bên trong nó bằng cách thêm event listeners vào một phần tử mẹ thay vì thêm chúng vào các phần tử con.

Lợi ích của kỹ thuật event delegation

• Memory footprint giảm xuố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 các trình xử lý sự kiện trên mỗi phần tử con.
• Không cần phải hủy liên kết trình xử lý khỏi các phần tử bị xóa và liên kết sự kiện cho các phần tử mới.

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

• 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, v.v.

Ư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ừ server có thể được thay đổi mà không cần tải lại toàn bộ trang.
  • Giúp việc thiết kế web đa dạng hơn và tăng tính tương tác của website với người dùng
  • Vì sử dụng các công nghệ đã có sẵn nên dễ học và sử dụng
  • Được hỗ trợ trong các trình duyệt phổ biến hiện nay
  • Hỗ trợ xử lý không đồng bộ 
  • Điều hướng dễ dàng hơn
• Nhược điểm:
  • Không hoạt động nếu JavaScript đã bị tắt trong trình duyệt.
  • Không an toàn
  • Tăng tải trên Máy chủ Web

Khi nào bạn sử dụng document.write ()?

Hàm document. write() trong JavaScript được sử dụng để chèn một chuỗi văn bản hoặc mã HTML vào trang web. Khi document.write () được thực thi sau khi trang được tải, nó sẽ gọi document.open để xóa toàn bộ tài liệu (đã xóa <head> và <body>!) Và thay thế nội dung bằng giá trị tham số đã cho.

Sự khác biệt giữa let, const và var là gì?

• Biến var có thể được cập nhật và khai báo lại trong phạm vi tồn tại
• Biến let có thể được cập nhật nhưng không thể khai báo lại
• Biến const không thể cập nhật nhưng không thể khai báo lại. 

Làm cách nào kiểm tra một biến có phải là một số trong JavaScript hay không?

Hàm isNaN () được dùng để xác định xem một giá trị có phải là một số hay không. Vì vậy, để kiểm tra một biến có phải là một số trong JavaScript hay không, bạn có thể sử dụng hàm isNaN ().

CoffeeScript là gì?

CoffeeScript được хâу dựng dựa trên JaᴠaScript ᴠà nó biên dịch thành JaᴠaScript để bạn có thể chạу trên một trình duуệt ᴡeb hoặc ѕử dụng ᴠới các công nghệ như: Node.jѕ cho các ứng dụng máу chủ.

CoffeeScript giúp viết mã JavaScript tốt hơn bằng cách cung cấp một cú pháp nhất quán hơn, lập trình dễ hơn, ít sai sót hơn và tốc độ nhanh hơn

Quy tắc cơ bản cho Coffeescript:

• Vấn đề về khoảng trắng: Không có dấu ngoặc nhọn trong CoffeeScript
• Không có dấu ngoặc đơn: Các hàm nhận đối số không yêu cầu dấu ngoặc đơn

Clousure là gì?

Closure là một hàm được viết lồng vào trong hàm khác. Nó được sử dụng để biến đổi toàn cục, biến cục bộ của chính nó. 

JavaScript Closures là một dạng tập hợp bao gồm môi trường nơi hàm số đã được khai báo và một hàm. Tại đây, môi trường sẽ bao gồm những biến cục bộ trong phạm vi hàm số đã được khai báo. 

JavaScript templating là gì? Bạn biết những thư viện nào?

JavaScript templating là phương pháp liên kết dữ liệu phía client được triển khai bằng ngôn ngữ JavaScript. 

Các thư viện JavaScript templating phổ biến là AngularJS, Backbone.js, Ember.js, Handlebars.js, và Mustache.js.

Các câu hỏi về hành vi

1. Hãy mô tả ngắn gọn về trang web hoặc ứng dụng web cuối cùng mà bạn đã làm việc, bạn đã thực hiện những bước nào để đảm bảo nó thân thiện với người dùng và có thể truy cập?
2. Hãy kể về khoảng thời gian bạn gặp phải những phản ứng từ stakeholder trong một dự án mà bạn đang thực hiện. Bạn đã xử lí tình huống đó như thế nào?
3. Mô tả trải nghiệm của bạn về một dự án web khó khăn có sự tham gia của nhiều bên liên quan. Bạn đã hoàn thành dự án như thế nào?

Một sự chuẩn bị tốt sẽ giúp bạn tự tin hơn trong buổi phỏng vấn rất nhiều. Vì vậy, bộ câu hỏi trên đây sẽ là “tủ” lớn để bạn có thể ôn lại kiến thức của mình và có thể gây ấn tượng tốt với nhà tuyển dụng hơn. Chúc bạn thành công nhé!