Экспертный разбор – Александр Ламков
На стриме разберем 🍽️ RestoApp 1, в рамках которого участники реализовывают главную страницу сайта ресторана. Допустимый для использования стек технологий – HTML, CSS и, совсем немного, JS. Разбор проведет Александр Ламков, Frontend-инженер с 5-летним опытом разработки, автор ютуб-канала @AleksanderLamkov с ~50 тыс. подписчиков, ментор с 200+ проведенных консультаций, прошел Senior’ские собесы в несколько бигтехов РФ, работает в VK! На стриме пройдемся по общим наблюдениями: 👍 плюсам, 🛠 багам и 🚀 рекомендациям, 👀 посмотрим отдельные примеры и в конце 🎤 ответим на ваши вопросы. 🟣 ТАЙМ-КОДЫ ⇢ 00:22 Начало стрима ⇢ 07:38 Представление гостя ⇢ 09:22 Обзор проекта ⇢ 10:32 Внешний вид и взаимодействие ⇢ 15:48 Разбор кода ⇢ 20:24 Заключение ⇢ 20:45 Чрезмерная декомпозиция стилей ⇢ 23:35 Проблемы с производительностью ⇢ 26:01 Использование неразрывного пробела ⇢ 28:11 Работа с типографикой ⇢ 30:46 Работа с изображениями ⇢ 32:37 Работа с заголовками ⇢ 33:18 Форматирование кода ⇢ 35:12 Атрибуты кнопок ⇢ 36:10 Сопроводительный текст для ссылок и кнопок ⇢ 38:57 Ширина и высота элементов ⇢ 42:40 Смешение контента ⇢ 45:21 Ленивая загрузка изображений ⇢ 46:13 Преимущества ленивой загрузки ⇢ 47:51 Оптимизация кода ⇢ 49:47 Использование шрифтов ⇢ 51:07 Шрифты и свойства ⇢ 53:18 Маргины и утилитарные классы ⇢ 55:23 Организация стилей ⇢ 57:10 Пост-процессинг стилей ⇢ 59:08 JavaScript и читаемость кода ⇢ 01:02:35 Комментарии и поддержка кода ⇢ 01:03:50 Важность чистого и понятного кода ⇢ 01:04:35 Ресет и нормализация стилей ⇢ 01:05:31 Критика текущего подхода ⇢ 01:06:06 Рекомендация курса по CSS ⇢ 01:07:23 Вопросы и поддержка ⇢ 01:07:37 Нормализация и сброс стилей ⇢ 01:08:29 Проблемы с версткой и нормализацией ⇢ 01:10:19 Использование псевдоклассов и селекторов ⇢ 01:12:05 Проблемы с версткой и визуальными редакторами ⇢ 01:13:52 Обзор второй работы ⇢ 01:16:50 Анализ кода и SEO ⇢ 01:19:09 Применение атрибута aria ⇢ 01:20:35 Использование миксов и нормализация стилей ⇢ 01:21:50 Проблемы с единицами измерения rem ⇢ 01:23:37 Проблемы с телефонами и ссылками ⇢ 01:25:51 Использование background-image и img ⇢ 01:28:29 Ховер-эффекты и ссылки в футере ⇢ 01:30:18 Использование тэга time и пути в импортах ⇢ 01:32:34 Вопросы и ответы ⇢ 01:34:41 Размеры элементов и контент ⇢ 01:36:29 Эффекты наведения ⇢ 01:37:34 Стили и подходы ⇢ 01:39:31 Применение figcaption ⇢ 01:42:22 Проверка кода ⇢ 01:46:11 Ссылки в футере ⇢ 01:46:38 Проблемы с элементами и стилями ⇢ 01:47:57 Проблемы с JavaScript ⇢ 01:49:37 Проблемы с элементами и стилями ⇢ 01:51:41 Ответы на комментарии ⇢ 01:56:04 Нормализация стилей ⇢ 01:57:02 Использование Flexbox и Grid ⇢ 01:59:43 Отношение к Bootstrap ⇢ 02:01:03 Тренировка навыков работы с нативными инструментами ⇢ 02:02:02 Планы на стримы и курсы ⇢ 02:03:47 Использование BEM и React ⇢ 02:06:42 Использование ChatGPT ⇢ 02:10:31 Советы по использованию ChatGPT ⇢ 02:12:33 Джейк Верри и верстка ⇢ 02:13:28 Адаптация картинок и курсы ⇢ 02:14:58 Спринты и работа в команде ⇢ 02:17:21 Бэкенд и фронтенд ⇢ 02:19:19 Первая работа и опыт ⇢ 02:21:15 Лайфхаки и доступность ⇢ 02:22:52 Методология разработки ⇢ 02:24:23 Гайдлайн верстки ⇢ 02:25:49 Использование миксинов ⇢ 02:26:46 Конструкторы и языки программирования ⇢ 02:28:31 Сложные задачи на работе ⇢ 02:31:47 Использование единиц измерения ⇢ 02:33:46 Адаптивность и медиа-запросы ⇢ 02:35:10 Выбор стейт-менеджера ⇢ 02:37:10 Пиксель-перфект и компромиссы ⇢ 02:38:56 Взаимодействие с командой ⇢ 02:40:37 Возраст и карьера в IT ⇢ 02:43:18 Мероприятия и общение ⇢ 02:45:23 Искусственный интеллект и обучение ⇢ 02:47:51 Курсы и инструменты ⇢ 02:48:50 Отношение к Tilt ⇢ 02:49:45 Проблемы работодателей и обучение ⇢ 02:51:42 Советы для начинающих разработчиков ⇢ 02:52:29 Личный опыт и мотивация ⇢ 02:56:01 Платформа PREAX ⇢ 02:58:29 Вопросы и ответы ⇢ 03:00:53 Мероприятия в Москве и Санкт-Петербурге ⇢ 03:01:51 Поиск мероприятий и советы по поиску работы ⇢ 03:03:40 Подготовка к собеседованиям ⇢ 03:05:26 Использование шаблонов и подписка на комьюнити ⇢ 03:06:24 YouTube-каналы и записи трансляций ⇢ 03:07:33 Next.js и его значение ⇢ 03:08:30 Вопросы и обучение ⇢ 03:10:38 Ресурсы и технологии ⇢ 03:11:36 Время на обучение ⇢ 03:13:34 Заключение и благодарности 🟡 ССЫЛКИ ⇢ Сайт: https://preax.ru/?i=14679eff ⇢ Почта: join@preax.ru ⇢ Telegram: https://t.me/preax_ru #frontend #фронтенд #код_ревью #code_review #html #css #javascript
На стриме разберем 🍽️ RestoApp 1, в рамках которого участники реализовывают главную страницу сайта ресторана. Допустимый для использования стек технологий – HTML, CSS и, совсем немного, JS. Разбор проведет Александр Ламков, Frontend-инженер с 5-летним опытом разработки, автор ютуб-канала @AleksanderLamkov с ~50 тыс. подписчиков, ментор с 200+ проведенных консультаций, прошел Senior’ские собесы в несколько бигтехов РФ, работает в VK! На стриме пройдемся по общим наблюдениями: 👍 плюсам, 🛠 багам и 🚀 рекомендациям, 👀 посмотрим отдельные примеры и в конце 🎤 ответим на ваши вопросы. 🟣 ТАЙМ-КОДЫ ⇢ 00:22 Начало стрима ⇢ 07:38 Представление гостя ⇢ 09:22 Обзор проекта ⇢ 10:32 Внешний вид и взаимодействие ⇢ 15:48 Разбор кода ⇢ 20:24 Заключение ⇢ 20:45 Чрезмерная декомпозиция стилей ⇢ 23:35 Проблемы с производительностью ⇢ 26:01 Использование неразрывного пробела ⇢ 28:11 Работа с типографикой ⇢ 30:46 Работа с изображениями ⇢ 32:37 Работа с заголовками ⇢ 33:18 Форматирование кода ⇢ 35:12 Атрибуты кнопок ⇢ 36:10 Сопроводительный текст для ссылок и кнопок ⇢ 38:57 Ширина и высота элементов ⇢ 42:40 Смешение контента ⇢ 45:21 Ленивая загрузка изображений ⇢ 46:13 Преимущества ленивой загрузки ⇢ 47:51 Оптимизация кода ⇢ 49:47 Использование шрифтов ⇢ 51:07 Шрифты и свойства ⇢ 53:18 Маргины и утилитарные классы ⇢ 55:23 Организация стилей ⇢ 57:10 Пост-процессинг стилей ⇢ 59:08 JavaScript и читаемость кода ⇢ 01:02:35 Комментарии и поддержка кода ⇢ 01:03:50 Важность чистого и понятного кода ⇢ 01:04:35 Ресет и нормализация стилей ⇢ 01:05:31 Критика текущего подхода ⇢ 01:06:06 Рекомендация курса по CSS ⇢ 01:07:23 Вопросы и поддержка ⇢ 01:07:37 Нормализация и сброс стилей ⇢ 01:08:29 Проблемы с версткой и нормализацией ⇢ 01:10:19 Использование псевдоклассов и селекторов ⇢ 01:12:05 Проблемы с версткой и визуальными редакторами ⇢ 01:13:52 Обзор второй работы ⇢ 01:16:50 Анализ кода и SEO ⇢ 01:19:09 Применение атрибута aria ⇢ 01:20:35 Использование миксов и нормализация стилей ⇢ 01:21:50 Проблемы с единицами измерения rem ⇢ 01:23:37 Проблемы с телефонами и ссылками ⇢ 01:25:51 Использование background-image и img ⇢ 01:28:29 Ховер-эффекты и ссылки в футере ⇢ 01:30:18 Использование тэга time и пути в импортах ⇢ 01:32:34 Вопросы и ответы ⇢ 01:34:41 Размеры элементов и контент ⇢ 01:36:29 Эффекты наведения ⇢ 01:37:34 Стили и подходы ⇢ 01:39:31 Применение figcaption ⇢ 01:42:22 Проверка кода ⇢ 01:46:11 Ссылки в футере ⇢ 01:46:38 Проблемы с элементами и стилями ⇢ 01:47:57 Проблемы с JavaScript ⇢ 01:49:37 Проблемы с элементами и стилями ⇢ 01:51:41 Ответы на комментарии ⇢ 01:56:04 Нормализация стилей ⇢ 01:57:02 Использование Flexbox и Grid ⇢ 01:59:43 Отношение к Bootstrap ⇢ 02:01:03 Тренировка навыков работы с нативными инструментами ⇢ 02:02:02 Планы на стримы и курсы ⇢ 02:03:47 Использование BEM и React ⇢ 02:06:42 Использование ChatGPT ⇢ 02:10:31 Советы по использованию ChatGPT ⇢ 02:12:33 Джейк Верри и верстка ⇢ 02:13:28 Адаптация картинок и курсы ⇢ 02:14:58 Спринты и работа в команде ⇢ 02:17:21 Бэкенд и фронтенд ⇢ 02:19:19 Первая работа и опыт ⇢ 02:21:15 Лайфхаки и доступность ⇢ 02:22:52 Методология разработки ⇢ 02:24:23 Гайдлайн верстки ⇢ 02:25:49 Использование миксинов ⇢ 02:26:46 Конструкторы и языки программирования ⇢ 02:28:31 Сложные задачи на работе ⇢ 02:31:47 Использование единиц измерения ⇢ 02:33:46 Адаптивность и медиа-запросы ⇢ 02:35:10 Выбор стейт-менеджера ⇢ 02:37:10 Пиксель-перфект и компромиссы ⇢ 02:38:56 Взаимодействие с командой ⇢ 02:40:37 Возраст и карьера в IT ⇢ 02:43:18 Мероприятия и общение ⇢ 02:45:23 Искусственный интеллект и обучение ⇢ 02:47:51 Курсы и инструменты ⇢ 02:48:50 Отношение к Tilt ⇢ 02:49:45 Проблемы работодателей и обучение ⇢ 02:51:42 Советы для начинающих разработчиков ⇢ 02:52:29 Личный опыт и мотивация ⇢ 02:56:01 Платформа PREAX ⇢ 02:58:29 Вопросы и ответы ⇢ 03:00:53 Мероприятия в Москве и Санкт-Петербурге ⇢ 03:01:51 Поиск мероприятий и советы по поиску работы ⇢ 03:03:40 Подготовка к собеседованиям ⇢ 03:05:26 Использование шаблонов и подписка на комьюнити ⇢ 03:06:24 YouTube-каналы и записи трансляций ⇢ 03:07:33 Next.js и его значение ⇢ 03:08:30 Вопросы и обучение ⇢ 03:10:38 Ресурсы и технологии ⇢ 03:11:36 Время на обучение ⇢ 03:13:34 Заключение и благодарности 🟡 ССЫЛКИ ⇢ Сайт: https://preax.ru/?i=14679eff ⇢ Почта: join@preax.ru ⇢ Telegram: https://t.me/preax_ru #frontend #фронтенд #код_ревью #code_review #html #css #javascript