Frontend Interview - собеседования по Javascript / Html / Css

Интернет технологии

Канал для подготовки к собеседованиям по фронтенду

В избранное

Купить рекламу в этом канале

Формат:

keyboard_arrow_down

1/24
2/48
3/72
7 дней

1 час в топе / 24 часа в ленте

Количество:

keyboard_arrow_down

Стоимость публикации:

3 356^.64₽

Последние посты канала

imageИзображение не доступно для предпросмотра

Как создать веб-приложение со своей картой: подключение API v3 Яндекс Карт

Сколько карт установлено на вашем смартфоне? Попробуйте ответить на этот вопрос и задумайтесь, как часто их добавляют разработчики приложений. Кто-то отмечает на картах свои магазины, кто-то — делает проекты в духе Zenly, другие — показывают зоны доставки еды и т. д.

Если вам тоже пришлось «вшить» в свое веб-приложение карты, запаситесь терпением. В инструкции рассказываем, как это сделать и настроить тестовое окружение с IDE в облаке.

👉 @frontendInterview

324

16:06

24.04.2025

Как можно убрать пробелы в начале и конце строки?

При работе с полями ввода <input> и <textarea> может встречаться ситуация, когда пользователи добавляют пробелы в начале или конце текста. В некоторых случаях это не критично — например, в чатах или мессенджерах. Но есть ситуации, где важно получить чистые данные без лишних пробелов, как при вводе email для авторизации.

Для удаления таких пробельных символов используется метод .trim(), который нужно применить к значению поля перед отправкой данных на сервер.

Метод также помогает получить чистые данные в required-полях. Атрибут required указывает, что поле формы обязательно для заполнения, но он не всегда правильно работает с пробельными символами. Если пользователь введёт только пробелы в поле с атрибутом required, браузер может посчитать поле заполненным, хотя фактически полезной информации там нет.

Пример

const phrase = '     А быть может, каждый из вас уже начал — не заметив этого — тот единственный путь, который предназначен ему судьбой.\n   '
console.log(phrase.length)
// 124

const phraseWithoutSpaces = phrase.trim()
console.log(phraseWithoutSpaces)
// 'А быть может, каждый из вас уже начал — не заметив этого — тот единственный путь, который предназначен ему судьбой.'

console.log(phraseWithoutSpaces.length)
// 115

Метод не принимает аргументов и работает напрямую со строкой, на которой вызван:

const str = '  Привет, Дока!   '
console.log(str.trim()) // 'Привет, Дока!'

👉 @frontendInterview

721

11:00

23.04.2025

imageИзображение не доступно для предпросмотра

⚡️

Дождались! Ребята сделали крутейший канал про Frontend

Здесь на простых картинках и понятном языке обучают фронтенд-разработке, делятся полезными фишками и ресурсами

Подписывайтесь: @FrontendPortal

628

09:00

23.04.2025

imageИзображение не доступно для предпросмотра

👉 @frontendInterview

840

16:06

22.04.2025

Что такое meta теги?

Meta-теги – это специальные HTML-теги, которые содержат метаинформацию о веб-странице. Они располагаются внутри <head> и не отображаются на самой странице, но помогают браузерам, поисковым системам и социальным сетям правильно обрабатывать и отображать страницу.

Зачем нужны meta-теги?
- Улучшают SEO (поисковую оптимизацию)
- Управляют отображением в соцсетях и поисковиках
- Настраивают адаптивность страницы (например, на мобильных устройствах)
- Определяют кодировку, язык и авторство страницы

Основные meta-теги с примерами
Кодировка страницы

<meta charset="UTF-8">

Описание страницы (SEO)

<meta name="description" content="Лучший сайт с рецептами вкусных блюд!">

Ключевые слова (SEO, устарело)

<meta name="keywords" content="рецепты, еда, кулинария, блюда">

Автор страницы

<meta name="author" content="Иван Иванов">

Запрет индексации страницы

<meta name="robots" content="noindex, nofollow">

Адаптивность на мобильных устройствах

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Социальные сети (Open Graph, Twitter Cards)
Facebook и другие соцсети (Open Graph)

<meta property="og:title" content="Вкусные рецепты">
<meta property="og:description" content="Попробуйте лучшие блюда со всего мира!">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com">

Twitter-карточки

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Рецепты для гурманов">
<meta name="twitter:image" content="https://example.com/image.jpg">

👉 @frontendInterview

882

13:00

21.04.2025

play_circleВидео недоступно для предпросмотра

Стать фронтендером в Яндексе за выходные

26–27 апреля устраиваем Weekend Offer Frontend: всего за два дня можно пройти технические секции и попасть в Яндекс. Оставьте свою заявку на участие в мероприятии до 23 апреля.

Вы сможете выбрать одну из 10 команд. Это команды Поиска: Еком-сценарии, Архитектура, Международный Поиск, Красота, Финансы, Видеопоиск. И команды Вертикалей: Путешествия, Недвижимость, Аренда, Авто.ру. Можно пообщаться с нанимающими менеджерами и выбрать самый интересный проект. Если всё пройдёт хорошо, сразу же получите офер.

Узнать подробности и зарегистрироваться можно здесь.

Реклама. ООО "Яндекс". ИНН 7736207543

792

09:00

21.04.2025

imageИзображение не доступно для предпросмотра

Alphabetized

Создайте функцию, которая отсортирует символы строки в алфавитном порядке.

Пример:
alphabetized("The Holy Bible") // "BbeehHilloTy"

👉 @frontendInterview

870

16:04

20.04.2025

imageИзображение не доступно для предпросмотра

Learning TypeScript (2022)

Вы узнаете:
- Преимущества TypeScript и общие характеристики его системы типов
- Почему и как TypeScript полезен поверх JavaScript
- Как информировать свою систему типов с помощью аннотаций типов, предназначенных только для разработчиков
- Как TypeScript анализирует и понимает код, чтобы помочь вам дополнить существующие модели разработки
- Как TypeScript помогает работать с массивами, классами, функциями, объектами и другими важными встроенными конструкциями JavaScript

👉 @frontendInterview

851

10:05

20.04.2025

Как работают плавающие элементы (floats)?

float – это CSS-свойство, которое позволяет "выплывать" элементу из обычного потока документа и обтекаться другими элементами (например, текстом).

Пример:

<img src="image.jpg" class="float-img">
<p>Это текст, который будет обтекать картинку.</p>

.float-img {
  float: left;
  margin-right: 10px;
}

Почему родитель "схлопывается" при использовании float?
Когда внутри div есть только float-элементы, браузер считает, что он пустой, потому что float убирает элемент из потока.

<div class="container">
  <img src="image.jpg" class="float-img">
  <p>Текст обтекает картинку.</p>
</div>

.container {
  background: lightgray;
}
.float-img {
  float: left;
}

Решение 1: overflow: hidden;

.container {
  overflow: hidden; /* Контейнер теперь учитывает float-элементы */
}

Решение 2: clearfix (старый способ)

.container::after {
  content: "";
  display: block;
  clear: both;
}

Как остановить обтекание (`clear`)?
Чтобы отменить обтекание, используется clear.

<img src="image.jpg" class="float-img">
<p>Этот текст обтекает картинку.</p>
<div class="clear"></div>
<p>Этот текст пойдёт на новую строку.</p>

.float-img {
  float: left;
  margin-right: 10px;
}
.clear {
  clear: both;
}

Почему `float` устарел и что использовать вместо него?
Раньше float использовали для создания колонок и сеток, но сегодня его заменили:
Flexbox (display: flex;) – лучше для адаптивных макетов.
CSS Grid (display: grid;) – мощный инструмент для сложных сеток.

.container {
  display: flex;
  align-items: center;
}

👉 @frontendInterview

826

16:07

19.04.2025

play_circleВидео недоступно для предпросмотра

Обычный дейлик

👉 @frontendInterview

964

09:02

19.04.2025

close

С этим каналом часто покупают

18.0

JavaScript test

Интернет технологии

11.9K

ER:

3.2%

1 398^.60₽

35.1

JavaScript Job | Вакансии | Стажировки

Работа и вакансии

10.5K

ER:

8.1%

3 076^.92₽

17.3

Frontend по-флотски 👨‍💻

Интернет технологии

4.7K

ER:

27.3%

14 683^.90₽

30.3

Будни разработчика

Интернет технологии

14.7K

ER:

8.7%

2 517^.48₽

23.6

Senior Frontend - javascript, html, css

Интернет технологии

28.7K

ER:

4.8%

9 230^.76₽

14.4

Книги по Frontend

Интернет технологии

16.2K

ER:

7.7%

6 153^.84₽

19.7

JAVASCRIPT

Интернет технологии

18.3K

ER:

8.9%

6 293^.70₽

5.9

Frontend разработчик

Интернет технологии

12.0K

ER:

5.9%

6 363^.63₽

21.4

Фронтенд Гайд

Интернет технологии

7.7K

ER:

5.1%

3 006^.99₽

18.9

Логово Верстальщика

Интернет технологии

8.5K

ER:

8.2%

2 657^.34₽

0.3

КНИГИ: REACT, JS, ANGULAR, NODE, VUE

Интернет технологии

8.8K

ER:

9.2%

5 872^.72₽

14.6

HTML

Интернет технологии

70.9K

ER:

2.9%

13 286^.70₽

20.9

Html Gram

Интернет технологии

11.2K

ER:

6.9%

2 377^.62₽

Отзывы канала

keyboard_arrow_down

Добавлен: Сначала новые
Добавлен: Сначала старые
Оценка: По убыванию
Оценка: По возрастанию

5.0

0 отзыва за 6 мес.

Вежливый администратор, четкое соблюдение ТЗ

Лучшие в тематике

141.5

localhost › IT-юмор

Интернет технологии

16.0K

ER:

21.4%

4 155^.94₽

133.5

Типичный Сисадмин

Интернет технологии

30.4K

ER:

16.6%

6 153^.84₽

123.6

бесплатные IT мероприятия | free it events

Интернет технологии

12.1K

ER:

9.7%

8 391^.60₽

109.0

RealTech

Интернет технологии

55.2K

ER:

14.8%

5 314^.68₽

102.3

kaleos.p

Интернет технологии

71.2K

ER:

11.6%

20 699^.28₽

98.1

Сегодня в тренде

Интернет технологии

1.15M

ER:

8.2%

251 748^.00₽

97.7

HRTechRU

Интернет технологии

12.7K

ER:

4.2%

13 986^.00₽

97.5

IT-KB.RU - cобрание заметок об информационных технологиях (Linux и Windows)

Интернет технологии

6.6K

ER:

16.9%

6 013^.98₽

96.7

Рестарт

Интернет технологии

737K

ER:

7.0%

125 874^.00₽

89.7

Анализ данных (Data analysis)

Интернет технологии

45.1K

ER:

5.6%

23 076^.90₽

87.2

Пещера Айтишника

Интернет технологии

7.2K

ER:

19.0%

1 918^.88₽

85.2

TrendWatching: IT, технологии, бизнес

Интернет технологии

1.19M

ER:

6.0%

251 748^.00₽

83.5

ITMeeting - Анонсы бесплатных мероприятий по разработке

Интернет технологии

14.5K

ER:

9.6%

11 888^.10₽

81.3

DevHub Community

Интернет технологии

36.7K

ER:

7.7%

25 174^.80₽

79.9

GitHub Community

Интернет технологии

171K

ER:

6.3%

41 958^.00₽

Новинки в тематике

12.8

IT Стажировки

Интернет технологии

5.9K

ER:

15.0%

2 377^.62₽

12.3

Smurf Guru

Интернет технологии

2.6K

ER:

9.0%

349^.65₽

11.8

1С АНАЛИТИК / АРХИТЕКТОР (основная)

Интернет технологии

ER:

6 993^.00₽

11.6

Unity Assets Free

Интернет технологии

6.5K

ER:

2 097^.90₽

10.5

Dark Room

Интернет технологии

28.5K

ER:

6.2%

3 356^.64₽

10.5

STEALNET | DARK

Интернет технологии

13.2K

ER:

3.8%

1 048^.95₽

10.0

Phystech.Genesis | Channel

Интернет технологии

1.6K

ER:

20.4%

11 188^.80₽

8.6

IT АНАЛитика | Вильд Виктор

Интернет технологии

1.7K

ER:

42.3%

8 391^.60₽

7.4

404 Media

Интернет технологии

33.1K

ER:

11 188^.80₽

7.4

Хаски про Интернет

Интернет технологии

32.3K

ER:

4.8%

9 790^.20₽

6.5

Технолавка

Интернет технологии

345K

ER:

9.4%

55 944^.00₽

6.3

Пет-проект

Интернет технологии

8.0K

ER:

14.6%

3 496^.50₽

6.1

Нейросеть

Интернет технологии

1.7K

ER:

20.9%

2 097^.90₽

5.2

Чат Фронтендеров

Интернет технологии

3.7K

ER:

2 797^.20₽

2.3

CodHub | Программирование

Интернет технологии

14.6K

ER:

8.9%

4 195^.80₽

Статистика канала

Рейтинг

19.9

Оценка отзывов

5.0

Выполнено заявок

Выбрано

каналов на сумму:

0^.00₽

Подписчики:

Просмотры:

Перейти в корзинуКупить за:0^.00₽