Senior Frontend Developer | JavaScript, React, HTML & CSS

Адрес канала:

Категории: Технологии

Язык: Русский

Количество подписчиков: 20.24K

Описание канала:

Изучаем Frontend.
По вопросам сотрудничества: @adv_and_pr
Канал на бирже: https://telega.in/c/senior_front

▲ Vote (1)

Рейтинги и Отзывы

2.67

3 отзыва

Оценить канал senior_front и оставить отзыв — могут только зарегестрированные пользователи. Все отзывы проходят модерацию.

5 звезд

4 звезд

3 звезд

2 звезд

1 звезд

Последние сообщения 3

2023-06-12 19:54:59

Всплытие JS - ч.1

Принцип всплытия очень простой - когда на элементе происходит событие, обработчики сначала срабатывают на нём, потом на его родителе, затем выше и так далее, вверх по цепочке предков.

Например, есть 3 вложенных элемента FORM > DIV > P с обработчиком на каждом:

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

вызовет обработчик onclick:

Сначала на самом

.
Потом на внешнем

.
Затем на внешнем

1.9K views16:54

Открыть/Комментировать

2023-06-12 17:54:59

Переходите на новый уровень в JS-разработке и разнообразьте свою работу!

Пройди тест по JS и проверь как хорошо ты знаешь язык.

Ответишь — пройдешь на продвинутый курс «JavaScript Developer. Professional» от OTUS по специальной цене + получишь видео-курс по Git в подарок

ПРОЙТИ ТЕСТИРОВАНИЕ
https://otus.pw/GB72/

Пройдете тест и получите:
Живое общение с экспертами JavaScript-сообщества
Получите видео-курс по Git в подарок
Лучшие открытые уроки прошлых наборов курса
Продвинутые темы и практика на «боевых» задачах уровня Middle+
Скидку на прохождение онлайн курса «JavaScript Developer. Professional»

Курс доступен в рассрочку.

Нативная интеграция. Информация о продукте www.otus.ru

2.0K views14:54

Открыть/Комментировать

2023-06-12 17:15:27

Связанные стили

При использовании связанных стилей селекторы и их значения находятся в отдельном файле с расширением css. Для связывания документа с этим файлом используется тег . Тег помещается в контейнер , как показано в примере 1.

Значение атрибута rel тега неизменно вне зависимости от кода, как в примере1 . Атрибут href задаёт путь к CSS-файлу, который может быть относительным или абсолютным. Таким образом, можно подключать таблицу стилей, находящуюся на другом сайте.

Содержимое файла mysite.css, подключаемого через тег , приведено в примере 2.

Файл со стилем содержит только синтаксис CSS, и HTML-документ ссылается на него. Это позволяет разделить код и оформление сайта, делая использование связанных стилей наиболее универсальным и удобным методом добавления стиля на сайт.

2.0K views14:15

Открыть/Комментировать

2023-06-11 20:28:55 #вопросы_с_собеседований
Расскажите о преимуществах стилей CSS

1. Разделение кода и оформления
Веб-страницы должны содержать только логические теги, а внешнее оформление (цвет, размер шрифта и т.д.) должно быть задано через стили. Это позволяет параллельно работать над дизайном и версткой сайта, сохраняя ключевые идеи.

2. Адаптивность дизайна
С помощью стилей можно настраивать веб-страницу для разных устройств вывода (мониторы, принтеры, смартфоны и планшеты).

3. Расширенные по сравнению с HTML способы оформления элементов
В отличие от HTML стили имеют гораздо больше возможностей по оформлению элементов веб-страниц. Простыми средствами можно изменить цвет фона элемента, добавить рамку, установить шрифт, определить размеры, положение и многое другое.

4. Ускорение загрузки сайта
Хранение стилей в отдельном файле уменьшает объем кода на веб-страницах и ускоряет загрузку документов благодаря кэшированию и быстрому доступу к файлу.

5. Централизованное хранение
Стили хранятся в файлах, указанных в документах сайта. Изменение одного файла изменяет оформление всех страниц, связанных с ним.

2.4K views17:28

Открыть/Комментировать

2023-06-11 16:22:56

Логические свойства CSS

Логические свойства CSS позволяют управлять стилями элементов, основываясь на их расположении на странице, а не на их конкретных свойствах. Это облегчает создание адаптивных и отзывчивых дизайнов, а также уменьшает количество кода CSS.

Вот несколько примеров логических свойств CSS:

- margin-inline-start и margin-inline-end - управляют отступами элемента слева и справа, в зависимости от направления текста на странице.

- padding-block-start и padding-block-end - управляют внутренним отступом элемента сверху и снизу, в зависимости от направления текста на странице.

- border-block-start и border-block-end - управляют границами элемента сверху и снизу, в зависимости от направления текста на странице.

2.5K views13:22

Открыть/Комментировать

2023-06-10 20:12:45

CSS Blend Modes

- это CSS свойство, которое позволяет комбинировать два или более слоев цвета в один цветовой слой. Это очень полезно для создания различных эффектов и стилей для веб-сайтов.

Пример использования CSS Blend Modes:

1. Создайте два div элемента

2. Добавьте стили для каждого элемента

3. Отобразите изменения в браузере

Это лишь один из многих эффектов, которые можно создать с помощью CSS Blend Modes. Используйте свою фантазию и экспериментируйте с различными цветами и режимами смешивания для создания уникальных дизайнов для веб-сайтов.

1.5K views17:12

Открыть/Комментировать

2023-06-10 17:53:11

Нашли рейтинг лучших курсов по Frontend-разработке!

Tutortop — образовательный маркетплейс №1, где представлено свыше 5000 курсов от более чем 300 школ и все их можно сравнить по рейтингу, цене и отзывам, а еще купить дешевле, чем напрямую

Собрали для вас подборку из топовых курсов для обучения разработчиков по мнению их пользователей:

— Курс «Веб-разработчик с индивидуальным сопровождением и гарантией трудоустройства» от Skypro. Рейтинг 4.9 из 5.

— Профессия: Frontend разработчик с гарантией трудоустройства от Product Star. Рейтинг 4.8 из 5.

— Курс «Frontend-разработчик с нуля» от Нетологии. Рейтинг 4.8 из 5.

Скидку до 10 000 ₽ к финальной цене на эти и десятки других курсов по веб-разработке можно получить на маркетплейсе tutortop!

1.7K views14:53

Открыть/Комментировать

2023-06-10 15:07:37

Использование обработчиков роутов в Next.JS

Next.JS - фреймворк для создания универсальных JavaScript-приложений. Он обеспечивает серверный рендеринг и создание SPA-приложений.

Обработчики роутов - важный инструмент, который используется для обработки запросов и возвращения данных. Чтобы создать обработчик роута в Next.JS, создайте файл .js в папке pages/api и определите функцию, которая будет обрабатывать запросы. Пример 1.

После создания обработчика роута важно зарегистрировать его в конфигурации сервера Next.JS. Для этого нужно создать файл next.config.js в корневой директории проекта и определить обработчики роутов. Пример 2.

1.8K views12:07

Открыть/Комментировать

2023-06-09 21:24:29

Селектор :empty

Псевдокласс :empty - это селектор, который позволяет выбирать элементы, не содержащие потомков. Это может быть полезно для стилизации элементов, которые должны быть скрыты, если они не содержат контента.

Например, если у вас есть контейнер

, который должен быть скрыт, если он не содержит никакого текста, вы можете использовать CSS-код (1).

Кроме того, вы можете использовать псевдокласс :empty для добавления стилей к элементам, которые содержат только пустые теги. Например, если у вас есть ссылка , которая должна быть скрыта, если она не содержит текста, вы можете использовать CSS-код (2).

2.5K views18:24

Открыть/Комментировать

2023-06-08 22:42:14 #вопросы_с_собеседований
Назовите простые консольные команд Git для быстрой разработки

Git - это распределенная система контроля версий, которая позволяет разработчикам эффективно работать с кодом. Ниже приведены 5 простых консольных команд Git, которые помогут ускорить процесс разработки.

1. Команда git init используется для создания нового репозитория Git. Она создает новую папку .git в корневом каталоге проекта и инициализирует репозиторий.

2. Команда git add используется для добавления файлов в индекс Git. Это означает, что файлы будут отслеживаться Git и будут включены в следующий коммит.

3. Команда git commit используется для создания нового коммита. Коммиты используются для записи изменений в репозиторий. Каждый коммит имеет уникальный идентификатор и сообщение, которое описывает изменения.

4. Команда git status показывает текущее состояние репозитория. Она показывает, какие файлы были изменены, какие файлы были добавлены в индекс, и какие файлы еще не были отслежены Git.

5. Команда git log используется для просмотра истории коммитов Git. Она показывает список всех коммитов, начиная с самого последнего.

3.0K views19:42

Открыть/Комментировать