1. What is DOM?
DOM (Document Object Model) is a programming interface to HTML documents. This interface allows you to influence the document from scripts, changing its appearance, styles, content. In the DOM, a document is represented as a tree of nodes.
2. What's the difference between <span> and <div> elements?
<span>Is an inline element.<div>Is a block element.
Elements
<div>should be used to style sections of a document. And the elements act <span>as containers for small amounts of text, for images and other similar page elements.
It should be noted that you cannot put block elements on inline elements. Here is an example that shows, among other things, the incorrect placement of a block element inside an inline element (this is a fragment
<div>I'm illegal</div>placed inside an element <span>):
<div>Hi<span>I'm the start of the span element <div>I'm illegal</div> I'm the end of the span</span> Bye I'm the end of the div</div>
3. What are meta tags?
Meta tags are tags found in a page tag
<head>that describe the content of a page. Meta tags are not displayed on the page. They are found only in its code.
Their main task is to briefly describe the content of the pages to search engines. Here's an example:
<head>
<meta charset="UTF-8">
<meta name="description" content="Description search engines use">
<meta name="keywords" content="Keywords, of, your, page">
<meta name="author" content="Me">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
4. What's the difference between identifier and class selectors in CSS?
Identifiers (
id) are unique. An item can only have one identifier. Only one element with a specific ID can be present on a page.
Class names (
class) are not unique. The same class can be assigned to multiple elements. An element can be assigned multiple classes.
If a certain style needs to be applied to several elements of the page, this task needs to be solved using classes.
5. How to use media queries in CSS?
Media queries use a rule
@mediathat lets you apply CSS styles to different types of content. Media queries can also be used to customize page elements based on the characteristics of the environment in which the pages are viewed.
/* <div> "red" , 600px */
@media only screen and (max-width: 600px) {
div {
background-color: red;
}
}
6. What are pseudo-classes in CSS?
In CSS, pseudo-classes are used to describe the styles of elements that are in special states. Pseudo-classes can be used in conjunction with CSS selectors to customize the appearance of elements based on their states.
Here's an example:
/*
<a>, , green.
*/
a:hover {
color: green;
}
/* <a> purple.*/
a:visited {
color: purple;
}
If you are asked if you can name any pseudo-classes, here is a page with a large list of them.
7. What is the difference between the following types of positioning of elements: relative, fixed, absolute, static?
- Relative positioning is when an element is displaced from its default position.
- Fixed positioning is when you adjust the position of an element based on the edges of the browser window.
- Absolute positioning is the placement of an element relative to the closest positioned parent element, and exactly where specified by the developer.
- Static positioning is the default positioning mode that displays items in the order in which they are described in the document.
8. What is the difference between PUT and POST requests?
PUT requests result in the replacement of the target resource with the data transmitted in the request. It can be used to update the content of an existing resource or to create a new resource.
POST requests result in resource-specific processing of the data passed in the request. They can be used to perform various actions. Including - for creating new resources, for uploading files to the server, for submitting forms.
Another difference between PUT and POST requests is that PUT requests are idempotent, but POST requests are not. That is, if a request in which the same data is transmitted and which is executed at the same URL will be executed several times, this is equivalent to executing this request once. Executing a POST request multiple times is not equivalent to executing it once. That is, several such requests, for example, can lead to the creation of several objects on the server.
9. What are the differences between Long Polling technology, WebSocket protocol and server generated events?
- Long Polling . , , , . .
- WebSocket .
- , , HTTP-, .
10. -, ?
Local storage, as the name implies, is a place that browsers can use to store data locally. It can store up to 10 MB of data. Session storage is a kind of local storage that is associated with a session and is deleted after its completion. Session storage can store up to 5 MB of data.
Cookies are used to store small amounts of data, not exceeding 4 KB. They can be used by the browser, the server can request them from the browser.
11. What is CORS?
CORS (Cross-Origin Resource Sharing) is a browser-based mechanism that allows pages to access resources located outside of a certain domain. This extends the capabilities of the pages and adds flexibility to the same-origin policy.
12. What is a promise?
Promises are objects that JavaScript uses when performing asynchronous operations. They make it easier to work with asynchronous operations and provide more convenient error handling mechanisms than callbacks and events.
13. What states can a promise be in?
A promise can be in one of three states:
- Fulfilled - The operation associated with the promise completed successfully.
- Rejected - The operation associated with the promise completed with an error.
- Pending - a promise is in a pending state, that is, it cannot be said to have completed successfully or with an error.
14. What is variable and function hoisting in JavaScript?
Hoisting variables and functions is the movement of their declarations to the top of their scope (global or function scope).
15. What values are false in JavaScript?
In JavaScript, false values are values that, when converted to a boolean type, become values
false. These are the following values:
- ''
- 0
- null
- undefined
- NaN
- false
- -0
- 0n // values of type BigInt, when converted to boolean type, behave the same as values of type Number
Outcome
The questions that I have shared with you were asked during interviews. I've asked them in interviews with other developers. Questions like this, complemented by practical assignments, are a good way to test the knowledge of a candidate for the front-end programmer position.
I think there are a lot more JavaScript questions to prepare for a front-end interview than are covered in this article. Parsing questions about TypeScript can also be very helpful.
If you state in your resume that you are familiar with a front-end framework, this means that you should prepare for the fact that you will be asked questions about the knowledge of this framework.
What questions have you been asked in front-end interviews?
