Сохраните блог на будущее и ВЗЛОМАЙТЕ любое интервью в МИРЕ.
- Можете ли вы описать разницу между отзывчивым и адаптивным дизайном?
Отзывчивый дизайн относится к способности веб-сайта настраивать макет и содержимое в зависимости от размера экрана устройства, используемого для его просмотра. Это достигается с помощью медиа-запросов CSS. Напротив, адаптивный дизайн относится к подходу к дизайну, который использует определенные макеты для определенных типов устройств, обычно в зависимости от размера экрана.
2. Как бы вы оптимизировали активы/ресурсы веб-сайта?
Существует несколько способов оптимизации веб-сайта для повышения производительности, в том числе:
- Минимизация и сжатие ресурсов (CSS, JavaScript и изображения)
- Использование сети доставки контента (CDN) для распределения ресурсов
- Ленивая загрузка изображений и видео
- Реализация кэширования браузера
- Уменьшение количества HTTP-запросов
- Использование современных форматов изображений, таких как WebP
- Использование фреймворка или библиотеки для оптимизации производительности интерфейса, например React или Angular.
Пример кода:
<!-- Minify CSS --> <link rel="stylesheet" href="style.min.css" /> <!-- Minify JavaScript --> <script src="script.min.js"></script> <!-- Compress images --> <img src="image.jpg" alt="Compressed image" /> <!-- Use a CDN --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
3. Как бы вы подошли к устранению проблемы кроссбраузерной совместимости?
Для отладки проблем совместимости между браузерами вы можете использовать такие инструменты, как инструменты разработчика браузера для проверки HTML, CSS и JavaScript в разных браузерах, а также онлайн-инструменты, такие как BrowserStack, для тестирования веб-сайтов в разных браузерах и на разных устройствах.
4. Как бы вы проверили, находится ли элемент в области просмотра с помощью JavaScript?
Чтобы проверить, находится ли элемент в области просмотра с помощью JavaScript, вы можете использовать метод getBoundingClientRect(), который возвращает размер и положение элемента относительно области просмотра.
function isInViewport(element) {
const rect = element.getBoundingClientRect();
const windowHeight = (window.innerHeight || document.documentElement.clientHeight);
const windowWidth = (window.innerWidth || document.documentElement.clientWidth);
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= windowHeight &&
rect.right <= windowWidth
);
}
В этом коде метод getBoundingClientRect используется для получения размера элемента HTML и его положения относительно области просмотра. Затем размеры окна просмотра извлекаются с помощью window.innerHeight или document.documentElement.clientHeight для высоты и window.innerWidth или document.documentElement.clientWidth для ширины. Наконец, функция возвращает true, если верхняя, левая, нижняя и правая части элемента находятся в области просмотра, и false в противном случае.
5. Как вы справляетесь с конфликтами между классами CSS?
Чтобы разрешить конфликты между классами CSS, вы можете использовать спецификацию CSS, чтобы указать, какие стили должны иметь приоритет.
Пример кода:
<style>
/* Specific selector takes precedence */
#header .navigation a {
color: red;
}
/* Less specific selector */
.navigation a {
color: blue;
}
</style>
<!-- HTML -->
<header id="header">
<nav class="navigation">
<a href="#">Link</a>
</nav>
</header>
6. Можете ли вы объяснить блочную модель в CSS?
Блочная модель CSS относится к способу расчета размеров HTML-элемента. Размеры элемента включают его содержимое, отступы, границы и поля.
7. Можете ли вы описать разницу между HTML и XHTML?
HTML (язык гипертекстовой разметки) — это стандартный язык разметки для создания веб-страниц, а XHTML (расширяемый язык гипертекстовой разметки) — более строгая версия HTML, основанная на XML.
8. Как бы вы реализовали адаптивное меню навигации?
Чтобы реализовать адаптивное навигационное меню, вы можете использовать мультимедийные запросы CSS и JavaScript для отображения/скрытия меню в зависимости от размера экрана.
Пример кода:
<style>
/* Show/hide the navigation menu based on screen size */
@media (max-width: 767px) {
.navigation {
display: none;
}
}
</style>
<script>
// Show/hide the navigation menu based on screen size
window.addEventListener("resize", function() {
if (window.innerWidth <= 767) {
document.querySelector(".navigation").style.display = "none";
} else {
document.querySelector(".navigation").style.display = "block";
}
});
</script>
<!-- HTML -->
<nav class="navigation">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</nav>
9. Можете ли вы объяснить разницу между сценариями на стороне сервера и на стороне клиента?
Сценарии на стороне сервера — это сценарии, которые выполняются на сервере до того, как страница будет отправлена в браузер, а сценарии на стороне клиента — это сценарии, которые выполняются в браузере после того, как страница была отправлена в браузер.
10. Как бы вы реализовали собственную всплывающую подсказку?
Чтобы реализовать пользовательскую всплывающую подсказку, вы можете использовать JavaScript и CSS для отображения/скрытия всплывающей подсказки в зависимости от положения мыши.
Пример кода:
<style>
/* Style the tooltip */
.tooltip {
display: none;
position: absolute;
background-color: #333;
color: #fff;
padding: 10px;
}
</style>
<script>
// Show/hide the tooltip based on mouse position
window.addEventListener("mousemove", function(event) {
var tooltip = document.querySelector(".tooltip");
tooltip.style.left = event.clientX + "px";
tooltip.style.top = event.clientY + "px";
tooltip.style.display = "block";
});
</script>
<!-- HTML -->
<div class="tooltip">Tooltip</div>
11. Можете ли вы объяснить разницу между прогрессивным улучшением и постепенной деградацией?
Прогрессивное улучшение — это подход к дизайну, который начинается с базовой функциональной веб-страницы и добавляет к ней улучшения, в то время как постепенное ухудшение — это подход к проектированию, который начинается со сложной веб-страницы и удаляет функции, необходимые для поддержки старых браузеров.
12. Можете ли вы объяснить разницу между box-sizing: border-box и box-sizing: content-box?
box-sizing: border-box включает отступы и границы в пределах указанной ширины и высоты элемента, а box-sizing: content-box включает только содержимое в пределах указанной ширины и высоты.
13. Как бы вы реализовали модальное окно?
Чтобы реализовать модальное окно, вы можете использовать HTML, CSS и JavaScript для создания наложения, которое покрывает страницу и отображает окно по центру.
Пример кода:
<style>
/* Style the modal window */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
border-radius: 10px;
}
</style>
<script>
// Show/hide the modal window
function showModal() {
document.querySelector(".modal").style.display = "block";
}
function hideModal() {
document.querySelector(".modal").style.display = "none";
}
</script>
<!-- HTML -->
<div class="modal">
<div class="modal-content">
<h1>Modal Window</h1>
<p>This is a modal window.</p>
<button onclick="hideModal()">Close</button>
</div>
</div>
<button onclick="showModal()">Open Modal</button>
14. Можете ли вы объяснить разницу между display: inline и display: inline-block?
Элементы display: inline — это встроенные элементы, которые занимают ровно столько ширины, сколько необходимо, а элементы display: inline-block — это встроенные элементы, которые занимают указанную ширину и высоту.
15. Как бы вы реализовали липкий заголовок?
Чтобы реализовать липкий заголовок, вы можете использовать CSS position: fixed, чтобы заголовок оставался вверху страницы при прокрутке.
Пример кода:
<style>
/* Style the sticky header */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #333;
color: #fff;
padding: 10px;
}
</style>
<!-- HTML -->
<header class="header">
<h1>Sticky Header</h1>
</header>
16. Можете ли вы объяснить разницу между margin: auto и text-align: center?
margin: auto используется для горизонтального центрирования элемента внутри его родительского контейнера, а text-align: center используется для центрирования текста внутри элемента.
17. Как бы вы реализовали адаптивный макет сетки?
Чтобы реализовать отзывчивый макет сетки, вы можете использовать CSS Grid или Flexbox для создания сетки элементов, которая подстраивается под размер экрана используемого устройства.
Пример кода с использованием CSS Grid:
<style>
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 20px;
}
</style>
<!-- HTML -->
<div class="grid">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
18. Можете ли вы объяснить разницу между единицами измерения rem и em?
rem единиц основаны на размере шрифта корневого элемента (обычно элемента <html>), а em единиц основаны на размере шрифта родительского элемента.
19. Как бы вы реализовали адаптивное меню навигации?
Чтобы реализовать адаптивное меню навигации, вы можете использовать HTML, CSS и JavaScript для создания меню навигации, которое изменяется в зависимости от размера экрана используемого устройства.
Пример кода:
<style>
/* Style the navigation menu */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
}
.navbar a {
color: #333;
text-decoration: none;
margin-right: 20px;
}
/* Hide the navigation menu on smaller screens */
@media (max-width: 700px) {
.navbar {
display: none;
}
}
</style>
<script>
// Show/hide the navigation menu on smaller screens
function toggleNavbar() {
document.querySelector(".navbar").classList.toggle("show");
}
</script>
<!-- HTML -->
<header class="navbar">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<button onclick="toggleNavbar()">☰</button>
</header>
20. Можете ли вы объяснить всплывающие и захватывающие события в JavaScript?
Всплывание и захват событий — это два способа распространения событий в JavaScript. Когда происходит событие, оно сначала запускает фазу захвата, на которой событие перемещается от самого внешнего элемента к самому внутреннему, а затем запускает фазу всплытия, на которой событие перемещается от самого внутреннего элемента к самому внешнему.
21. Как бы вы реализовали эффект плавной прокрутки в JavaScript?
Чтобы реализовать эффект плавной прокрутки в JavaScript, вы можете использовать метод window.scrollTo(), который позволяет плавно прокручивать до определенной позиции на странице.
Пример кода:
<script>
function smoothScrollTo(element) {
const targetPosition = element.getBoundingClientRect().top + window.pageYOffset;
const startPosition = window.pageYOffset;
const distance = targetPosition - startPosition;
const duration = 1000;
let start = null;
window.requestAnimationFrame(step);
function step(timestamp) {
if (!start) start = timestamp;
const progress = timestamp - start;
window.scrollTo(0, easeInOutCubic(progress, startPosition, distance, duration));
if (progress < duration) window.requestAnimationFrame(step);
}
}
function easeInOutCubic(t, b, c, d) {
t /= d / 2;
if (t < 1) return c / 2 * t * t * t + b;
t -= 2;
return c / 2 * (t * t * t + 2) + b;
}
</script>
<!-- HTML -->
<a href="#section1" onclick="smoothScrollTo(document.getElementById('section1'))">Go to Section 1</a>
<div id="section1">Section 1</div>
22. Можете ли вы объяснить разницу между null и undefined в JavaScript?
В JavaScript null — это значение, которое представляет преднамеренное отсутствие какого-либо значения объекта, а `undefined — это значение, которое представляет отсутствие значения или значение объявленной переменной, которой не было присвоено значение.
23. Можете ли вы объяснить разницу между display: none и visible: hidden в CSS?
В CSS display: none означает, что элемент не отображается и не занимает места в макете, а visibility: hidden означает, что элемент не отображается, но по-прежнему занимает место в макете.
24. Как бы вы создали адаптивную панель навигации с помощью CSS?
Чтобы создать адаптивную панель навигации в CSS, вы можете использовать медиа-запросы и свойство display для скрытия или отображения различных элементов в зависимости от размера области просмотра.
Пример кода:
<style>
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
}
.navbar-brand {
font-size: 18px;
}
.navbar-menu {
display: flex;
}
.navbar-item {
margin-left: 20px;
font-size: 14px;
}
.navbar-toggler {
display: none;
}
@media (max-width: 767px) {
.navbar-menu {
display: none;
}
.navbar-toggler {
display: block;
cursor: pointer;
}
}
</style>
<!-- HTML -->
<nav class="navbar">
<div class="navbar-brand">Brand</div>
<div class="navbar-menu">
<a class="navbar-item" href="#">Home</a>
<a class="navbar-item" href="#">About</a>
<a class="navbar-item" href="#">Contact</a>
</div>
<div class="navbar-toggler">
☰
</div>
</nav>
<script>
const navbarToggler = document.querySelector(".navbar-toggler");
const navbarMenu = document.querySelector(".navbar-menu");
navbarToggler.addEventListener("click", function() {
navbarMenu.classList.toggle("is-active");
});
</script>
25. Можете ли вы объяснить замыкание в JavaScript?
Замыкание в JavaScript — это функция, которая имеет доступ к переменным в своей внешней области видимости, даже после возврата внешней функции. Замыкания обеспечивают конфиденциальность данных и могут использоваться для создания частных переменных и методов.
Пример кода:
function outerFunction(x) {
return function innerFunction(y) {
return x + y;
};
}
const add5 = outerFunction(5);
const result = add5(3);
console.log(result); // 8
В примере outerFunction возвращает innerFunction, который имеет доступ к аргументу x функции outerFunction. Возвращенное innerFunction затем присваивается переменной add5 и может использоваться для добавления значения 5 к любому другому числу, переданному в качестве аргумента. В этом случае значение 3 передается в качестве аргумента, а результат 8 записывается в консоль.
🌎 Подключаемся!
ЛинкедИн
