Подводим итоги недели. Вам искать ничего не нужно, мы уже всё подготовили 🧡

На канале

Подборка в помощь верстальщику
https://t.me/htmlacademy/6429

Освежили в памяти DevTools
https://t.me/htmlacademy/6439

Что за новый пакет курсов 🙀
https://t.me/htmlacademy/6453

В комьюнити

Советуем литературу
https://t.me/c/1472921054/376068

Фигма + адоб = ?
https://t.me/c/1472921054/376928

Фронтендер, который использует подход CSS-in-JS, стилизует приложение проще и эффективнее

Такой разработчик понимает внутреннее устройство библиотек для работы с CSS-in-JS. Осознанно выбирает и использует инструменты в зависимости от проекта и задач. Стилизует пользовательские интерфейсы при помощи JavaScript.

Список задач, которые можно закрывать, владея подходом CSS-in-JS:

— подготовка и подключение дизайн-токенов;
— разработка библиотеки компонентов;
— стилизация сеток;
— темизация пользовательского интерфейса;
— формирование стилей любой сложности при помощи JS;
— переиспользование стилей при помощи вспомогательных компонентов и миксинов.

На курсе «CSS-in-JS» мы развиваем все навыки, которые описаны выше. До 3 октября на обучение действует скидка 30%.

Если вам хочется упростить работу со стилями и вырасти профессионально, поторопитесь, ещё есть время записаться

Сегодня стартует новый поток курса «HTML и CSS. Профессиональная вёрстка сайтов»

За 9 недель вы научитесь верстать лендинги на профессиональном уровне.

Сначала познакомитесь с основами HTML и CSS, изучите базовые вещи: структуру HTML-документа, подходы к разметке, часто используемые теги и методику семантической вёрстки.

Далее выберете проект и начнёте работу над ним. Проанализируйте макет, сделаете разметку, поработаете с графикой, научитесь верстать при помощи флексов и гридов, рассмотрите, как сверстать форму заявки и слайдеры на сайте.

На протяжении всего обучения можете обращаться за помощью к наставнику, преподавателям курса и студентам, которые будут в комьюнити курса.

Записаться

Новый выпуск фронтенд-новостей уже в блоге

Три главных новости за неделю с 12–18 сентября:

Подробное руководство по WAI-ARIA

Узнайте, когда и как правильно использовать ARIA так, чтобы это было полезно для людей, использующих дополнительные технологии для навигации в интернете.

Что нового в HTML-формах

Появилось несколько полезных дополнений по работе с формами: requestSubmit(), submitter, formdata event, showPicker(), Inert attribute.

input type="number" самый худший способ ввода

Читайте статью, чтобы узнать почему.

Ещё больше новостей

Как вы объясняли маме/бабушке, кем вы работаете и что входит в ваши обязанности? 😅

Сборник полезных материалов для фронтендера — 240 докладов с 7 последних конференций «FrontendConf»

Ловите архив, который насчитывает 240 докладов крутейших спикеров на разные темы про разработку. Все благодарности за подборку Серёже Попову — руководителю фронтенд-аутсорса «Лига А.» и одному из членов программного комитета «FrontendConf».

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

Доклады с конференции «FrontendConf 2021»

Доклады с «Frontend Live 2020»

Доклады с «FrontendConf 2019»

Доклады с «FrontendConf 2019 (РИТ++)»

Доклады с «FrontendConf Moscow 2018»

Доклады с «FrontendConf 2018 (РИТ++)»

Если все выступления посмотрели и захотелось побывать на мероприятии, то приходите на конференцию 24–25 октября. Билеты можно купить со скидкой 10% по промокоду popov.

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

Записаться

Три шага, которые помогут преодолеть тревогу

В ближайшее время будем публиковать больше полезного и практического контента, а пока небольшая инструкция как снизить тревогу.

5 сервисов для изучения CSS Grid и Flexbox разметки

Подборка сервисов, где можно изучить основы CSS Grid и Flexbox разметки.

Игры

Игра, в которой вы изучите свойство justify-content с помощью лягушонка Фогги и его друзей

Игра, которая поможет понять как работает свойство flex: align-items, justify-content, flex-direction, align-self и order

Игра, которая поможет изучить CSS Grid Layout. Есть следующие свойства grid: grid-column-start, grid-column-end, grid-column, grid-row-start, grid-row-end, grid-row, grid-area, order, grid-template-columns, grid-template-rows и grid-template

Онлайн-генераторы

Когда флексы и гриды будут изучены — самое время перейти к практике. Эти два сервиса могут помочь на первых порах генерировать сетки, находить и применять нестандартные решения в работе.

Онлайн-генератор, позволяющий легко построить свою сетку без коддинга

Подборка интересных вариантов использования CSS-сетки в кодпене. Есть даже весьма сложные и необычные примеры

Тренажёры Академии по HTML, CSS и JavaScript

Продолжить практиковаться можно с Котом Кексом. Разметите страницу, стилизуете её и напишите свой первый скрипт. Бесплатно

Как стать мидлом

Собрали для вас подробную инструкцию о том, как стать мидлом — с чего начать, что учить, где узнавать новости и самые свежие тренды фронтенда. Внутри подборки книг, главная документация, тренажёры и другие полезные материалы.

Прочитайте, скиньте знакомым и добавьте в закладки, чтобы не потерять

А вдобавок подпишитесь на наш новый телеграм-канал для мидлов — будем собирать там всё самое важное для обучения и роста разработчиков и делиться новостями индустрии.

Подписаться

Расширения для браузера, которые упростят жизнь фронтендера

HTML Validator — расширение через которое можно легко провести валидацию сайта.

Web Developer — набор полезных инструментов для анализа макета, тестирования кода и изменения внешнего вида страницы.

CSSViewer — расширение, которое показывает все CSS-свойства элементов.

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

Stylus — расширение с помощью которого вы сможете легко менять и настраивать CSS-стили внутри браузера.

ColorPick Eyedropper —расширение, которое поможет подсказать любой цвет с изображения.

Designer Tools — расширение, которое с точностью до миллиметра определит расстояние на лендинге.

Проверьте свои знания о селекторах в CSS

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

Пройти тест

Посмотреть конспект

Техники валидации форм

Узнайте, как разработчик может облегчить процесс создания онлайн-формы на сайте с помощью CSS, JavaScript и разных техник валидации.

Читать

10 горячих клавиш VS Code, которые ускорят вашу работу

Горячие клавиши — добро, польза и экономия времени.

Разберёмся, как с их помощью упростить себе жизнь в Visual Studio Code.