Làm thế nào để vượt qua những câu hỏi của nhà tuyển dụng trong vòng phỏng vấn thực tập Front End? Nhà tuyển dụng kỳ vọng điều gì và nên trả lời ra sao để ghi điểm? TopviecIT sẽ chia sẻ với bạn ngay sau đây!
Yêu cầu của nhà tuyển dụng đối với thực tập Front End
Thực tập Front End là công việc hỗ trợ các lập trình viên chính thức trong việc phát triển website HTML/CSS/Javascript, test sản phẩm trên trình duyệt và hệ thống. Đồng thời thực tập sinh Front End cũng cần biết đọc hiểu tài liệu requirement để tham gia xây dựng và tối ưu quy trình sản xuất.
Vậy nên khi đăng tin tuyển dụng thực tập Front End, nhà tuyển dụng mong muốn ứng viên có những kỹ năng sau:
- Thứ nhất, hiểu về lập trình, đặc biệt là JavaScript.
- Thứ hai, am hiểu các frameworks và những thư viện thông dụng như: React, Angular, Vue.js,…
- Thứ ba, nắm vững về CSS, HTML, HTML5 để triển khai pixel thiết kế thành CSS, thiết kế responsive và các chi tiết.
- Thứ tư, khả năng đọc hiểu tiếng Anh tốt để nghiên cứu các requirements.
- Thứ năm, có kiến thức về trình duyệt và cách gỡ lỗi code.
Nếu bạn muốn tìm hiểu kỹ hơn về lập trình front end là gì và công việc của họ gồm những gì, xem ngay bài viết dưới đây!
>>> Lập Trình Front End Là Gì? Nên Làm Lập Trình Viên Front End Không?
Câu hỏi thông tin chung trong phỏng vấn thực tập Front End
Hãy giới thiệu ngắn gọn về bản thân bạn
Có đến trên 90% nhà tuyển dụng bắt đầu buổi phỏng vấn thực tập Front End bằng câu hỏi này. Nhà tuyển dụng muốn biết bạn nói gì về bản thân mình. Từ đó có thể khai thác và trao đổi nhiều hơn với bạn.
Để có 2 – 3 phút giới thiệu bản thân ấn tượng, hãy lưu ý những thông tin sau:
- Lời cảm ơn vì nhà tuyển dụng đã trao cơ hội để tìm hiểu về công việc
- Họ tên, tuổi
- Trình độ chuyên môn: Tên ngành và trường Đại học của bạn
- Lý do lựa chọn theo đuổi công việc Front End developer
- Điểm mạnh, điểm yếu của bản thân
Xem thêm: Tuyển Tập Những Câu Hỏi Phỏng Vấn Front End Hay Gặp Nhất
Mục tiêu công việc của bạn là gì?
Nhà tuyển dụng đặt ra câu hỏi này nhằm xác định thực tập sinh có nghiêm túc muốn học hỏi và phát triển trong lĩnh vực Front End hay không.
Hãy chia mục tiêu thành: Ngắn hạn (1 – 2 năm) và dài hạn (3 – 5 năm). Sau đó trả lời câu hỏi: Bản thân bạn muốn đạt được điều gì trong khoảng thời gian ấy?
Sau đây là cách trả lời gợi ý cho câu hỏi trên:
Mục tiêu ngắn hạn
- Được trải nghiệm môi trường làm việc thực tế để học hỏi, tích lũy kinh nghiệm.
- Trở thành Front End developer chính thức của công ty.
Mục tiêu dài hạn
- Trở thành một Front End developer chuyên nghiệp sau 2 năm làm việc.
- Thành công ở các vị trí cao hơn như trưởng phòng, quản lý sau 3-5 năm làm việc.
- Được làm việc và cống hiến cho công ty trong thời gian dài.
Lý do bạn lựa chọn công ty
Không chỉ thực tập Front End, ứng viên ở bất cứ vị trí nào cũng cần tìm hiểu sơ bộ về công ty và lĩnh vực ứng tuyển trước khi tham gia phỏng vấn.
Để trả lời câu hỏi này, bạn hãy tìm hiểu kỹ các vấn đề sau:
- Lĩnh vực kinh doanh của công ty là gì?
- Selling point (lợi thế cạnh tranh) của công ty là gì?
- Những giá trị nào của công ty phù hợp với bạn?
- Giá trị nào của bạn sẽ đem lại lợi ích cho vị trí công việc và công ty
Xem thêm: Chia sẻ kinh nghiệm phỏng vấn IT cho sinh viên mới tốt nghiệp
Các câu hỏi chuyên môn về thực tập Front End
Để kiểm tra thực tập sinh Front End có đảm bảo những yêu cầu cơ bản về kiến thức hay không, nhà tuyển dụng thường đưa ra một vài câu hỏi khái niệm kèm ví dụ thực tế. Để dễ dàng kiểm tra trình độ của thực tập Front End, những câu hỏi chuyên môn sẽ thường được chia theo 4 lĩnh vực chủ yếu là: HTML, CSS, JavaScript và ReactJS.
HTML
Thẻ <!DOCTYPE html> là gì?
<!DOCTYPE html> được đặt ở đầu website để cho trình duyệt/công cụ tìm kiếm biết được website của bạn đang sử dụng phiên bản ngôn ngữ đánh dấu (hay markup language) nào.
Thẻ meta là gì?
Là những dòng mã đặt ở phần đầu trang html để cung cấp thông tin về website cho công cụ tìm kiếm. Một số thẻ meta có thể kể đến là: Title, description, keyword, content-type, view-port…
HTML Semantic là gì?
Thẻ Semantic trong HTML giúp mô tả rõ ràng ý nghĩa của thẻ đó. Khi đọc tên các thẻ này, lập trình viên có thể hiểu nội dung bên trong element là gì.
Ví dụ thẻ Semantic: <form>, <table>, <img>,…
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
