Trọn bộ câu hỏi phỏng vấn thực tập Front End phổ biến nhất

Xem thêm: Html Là Gì? Html Có Phải Là Ngôn Ngữ Lập Trình Không?

HTML5 là gì?

Đây là phiên bản thứ 5 của HTML và đang được sử dụng phổ biến nhất hiện nay. Code bằng HTML5 là rõ ràng và nhất quán nhất. Phiên bản này còn hỗ trợ âm thanh, video, nhiều layout elements,…

Một số câu hỏi khác

• DOM trong HTML là gì?
• Khác nhau giữa thẻ Div và Span?
• SEO là gì? Cách SEO một trang web?
• Thẻ Image có 2 thuộc tính quan trọng là gì? Chức năng của thuộc tính đó?
• Thẻ label có thuộc tính for dùng để làm gì?

CSS

Phân biệt Inline, Block, Inline-Block

• Inline: Item sẽ nằm trên cùng một dòng. Nếu các items vượt quá độ dài của dòng thì sẽ xuống dòng mới. Chỉ có thể điều chỉnh margin và padding left and right, không thể set width and height.
• Block: Luôn được xuống dòng và chiếm toàn bộ width nếu không set width. Set được width, height, margin, padding đầy đủ 4 hướng (top, bottom, right, left).
• Inline-Block: Các items sẽ được xếp cùng trên một dòng. Có thể set width, height, margin, padding đủ 4 hướng.

Xem thêm: CSS Framework Là Gì? Top 5 CSS Framework Sử Dụng Phổ Biến

Phân biệt Flexbox và Grid

Flexbox sắp xếp các phần tử thành 1 dòng (hoặc 1 cột, nếu muốn), trong khi Grid tạo một lưới các cột và hàng.

Phân biệt các đơn vị px, rem, em

• Px: Pixel là đơn vị phổ biến hiện nay. Cho biết chiều dài tuyệt đối hay cố định.
• Rem: 1rem = 16px. Giá trị của Rem chỉ có thể đặt phụ thuộc trong thẻ HTML
• Em: 1em = 16px nhưng giá trị của em có thể được đặt trong phần tử của chính nó và phần tử mẹ gần nhất.

Model box là gì?

Box Model được sử dụng để mô tả khoảng cách mà mỗi phần tử trên website được sở hữu. Hay nói cách khác là kỹ thuật tinh chỉnh khoảng cách hiển thị cho mỗi phần tử trên website.

Kỹ thuật Box Model trong CSS bao gồm 4 phần quan trọng đó là:

• Margin: Khoảng cách tính từ bên ngoài của phần tử.
• Border: Đường viền của phần tử.
• Padding: Khoảng cách tính từ bên trong của phần tử.
• Content: Nội dung trong phần tử.

Một số câu hỏi khác

• Các cách viết CSS
• Một số CSS Selector cơ bản
• Phân biệt display: none; và visibility: hidden;
• Phân biệt position: fixed; và position: sticky;
• Phân biệt ID và Class
• Các cách căn giữa một phần tử

Có thể bạn quan tâm: Ngôn Ngữ Máy Tính Là Gì? Ứng Dụng Như Thế Nào?

JavaScript

Các thao tác với DOM là gì?

• getElementById(id): Tham chiếu đến 1 nút duy nhất có thuộc tính id giống với id cần tìm.
• getElementsByTagName(tagname): Tham chiếu đến tất cả các nút có thuộc tính tagname giống với tên thẻ cần tìm.
• getElementsByName(name): Tham chiếu đến tất cả các nút có thuộc tính name cần tìm.
• getAttribute(attributeName): Lấy giá trị của thuộc tính.
• setAttribute(attributeName, value): Sửa giá trị của thuộc tính.
• appendChild(node): Thêm 1 nút con vào nút hiện tại.
• removeChild(node): Xóa 1 nút con khỏi nút hiện tại.

Phân biệt Var, Let, Const

• Var: Có thể khai báo đa dạng các kiểu biến như number, string, boolean,… Đặc biệt, biến Var còn có thêm tính chất Hoisting. Nói cách khác, khi dùng Var dù bạn khai báo ở đâu thì khi code, variable vẫn sẽ xuất hiện ở đầu scope. 
• Let: Cho phép khai báo các biến có block scope (thay vì globally scoped hay locally scoped) và phụ thuộc và TDZ (vùng chết tạm thời).  Cho phép cập nhật giá trị của biến, không cho phép tái khai báo biến đó. Giống với Var, Let cũng có tính hoisting nhưng không có giá trị khởi tạo.
• Const: Trong biến const nếu kiểu của biến là primitive thì không thể tái khai báo hay cập nhật giá trị mới. Trường hợp kiểu biến là reference thì vẫn có thể cập nhật giá trị cho thuộc tính của biến đó.

Truthy, Falsy là gì?

Đây là những giá trị khi ép về kiểu boolean thì cho ra giá trị bằng true hoặc false.

Ví dụ cho những giá trị Falsy gồm: 0, “” , null, undefined, NaN, false. Những giá trị Truthy gồm: Các chuỗi khác rỗng, các số khác 0 và tất cả object khác.

Hoisting là gì? Vai trò?

Hoisting là hành động mặc định của Javascript. Nó sẽ di chuyển tất cả các biến và hàm khi khai báo lên đầu scope trước khi chúng được thực thi.

Một số câu hỏi khác

• Xử lý bất đồng bộ ( promise, callback, async await )
• Phân biệt cookies, session storage, và local storage?
• Phân biệt các hàm cơ bản trong JS (map, reduce, filter)

Xem thêm: Callback Function Là Gì? Tìm Hiểu Về Hàm Callback Trong Javascript

ReactJS

JSX là gì? Sử dụng trong trường hợp nào?

JSX = Javascript + XML. JSX giúp transform cú pháp dạng gần như XML về thành Javascript. Bằng cách này, lập trình viên có thể code ReactJS bằng cú pháp của XML mà không cần sử dụng Javascript. Các XML elements, attributes và children sẽ được chuyển đổi thành các đối số truyền vào React.createElement.

DOM ảo là gì? Vai trò?

DOM ảo là một dạng đại diện nằm trong bộ nhớ của một thành phần cấu thành giao diện cho chương trình (Component). DOM ảo thực hiện quá trình “diffing” trong khi component được thông dịch lại. Tức là nó ghi nhớ và cho ra danh sách những thay đổi sẽ được cập nhật của biên bản mới so với phiên bản DOM thật cũ.

Nhờ điều này mà React trở nên có hiệu suất cao. Nó giúp tăng hiệu năng bởi không phải re-render lại cả một giao diện lớn. Chỉ cần tập trung vào những thay đổi nhỏ và thực sự cần thiết với DOM thật.

SSR và CSR là gì? So sánh SSR và CSR

• SSR – Server Side Rendering: Là thực hiện việc render ở phía server. Nghĩa là khi khách hàng truy cập vào website, yêu cầu sẽ được tự động gửi lên server. Nhiệm vụ của server là trả về toàn bộ mã HTML và CSS. Giúp trình duyệt hiển thị trang web cho người dùng xem.
• CSR – Client Side Rendering: Là thực hiện việc render ở phía client. Với cùng một thao tác khách hàng truy cập vào website, các yêu cầu sẽ được gửi lên server. Lúc này server không trả về mã HTML hay  CSS mà là 1 thẻ div rỗng và một số file javascript. Những file javascript đó giúp trình duyệt chạy và hiển thị giao diện phía người dùng.
• SSR giúp tăng hiệu quả SEO tốt hơn so với CSR
• Một số thư viện CSR: ReactJS, VueJS
• Một số thư viện SSR: NextJS, NuxtJS 

Tìm hiểu thêm: SRE Là Gì? SRE Làm Gì? Khác Biệt Giữa SRE Và DevOps

Class components và Functional components khác nhau như thế nào?

• Functional component khai báo bằng cách sử dụng pure function. Nó là một function của Javascript hoặc ES6. Khi sử dụng sẽ trả về 1 React element và có thể sử dụng props làm tham số.
• Class components là class ES6 hoặc component nếu tiếp nối React component. Có thể khởi tạo với lifecycle trọn vẹn và phải có 1 method render(), nó sẽ trả về 1 React element (JSX) hoặc null.

Một số câu hỏi khác

• Lifecycle của ReactJS
• Hook trong ReactJS?
• Custom hook trong ReactJS?

Tìm hiểu thêm: Câu Hỏi Phỏng Vấn Front-End ReactJS Và Hướng Dẫn Trả Lời 

Hy vọng, qua những câu hỏi phỏng vấn thực tập Front End phổ biến mà bài viết cung cấp, bạn đã có thể tự tin tham gia phỏng vấn. Bạn có thể truy cập thêm vào chuyên mục chia sẻ kinh nghiệm và mẹo tìm việc của TopviecIT, nơi cung cấp nhiều thông tin hữu ích về công việc trong ngành IT. Và để dễ dàng tìm việc làm lập trình Front End, đừng quên truy cập TopCV ngay hôm nay, chuyên trang tuyển dụng với hàng ngàn cơ hội việc làm hấp dẫn nhất

Bài viết liên quan

Lập trình web học ngành gì? Cơ hội việc làm sau khi tốt nghiệp

14 Tháng Mười Một, 202210 Tháng Một, 2023TOPCV CTV

Html là gì? Html có phải là ngôn ngữ lập trình không?

10 Tháng Mười Một, 202129 Tháng Mười Hai, 2022Top việc IT

Muốn Học Lập Trình Game Bắt Đầu Từ Đâu? Nên Học Ngôn Ngữ Nào?

17 Tháng Một, 20229 Tháng Một, 2023Dang Huong