С 15 по 18 марта весенняя распродажа навыков и проектов для практики, скидки до 75%.

⚡Проекты для практики помогут проверить свои навыки веб-разработки, выполнив проект по вёрстке или javascript «от начала и до конца».

В комплекте:
* макет в формате figma,
* пошаговая инструкция,
* архивы с эталонным решением каждого этапа.

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

В комплекте:
— теория и инструкции,— эталонная реализация,
— кейсы для практик.

Забрать навык или проект со скидкой.

#htmlacademy_обучение

Фронтенд-новости 47. Совершенно точно настоящий, а не отправленный случайно нажатием enter в неподходящий момент времени, пока ещё не всё оформлено, дайджест новостей и полезных статей о фронтенде с 6 по 16 марта, хотя обычно он выходит по понедельникам, а сегодня пятница, но что уж теперь.

💫 Что нового

Chrome 111
- View Transitions API
- Поддержка CSS Color Level 4
- Новые инструменты на панели стилей

Chrome 112 beta и в нём Chrome DevTools

Отчет о производительности Astro, Gatsby, Next.js, Nuxt, Remix, и SvelteKit в 2023.

В Chrome появился headless mode. Узнайте, как его использовать.

🧬 HTML и CSS

Типографить станет чуть легче с новым CSS-свойством text-wrap: balance

Нам нужен нативный .visually-hidden

Полное руководство по медиавыражениям

ARIA против HTML. `<div role="heading" aria-level="1">`— это то же самое, что `<h1>` , но что использовать лучше?

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

Пять ошибок при написании альтернативного текста?

🏝️ JavaScript

🎥 Что почитать по JavaScript / Игорь Антонов с большим обзором книг по JavaScript

Распространенные ошибки новичков в React.

Были ли React Hooks ошибкой?

Как создать панель администратора React с помощью Mantine, Strapi и Refine

Vue 3.2 и прирост скорости.

12 самых популярных фреймворков Node.js в 2023 году


Подпишитесь на @html_blog, чтобы не пропустить новые выпуски.

Где проходят стажировку выпускники Академии? 9 частых вопросов про «Лигу А».

1. Что такое лига❓
Это фронтенд-аутсорс, который принимает заказы на вёрстку и фронтенд — от простых страничек до больших сервисов. Мы сами основали эту компанию, чтобы трудоустраивать туда своих студентов.

У ребят есть свой сайт, заходите посмотреть — https://ligaa.agency/

2. Как появилась идея❓
Пять лет назад мы решили проверить, насколько наши выпускники умеют справляться с реальными задачами на рынке.

Мы открыли компанию, в которой брали реальные проекты на разработку и сажали за их выполнение своих выпускников.

3. Не было страшно завалить проект❓
Мы страховались. Если бы что-то пошло не так, мы бы бросили на доработку проекта свои силы, у нас были эксперты.

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

После пилотного запуска было решено этот процесс масштабировать.

4. Как выглядит Лига сейчас❓
Лига когда-то состояла из одного-двух человек, нескольких выпускников, которые делали проекты и нескольких проектов в работе. К 2021 году они сделали 700 с лишним проектов, в штате около 40 человек и около 100 выпускников одновременно работает.

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

5. Сколько студенты работают в Лиге❓
Мы всем говорим: Лига — это не ваша новая основная работа. Это временная история, чтобы получить опыт. Время работы может быть разное, обычно около полугода. Вы работаете и получаете деньги за каждый проект, за который берётесь.

6. Какая зарплата на стажировке❓
Зависит от проекта. Существует ставка часа, у разных проектов разная сложность, эта ставка часа тоже варьируется.

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

7. Бывает ли, что выпускники уходят работать к клиентам❓
Бывает, мы поощряем, иногда Академия сама набирает фронтов и верстальщиков из Лиги.

8. Как лига влияет на статистику трудоустройства выпускников❓
Благодаря этой стажировки у выпускников профессии конверсия в трудоустройство выросла до 95–96%.

На каждом этапе обучения, студенты могут отваливаться, да. Но если студент дошёл до конца и прошёл стажировку — он трудоустраивается.

9. Как попасть на стажировку в Лигу А❓
Успешно пройти одну из профессий:
Фронтенд-разработчик.
JavaScript-разработчик.
Фулстек-разработчик.

#htmlacademy_обучение

Вконтакте стартует масштабный конкурс, среди призов:
✦ Место на курсе «HTML и CSS. Профессиональная вёрстка сайтов».
✦ Подписку на три месяца.
✦ Навык или проект на выбор.

Все подробности в посте — https://vk.com/htmlacademy?w=wall-38306835_62744

Присоединяйтесь 🎁

Как не страдать во время обучения — подборка статей для учащихся.
Поджимают дедлайны. А-а-а-а, что делать?
Как пройти тренажёры, даже если вы гуманитарий.
Как учиться самостоятельно.

#htmlacademy_статьи

Фронтенд-новости 48. Свежие статьи и новости веб-разработки за последнюю неделю.

💫 Что нового

TypeScript 5.0. Декораторы, улучшенная поддержка проектов ESM для Node и упаковщиков, const параметры типов и многое другое.

Transformers.js: запуск моделей машинного обучения в браузере.

Проекту Электрон — 10 лет. Вау. Сколько ж всего на нём понаделали.


🧬 HTML и CSS

Основы фронтенд-разработки: фреймворки, DOM-дерево, взаимодействие с бэкендом.

Как понять комбинаторные селекторы и селекторы потомков в CSS.

Шесть CSS-сниппетов, которые должен знать каждый фронтендер в 2023.

Выбор предыдущих родственников (ну те, которые siblings) с помощью CSS :has()

Десять советов по улучшению CSS-переходов и анимации.

«Сначала дизайн, потом сборка»: давайте разберёмся с этим мифом навсегда. Не ждите, пока дизайнеры всё додизайнят — делайте.

Создание часов с новыми функциями CSS sin() и cos(). Тригонометрия (вспомнили, вздрогнули?) теперь есть в последних версиях Firefox и Safari.

Не ставьте одинаковые радиусы скругления внутри и снаружи чего угодно.

Как изменить фавиконку при переключении вкладок браузера.

Календари с учетом доступности и интернационализации.

Вложенность в CSS. Узнайте, как CSS Nesting позволяет использовать любимую функцию препроцессора в Интернете.

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


🏝️ JavaScript

В каком порядке перечисляются ключи в объектах: случайном или по определённым правилам? Игорь Антонов с подробным видеоразбором.

Создание и загрузка текстовых файлов с помощью JavaScript.

Постепенное улучшение таблицы с помощью веб-компонента — создание оболочки веб-компонента для добавления сортировки таблиц.

Что такое Vite и зачем его использовать вместо CRA?

Список пожеланий для компилятора React.

Как перетаскивать штуковины в React

«Пять ошибок, которые я совершил, начиная свой первый проект React»

Ленивая загрузка маршрутов в React Router 6.4+

Как отлаживать ошибки сегментации узла. Нормальные исключения — это одно, но когда вы сталкиваетесь с чем-то столь загадочным, как «ошибка сегментации (сброс ядра)», что вам делать?


Подпишитесь на @html_blog, чтобы не пропустить новые выпуски.