Как веб-разработчик, ты будешь использовать множество инструментов и фреймворков при создании сайтов и приложений.

И чтобы помочь тебе разобраться с ключевыми технологиями, Playback Press подготовил этот гайд.

В нём ты изучишь основы фронтенда и бэкенда: HTTP, Node, Express, JSON, Mongo, HTML, CSS, Web Components и React.

➡️ Animated Intro to Web Development

📢 WebDev // IT & Чат

Адаптивная HTML-верстка макета из Figma

В этом 3-часовом уроке вы вместе с автором сверстаете несложный макет, состоящий из 4 страниц. Автор подробно описывает все свои действия, что позволяет лучше погрузиться в задачу на всех её этапах.

Вы сможете скачать этот макет, чтобы повторять за автором, тем самым закрепив полученные знания.

➡️ Смотреть видео & Скачать видео

📢 WebDev // IT & Чат

Игра для изучения и практики CSS

CSSBattle — это онлайн-игра, в которой игроки соревнуются в создании изображений и фигур с помощью минимального количества кода на HTML и CSS.

➡️ Читать статью

📢 WebDev // IT & Чат

Закреплённый сайдбар с переходом

.layout:has(:popover-open) {
  grid-template-columns: var(--sidebar-width) 1fr;
}
aside:popover-open {
  translate: 0 var(--ctrl);
  height: var(--extend);
}

Чистый CSS, ноль JS для перехода лейаута.
Куча мелких настроек, с которыми можно поиграться

📢 WebDev // IT & Чат

Верстка сайта из Marsy

Верстка сайта из Marsy. Курс из 8 уроков. В этом плейлисте мы рассмотрим пример верстки сайта с помощью сервиса Marsy. Это бесплатный аналог Avocode который помогает упростить процесс верстки. Мы будем верстать интересный макет сайта от начала и до конца используя HTML, CSS и JS.

➡️ Смотреть видео & Скачать видео

📢 WebDev // IT & Чат

Мониторинг работы веб-сайта в реальном времени

Updo — это open-source инструмент командной строки, разработанный для мониторинга времени работы и производительности веб-сайта.

➡️ Читать статью

📢 WebDev // IT & Чат

Лучшая утилита для создания софтвэр диаграмм.

К тому же бесплатная и совместимая с GitHub!

Идеально подходит для UML, потоков и процессов.
Экспорт в изображение, PDF, HTML и другие форматы.

➡️ http://app.diagrams.net

📢 WebDev // IT & Чат

Практические уроки по CSS и CSS3

Обучающие уроки по CSS, практика на реальных примерах от анимации до типичной верстки.

➡️ Смотреть видео & Скачать видео

📢 WebDev // IT & Чат

Крупнейшая коллекция проверенных публичных API

Репо Public API Lists содержит в себе крупнейшую подборку API на все случаи жизни: от животных и криптовалют до аниме и погоды.

➡️ Читать статью

📢 WebDev // IT & Чат

Как Apple делает эти безумные видеопереходы при прокрутке?

Давайте воссоздадим это с помощью чистого CSS с анимацией, управляемой прокруткой, и view-timeline.

Именно так, никаких слушателей событий прокрутки

Получить фрагменты кода, подсказки и полное руководство можно здесь

📢 WebDev // IT & Чат

Подписки на нейронки без переплат на ggsel

На сайте собраны все нужные ИИ-модели для работы и учебы 👨‍💻

Иностранные карты не потребуются — оплатить подписку безопасно можно картой российского банка

А еще до 20 ноября в канале ggsel: AI, tech, digital проходит розыгрыш набора LEGO и подписки тг премиум на год

💡 Шпаргалка по JavaScript

📢 WebDev // IT & Чат

Делаем 6 проектов на React для начинающих

В этом видеоуроке автор показывает, как разработать 6 разных React-проектов уровня Junior всего за 2 часа.

➡️ Смотреть видео & Скачать видео

📢 WebDev // IT & Чат

Совет по CSS

В Anchor Positioning можно использовать position-area, чтобы разместить элемент относительно его якоря — и, внезапно, возможных позиций аж 36 штук

Запомнить всё это нереально, поэтому сделалb интерактивную демку, где можно просто выбрать нужное положение и сразу получить готовый код.

➡️ https://css-tip.com/position-area/

📢 WebDev // IT & Чат

Адаптация сайта под мобильные устройства за 10 минут

Сегодня мы полностью адаптируем сайт под мобильные устройства. На самом деле это очень просто. Приятного просмотра! В этом ролике подробно рассказывается, что такое адаптивная верстка или адаптация сайта. Все это помогут нам сделать медиа запросы css3 (css media queries).

➡️ Смотреть видео & Скачать видео

📢 WebDev // IT & Чат

HTML- и CSS-советы для джуниор фронтенд-разработчиков

Автор этой статьи решил помочь новичкам во фронтенде обратить внимание на ключевые аспекты работы с HTML и CSS, чтобы сделать их код качественнее.

➡️ Читать статью

📢 WebDev // IT & Чат

5 инструментов для веб-разработчиков

http://penpot.app - Альтернатива Figma с открытым исходным кодом

http://sevalla.com - Full-stack хостинг для современных веб-приложений

http://excalidraw.com - Диаграмма стилей, нарисованная от руки

http://locomotivemtl.github.io/locomotive-scroll/ - Плавная прокрутка с эффектом параллакса

http://maxwellito.github.io/vivus/ - Анимация SVG-рисунков в реальном времени

📢 WebDev // IT & Чат

Адаптивная верстка за пару минут

Новый взгляд на создание адаптивных красивых сайтов - CSS Grid. В ходе этого видео мы научимся работать с CSS Grid, разберемся что это такое и поймем почему это круче FlexBox!

➡️ Смотреть видео & Скачать видео

📢 WebDev // IT & Чат

Как тестируют API: разбираемся на примере REST API

API — что-то вроде универсального переводчика, который помогает программам обмениваться данными и функциями.

Бывает, что нужно убедиться, что API работает как надо и передаёт то, что нужно.

Чтобы не проверять всё на настоящей программе, делают проще и тестируют API с помощью отдельных инструментов.

➡️ Читать статью

📢 WebDev // IT & Чат

Создавай SVG-графики для своего сайта без библиотек

Импортируй данные из Excel, CSV или вводи вручную.
Доступно 8 разных типов, и всё это можно сделать за пару секунд.

➡️ https://makegraph.app/

📢 WebDev // IT & Чат