- 11
- 38 671
Евгений Ращупкин
Приєднався 12 сер 2023
Привет! Меня зовут Женя и я работаю на позиции тимлида по фронтенду с 2020 года. Здесь я постараюсь научить вас всему, чему научился сам за 8 лет коммерческой разработки. Подпишись и не пропустишь всю важную информацию, которая точно поможет тебе улучшить свои хард и софт скиллы.
FRONTEND ROADMAP на 2025. Что учить и зачем на примере
Привет! В этом видео я покажу вам свою карту изучения frontend разработки с полного нуля. Технологий существует огромное множество, однако не все они нужны для успешного старта карьеры фронтенд разработчиком. В этом видео рассмотрим самое необходимое.
00:00 Введение
00:18 Особенности карты
01:05 Макет
01:41 HTML
02:00 CSS
02:23 Javascript
03:07 Git
03:52 React
06:02 Vite
06:17 Redux / Zustand / Effector
08:10 Tailwind
09:06 SASS
09:38 Typescript
10:38 Тестирование
11:00 Сеть / Браузеры
11:19 Заключение
Телеграм канал Reflect - t.me/reflect_it
#frontend #html #css #react #redux #typescript #javascript #git #tailwind #jest #vitest #effector #zustand #vite #webpack
00:00 Введение
00:18 Особенности карты
01:05 Макет
01:41 HTML
02:00 CSS
02:23 Javascript
03:07 Git
03:52 React
06:02 Vite
06:17 Redux / Zustand / Effector
08:10 Tailwind
09:06 SASS
09:38 Typescript
10:38 Тестирование
11:00 Сеть / Браузеры
11:19 Заключение
Телеграм канал Reflect - t.me/reflect_it
#frontend #html #css #react #redux #typescript #javascript #git #tailwind #jest #vitest #effector #zustand #vite #webpack
Переглядів: 4 711
Відео
Эффективное резюме FRONTEND разработчика. Как составить?
Переглядів 6 тис.6 місяців тому
Привет! В этом видео разберем как правильно составлять эффективное резюме на позицию frontend разработчика. Рассмотрим базовые составляющие резюме: фотографию, описание, образование и опыт работы. Пройдемся по каждому пункту и определимся что в каждом из них писать, а что нет. Поговорим о хард и софт скиллах. Помощь в составлении резюме и поиске работы: - Временно не консультирую, сильно загруж...
CSS Grid: как работает + реальный пример
Переглядів 7976 місяців тому
Привет! В этом видео мы изучим CSS Grid. CSS Grid - это мощный инструмент для создания красивых и адаптивных макетов на вашем сайте. С помощью гридов мы можем быстрее и проще верстать сложные макеты. Разберем из чего гриды состоят: контейнер, грид линии, грид полосы, грид ячейки и тд. Разберем подходы и способы размещения элементов в сетке с помощью всех возможных свойств. Содержание: 00:00 Вст...
Блочная модель CSS: Margin, Border, Padding, Box-Sizing
Переглядів 5887 місяців тому
Привет! В этом уроке мы рассмотрим что такое блочная модель CSS и разберемся как браузер рассчитывает размеры элементов. Узнаем как работают свойства padding, border, margin, влияющие на общий размер блоков. Разберем способ изменения принципа расчета размеров свойством box-sizing. Посмотрим где можно отследить размеры блоков и инструментах разработчика браузера. Содержание: 00:00 Введение 00:25...
CSS Переменные: как работают + реальный пример (кастомные свойства)
Переглядів 1 тис.8 місяців тому
Привет! В этом уроке мы познакомимся с CSS переменными (кастомными свойствами). Рассмотрим где мы можем их использовать, познакомимся с синтаксисом, способом применения, областью видимости и наследованием. Научимся применять значения переменных к элементам. Рассмотрим функцию var(), способы ее применения и ограничения. Также разберем правило @property, которое позволяет более тонко настроить ка...
CSS Position: как работает + реальный пример
Переглядів 2,5 тис.8 місяців тому
Привет! В этом уроке мы рассмотрим как работает CSS свойство Position. По отдельности разберем как работают значения static, relative, absolute, fixed и sticky. Рассмотрим на реальном примере. Содержание: 00:00 Вступление 00:24 Значения Position 00:37 Static 01:18 Relative 01:44 Absolute 03:25 Fixed 04:08 Sticky 05:22 Контекст наложения и z-index 06:40 Практический пример #css #css3 #csspositio...
CSS Flexbox за 9 минут простыми словами
Переглядів 1,3 тис.9 місяців тому
В этом видео мы рассмотрим все самые важные свойства CSS Flexbox. Вы сможете наглядно посмотреть как работает каждое из них, а также как эти свойства работают в сочетании друг с другом. Таймкоды: 00:00 Вступление 00:30 Flex контейнер 00:57 Flex оси 02:04 Flex wrap 02:51 Justify Content 03:59 Align Items 05:03 Поведение элементов при смене осей 05:36 Gap 06:01 Order 06:37 Flex Grow 07:13 Flex Sh...
React компонент MODAL. React Portal + Framer Motion
Переглядів 7889 місяців тому
Привет! В этом видео я расскажу как создать и использовать универсальный React компонент Modal с использованием React Portal и анимациями Framer Motion. Вы сможете использовать этот реакт компонент в любых своих проектах. Компонент Modal не зависит от размера контента в нем. При слишком длинном содержимом, он просто вертикально растянется и к окну браузера добавится полоса прокрутки. Содержание...
Быстро найти работу во FRONTEND. Самый эффективный способ
Переглядів 17 тис.9 місяців тому
Как быстро найти работу FRONTEND разработчиком? Рассказываю самый быстрый и эффективный способ. Как выиграть в конкуренции Junior разработчику чтобы работодатель вас заметил. 00:00 Введение 00:30 Верстка 1:07 JavaScript 1:52 Как выбрать фреймворк? 2:14 React 2:59 Redux 3:25 Typescript 4:02 Важные правила 6:36 Не делайте это
HTML для начинающих. Все что нужно знать, без воды
Переглядів 3,5 тис.10 місяців тому
Сегодня мы познакомимся с HTML. За 50 минут мы научимся верстать HTML страницы, познакомимся с тегами для верстки форм, таблиц, семантических блоков, навигации. ✅ Что вы узнаете: Что такое архитектура клиент - сервер; Что такое HTTP и зачем он нужен; Что такое браузер, как он получает HTML страницу с сервера; Как поисковые системы индексируют наши сайты; Что такое семантическая верстка и почему...
Шикарно объяснение, что уроки по javascript)
Спасибо за хорошее видео, лучшие объяснение материала
Тут другая проблема чтобы на собес позвали я честно не знаю чем извернуться. Либо отказы где они не указывают причины, либо даже авто отказы, а ежели ответят так 80% просят тестовые или отвечают рассмотрят и дальше ghosting. 800 откликов и был только 1 собес. Стэк тоже самый и только я еще и бэк знаю. Мб из за того что я в вузе, но я на заочке всего 2 месяца максимум пропущу и то я согласен за свой счет. В общем не знаю, видимо придется не по профилю работать
Такая же ситуация, 2 года учу, не знаю как извернуться, 90% отказы, остальные кидают тестовые и игнорят, в лучшем случае напишут шаблонный отказ, резюме скоро будет лопаться от проектов и тестовых заданий, даже на хакатонах участвовал и учусь в университете на разработчика ПО) На собеседование даже попасть не могу
Тут проблема примерно в следующем. Чтобы что-то найти, надо крутить опыт. А учась в универе, ты много опыта не накрутишь, потому что это будет нереалистично выглядеть, поэтому и отказы. Все зависит от возраста, если 18-19 лет, то ты физически не мог уже 2-3 года клепать коммерческие проекты. Если 20+, то можно нарисовать условно 2 года опыта, но надо быть готовым пояснить за него, но в этом случае уже какие-то собесы пойдут.
@@eugenern_dev хрюх можно так обойти и получить собес, даже если скажем посмотреть как другие собесы проходят и придумать историю че делал в нарисованной компании, есть еще такая штука в рф электронная трудовая книга, но можно сказать что работал по гпх, тогда есть шанс что они позвонят туда где работал и тогда молиться чтобы поняли и простили за проступок и взяли в контору. щас еще черти сервисы делают всякие которые резюме сохраняют и сверяют чтобы крутить сложнеее стало. но в отчаянии можно попробовать
Вот честно сказать, я только единожды сталкивался с проверками и звонками в предыдущие конторы. Это было в циан, где на собесе с hr мне сказали, что для них решающее значение имеет созвон с предыдущим руководителем, на мнение которого они будут опираться. Я не стал дальше собеситься, потому что а что если я его послал нах когда уходил, потому что он себя некорректно повел? Что, среди руководителей мало шакалов? Да большинство. Как это характеризует меня как разработчика или тимлида? Да никак. Желание созваниваться о самой конторе сразу много что говорит. В основном такое делают конченые конторы, в которых 100% делать нечего. Поэтому не надо париться о трудовой, хоть бумажной, хоть электронной. Работу с трудовой ведет просто человек на зп. Ему сказали написать туда текст, он написал. Что там до этого было написано никого не интересует. Я мог в прошлом вообще работать как угодно, где угодно просто по словесной договоренности, бартеру и тп. Это все понимают, поэтому проверять это бестолку.
Вопросы не спрашивают, а задают)
Возможно очень глупый вопрос, но подскажите пожалуйста сам текст изначально сделан в какой-то программе для заметок или чего-то подобного? Просто похоже на то, что взяли скрины из заметок и красиво смонтировали и анимировали или все делалось на монтаже с нуля?
Добрый день! Все полностью делалось на монтаже, без скринов
Спасибо
Лютая база!
Спасибо за хорошее видео🙂
Сними видео: как из джуна стать мидлом.
Круто
в целом норм но есть оговорки, vite это аналог cra, а не вебпака
Webpack, vite, parcel, rollup, turbopack, esbuild - сборщики, которые способны собирать и реакт и вью и свелт и просто верстку и библиотеки компонентов. Cra - заранее настроенный проект на реакте, где в качестве сборщика используется webpack. И в целом cra уже давно умер, не поддерживается и не рекомендуется к использованию
@@eugenern_dev vite под капотом использует ролап и есбилт. Ты сказал что вебпак неиспользуют, а на самом деле это cra неиспользуют, а вебпак еще как используют, кто умеет его настраивать. По этому vite и популярный что его настраивать не нужно как вебпак, а cra умер
Я сказал, что свежие проекты стартуют с Вит, а раньше стартовали с вебпак. Нет никакого смысла настраивать то, что можно не настраивать, поэтому вебпак используется на проектах, которые пишутся и поддерживаются давно. Ни одного нового проекта с вебпак я не знаю
@@eugenern_dev удачи
Взаимно
Мне кажется применение redux тут не очень оправданно. Сохранение данных в письме при переключении можно сделать штатными инструментами.
Да, можно. Это просто понятный пример, близкий к реальному. Сложно новичку объяснить, что редакс лечит props drilling, позволяет разнести код на слои и тп)
Если вы знайте react то чтобы быстро сверстать можете использовать shadcn
А где next js?
Расположен после этой карты)
Очень полезное видео, ёмко, по делу, а самое главное понятно😄
Классная карта я сделал себе скриншот. Пригодится для новичков. Я как раз постигаю фронтенд. У меня уже есть свой небольшой так сказать сверстанный полусайт в git на html и css в котором я пытаюсь применять новые полученные знания. Такой вопрос есть ли смысл интересоваться бэкендом на этапе обучения фронденду хотя бы в общих чертах и что можно посмотреть? С меня лайк подписка.
Пока бэкенд лучше не трогать, разве что понимание REST пригодится, чтобы через API работать.
@@eugenern_dev спасибо
Офигенный роадмеп, не позволите ли вы ссылку на макет с почтой?
Добрый день! Макета нету, брал для примера рабочую демку, чтобы кликабельные элементы продемонстрировать
@@eugenern_dev хорошо, спасибо)
Вопрос только где Docker, node js
Привет! Не добавлял потому, что нам не нужно разбираться в nodejs, чтобы писать фронт, а докер больше относится к теме деплоя.
@@eugenern_dev Ок, просто некоторые блогеры добавляют
Самая лучшая roadmap , все разъяснено на на примере и с описанием технологий, лайк
минимализм лаконизм, очень подкупает!
Отличное видео, жду гайд по Git
Зачем ждать? У яндекса хороший бесплатный курс по гиту. Его даже в универах проходить заставляют)
Привет. Ты ложишь видео про решения проблемы в верстке ? У меня бывают такие проблемы, что стили в css не работают или не так работают. Мне бы хотелось решить эту проблему.
Спасибо
И если есть возможность, ориентироваться именно по представленному вами Roadmap
Но в целом - шикарно!
Хорошо. Сделайте пожалуйста, небольшой проект на React TS, от самого начала и до конца, чтобы - как на Git загружать и тестировать, и всё остальное нужное для дела.
поддерживаю, отличная идея, можно такой проект как на видео был пример
@@dofaqq молодец
Классный ролик 🎉
Спасибо! 🙏
Хорошо. Сделайте пожалуйста, небольшой проект на React TS, от самого начала и до конца, чтобы - как на Git загружать и тестировать, и всё остальное нужное для дела.
Привет! А в какой программе ты рисуешь граффику для видео ?
Привет! Программы нет, делаю с помощью canvas
@@eugenern_dev Спасибо за ответ)
Привет! А в какой программе ты рисуешь граффику для видео ?
Всего лишь 15к просмотров. Это хорошо. Меньше конкурентов. Ультра годная инфа
Спасибо! Да и не все это делать будут)
Евгений, подскажите. Изучил базу по реакту и хочу сделать проект для портфолио на ts, react, sass. Подойдёт же простенький сайт по поиску фильмов с подключением АПИ?(и какую роль этот проект для портфолио играет для рекрутеров) И надо ли набивать руку на вёрстке макетов фигма(пиксель перфект) или хватит базовых знаний(не сложный адаптив) @@eugenern_dev
Такой сайт подойдет. Рекрутерам все равно, но тимлид может посмотреть код. Насчет верстки. Пиксель перфект это кринж, время тратить не стоит, но в целом на верстку я бы немного времени потратил, макетов 5 максимум сложных бы сделал.
Очень хорошее видео, заметил косяки в своем резюме. Очень хотелось бы увидел от вас что-то типо Roadmap по frontend. ❤
Благодарю! Сделаю про roadmap, ожидайте в ближайшее время
Про образование орнул знатно... Каким образом 3-4 года отсидки в шараге имеют хоть какое-то значение в работе
Имеет значение, когда принимающая сторона - старая школа. Твое нерелеватное образование или его отсутствие подчеркнет твою несостоятельность в их глазах. Иными словами, голодающая попрошайка пришла просить большой оффер в крутую компанию. Именно так могут тебя воспринимать. У меня была на памяти такая шарага, в которой работали какие-то профессора из технических вузов и видеть они хотели именно 100%-ого технаря. Но таких ребят редко можно встретить.
@@avel8965 Ну а релевантное образование в IT играет большую роль? Одно дело научное направление, а другое backend/frontend и остальные направления. Программирование всё в интернете а в вузах либо повторение из интернета + ненужные в работе низкоуровневые абстракции либо бизнес ради денег.
@@avel8965 а зачем тебе в компанию, где сидит старая школа? Многим оно не нужно, например мне не хочется идти в компанию, где галера пилит около гос.бабки
@@danielluko7635насчёт шараги сказать не смогу, но вышку точно смотрят. Есть знакомый работающий прогером в гос. Компании (зарплата 350+ на руки). Отправили на вышку его учиться, паралельно.
Super❤❤❤
Хорошее видео, без воды
Спасибо за полезное видео! А как можно предусмотреть невложенные модальные окна? Например если на странице несколько кнопок открывающие разные модальные окна, указывать всем разные стейты? [isVisible1...], [isVisible2...] ... и т.д, в моем представлении это выглядит громоздко и костыльно, может есть проще вариант?
Привет! Либо каждому окну отдельный useState, либо один общий объект стейта для всех окон, но внутри 1 поле - одно окно. Также можно сделать компонент, например CreateDataButton, в который входит триггер (кнопка) и окно. Тогда будет по одному usestate на каждый подобный компонент
Боже мой, спасибо большое что показал как создавать вложенные окна, я по всему интернету искал пару недель назад, не смог на тестовом это реализовать В итоге со временем решение само меня нашло
Рад что помог!
а чем фотка на пляже отличается от фотки в горах, контекст то у них один - отдых? без негатива
Вопрос резонный) просто мне было лень искать другую картинку, а эта под рукой была. В резюме такую не поставлю конечно
Спасибо. Очень круто. Можешь подсказать в какой программе ты делал резюме в видео. Или подскажи в каких программах его лучше сделать.
Привет! Именно в видео делал в canvas
Вот тут реально по делу, сам когда-то сталкивался с этой сложностью.
Spasibo!
Четко и по делу. Спасибо за видео!
Рад помочь!
Евгений, почти никогда не пишу комментарии, но ваши видео - это настоящая находка! Успехов в развитии канала!
Большое спасибо за обратную связь! Вам желаю успехов во всех делах!
Чел, ты крутой. Такую манеру изложения информации я еще не встречал. Верю что твой канал может взлететь. Похоже что пока ты больше нацелен на новичков, но хотелось бы увидеть твои видео на более сложные темы
Спасибо за обратную связь! Какие темы Вам будут интересны?
@@eugenern_dev я не автор комментария, но лично мне было бы интересно послушать про доступность и адаптивные изображения. По JS, интересны темы всплытия, замыкания, ну и в целом какие ходовые задачки для джунов часто встречаются
Помощь в составлении резюме и поиске работы: - Временно не консультирую, сильно загружен
Классное видео, особенно анимации хорошо сделаны, приятно было смотреть. Спасибо за ваш труд.
Полезное видео. Спасибо.
привет а когда ролик по созданию резюме?
Привет, следующим выйдет, сделаю на днях)
Очень полезное видео
Очень классное видео! Спасибо автору! Вопрос. А видео делалось при помощи кода?)) если да, то что использовалось?)
Привет! Спасибо за обратную связь! Да, с помощью кода, я же разработчик) Typescript, canvas
Визуально видео очень приятно смотреть, офигенная графика и анимация
Спасибо! Стараюсь чтобы было красиво и информативно)