Frontend.school() | изучаем HTML, CSS, JavaScript вместе!
Крутым фронтендером не рождаются — им становятся на канале @frontend_school! Наш чат: @frontend_school_chat Наша флудилка: @frontend_school_flud Другие проекты: t.me/addlist/dIq-3zEMMugwZTgy Мы в VK: vk.com/frontend_school Связь: @jellyjail
БільшеКраїна не вказанаМова не вказанаКатегорія не вказана
1 114
Підписники
+2624 години
+1027 днів
+10230 днів
- Підписники
- Перегляди допису
- ER - коефіцієнт залучення
Триває завантаження даних...
Приріст підписників
Триває завантаження даних...
Математические функции CSS со ступенчатыми значениями
В CSS теперь полноценно работают функции round(), rem() и mod(). Работают они точно также, как и в JavaScript, то есть округляют, и возвращают остатки. Это даёт ещё больше возможностей для стилизации сайта без применения JavaScript, но и увеличивает нагрузку со стороны CSS.
Чтобы было понятнее, где это может быть применимо, я нашёл статью, которая объясняет их использование на простых примерах создания спрайтов анимации:
https://habr.com/ru/articles/816587/
#css
100 видеоуроков по фронтенду для новичков и не только
Это максимально подробный базовый курс по фронтенду, который охватывает все основные темы. Начиная с того, что вообще такое фронтенд и заканчивая советами по прохождению интервью на вакансию разработчика.
Если не хотите смотреть сейчас, то обязательно сохраняйте пост в закладки, чтобы посмотреть потом. Не пожалеете!
https://www.youtube.com/playlist?list=PLV9lBwGQ2FU1VOctyWifetyMMC-OTJ51e
#видео #курс
Frontender[1.0] - 1 модуль
1 МОДУЛЬ Полный курс по фронтенд разработке с нуля, по шагам. С файлами к урокам, всё последовательно. Хорошая картинка и звук. Приятного обучения!)
Фото недоступнеДивитись в Telegram
Как настроить выбор темы на сайте
Для этого нам понадобится медиавыражение `prefers-color-scheme`, которое определяет выбранную в предпочтениях пользователя настройку темы в операционной системе.
Например, это может выглядеть так:
```
@media (prefers-color-scheme: light) {
.block {
background: white;
color: black;
}
}```
Более подробно о медиавыражение рекомендую почитать тут:
https://doka.guide/css/prefers-color-scheme/
#css
👍 2
Фото недоступнеДивитись в Telegram
Выходные — не повод сидеть без дела! Поэтому предлагаем сверстать очередной сайт для оттачивания мастерства вёрстки
По ссылке ниже вы найдёте стильный макет, по которому сможете сделать не менее красивый, но при этом ещё и функциональный лендинг:
https://www.figma.com/design/PSr7478hcIydh1tC6YZkUr/2rism?node-id=0-1&t=mVxuzEoR26yERLGI-0
#figma #макет #вёрстка
Полный курс по React, Redux и TypeScript бесплатно
Короткий, но крайне полезный курс для тех, кто уже освоил JS и хочет двигаться дальше. Если вы начали осваивать React, но не понимаете, как его использовать по полной, то обязательно посмотрите это видео.
Здесь вы научитесь инициализировать Redux Store, создавать хуки и работать с TS:
https://youtu.be/ETWABFYv0GM
#видео #курс #react #redux #typescript
Учитесь фронтенду с нами — подпишитесь 💻
React & Redux & TypeScript ПОЛНЫЙ КУРС 2021
В этом курсе мы на практике поработает с typescrit, react, redux и разработаем небольшое веб приложение. Мой курс "Продвинутый Frontend. В production на React" -
https://ulbitv.ru/frontendСсылка на исходный код -
https://github.com/utimur/react-redux-typescript-courseНеобходимые знания для прохождения этого курса здесь -----
https://www.youtube.com/playlist?list=PL6DxKON1uLOHsBCJ_vVuvRsW84VnqmPp6Таймкоды: 00:00 - Введение, теория, план на урок 02:40 - Инициализация Redux store 03:20 - Первый редюсер + типизация 13:50 - CombineReducer, Provider 15:35 - Создаем хук UseTypedSelector 18:00 - Ассинхронный action creator + типизация 23:00 - Создаем хук UseActions 24:40 - Второй редюсер, масштабируем приложение + постраничный вывод 34:07 - Расширяем useActions 38:30 - Не забываем лайки, комментарии, я старался =) Поддержать меня и мой канал вы можете по ссылкам ниже. Patreon/boosty (доступ к бонусам) -
https://boosty.to/ulbitvQiwi кошелек - http://qiwi.com/n/BODYE821 Яндекс деньги -
https://yoomoney.ru/to/4100116193037469Repost from N/a
Фото недоступнеДивитись в Telegram
30 самых полезных библиотек Python для веб-разработки в 2024 году
Занимаетесь вебом и не расстаётесь с JavaScript? Пора это исправить! Я тут нашёл для вас подборку из 30 библиотек Python, которые пригодятся веб-разработчикам.
Справедливости ради, в вебе действительно есть задачи, которые проще решать на Python: от анализа данных до веб-разработки. Посмотрите сами. Надеюсь, что найдёте для себе что-то новое и полезное:
https://tproger.ru/articles/30-samyh-poleznyh-bibliotek-python-dlya-veb-razrabotki-v-2024-godu
#веб #python
🐈⬛ Подписывайтесь на меня 😌
Фото недоступнеДивитись в Telegram
Друзья, мы хотим дать вам как можно больше пользы в этом канале, поэтому нам важно знать что вам нравится и чего не хватает у нас.
Поделитесь, пожалуйста, вашим мнением в комментариях. Мы обязательно его учтём и примем во внимание.
Фото недоступнеДивитись в Telegram
Что такое делегирование событий в JS и как это работает
Это техника, которая позволяет обрабатывать события на родительских элементах вместо на дочерних.
Мы знаем, что события всплывают вверх по DOM-дереву. То есть если вы установите обработчик события на родительском элементе, он будет вызван при срабатывании и на любом дочернем.
Вот пример, как можно это использовать:
```javascript
// Получаем родительский элемент
const parentElement = document.getElementById('parentElement');
// Добавляем обработчик на родительский элемент
parentElement.addEventListener('click', function(event) {
// Проверяем, что кликнули на нужный дочерний элемент
if(event.target.classList.contains('childElement')) {
// Обрабатываем событие
console.log('Событие обработано на дочернем элементе');
}
});
```
Тут мы устанавливаем обработчик на родительский элемент и проверяем, что событие произошло именно на дочернем элементе.
#javascript #урок
Учитесь фронтенду с нами — подпишитесь 💻
Фото недоступнеДивитись в Telegram
Как работают функции JavaScript
Мы с вами знаем, что функция — это блок программы, который выполняет определённые действия. То есть мы понимаем, что делает функция, потому что можем посмотреть код в ней.
Но как именно это работает? Мы не будем сейчас углубляться в двоичный код и прочие технические нюансы. Вместо этого предлагаем вам детально разобраться в том, что из себя представляет функция, какими скрытыми возможностями обладает и почему это работает именно так, как работает:
https://proglib.io/p/chto-v-korobke-kak-rabotayut-funkcii-v-javascript-2022-06-12
#javascript
00:07
Відео недоступнеДивитись в Telegram
«Классная» идея для формы авторизации на сайте
Помогите вашему пользователю получить доступ к аккаунту, сделав подсказку о пароле😉
#кек
@retra (2).mp41.19 MB
Оберіть інший тариф
На вашому тарифі доступна аналітика тільки для 5 каналів. Щоб отримати більше — оберіть інший тариф.