Евгений Ращупкин
Евгений Ращупкин
  • 11
  • 38 671
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
Переглядів: 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 страницу с сервера; Как поисковые системы индексируют наши сайты; Что такое семантическая верстка и почему...

КОМЕНТАРІ

  • @thelongnickname
    @thelongnickname 19 днів тому

    Шикарно объяснение, что уроки по javascript)

  • @thelongnickname
    @thelongnickname 20 днів тому

    Спасибо за хорошее видео, лучшие объяснение материала

  • @secretcommander2519
    @secretcommander2519 Місяць тому

    Тут другая проблема чтобы на собес позвали я честно не знаю чем извернуться. Либо отказы где они не указывают причины, либо даже авто отказы, а ежели ответят так 80% просят тестовые или отвечают рассмотрят и дальше ghosting. 800 откликов и был только 1 собес. Стэк тоже самый и только я еще и бэк знаю. Мб из за того что я в вузе, но я на заочке всего 2 месяца максимум пропущу и то я согласен за свой счет. В общем не знаю, видимо придется не по профилю работать

    • @ЕвгенийАнисифоров-щ9р
      @ЕвгенийАнисифоров-щ9р Місяць тому

      Такая же ситуация, 2 года учу, не знаю как извернуться, 90% отказы, остальные кидают тестовые и игнорят, в лучшем случае напишут шаблонный отказ, резюме скоро будет лопаться от проектов и тестовых заданий, даже на хакатонах участвовал и учусь в университете на разработчика ПО) На собеседование даже попасть не могу

    • @eugenern_dev
      @eugenern_dev Місяць тому

      Тут проблема примерно в следующем. Чтобы что-то найти, надо крутить опыт. А учась в универе, ты много опыта не накрутишь, потому что это будет нереалистично выглядеть, поэтому и отказы. Все зависит от возраста, если 18-19 лет, то ты физически не мог уже 2-3 года клепать коммерческие проекты. Если 20+, то можно нарисовать условно 2 года опыта, но надо быть готовым пояснить за него, но в этом случае уже какие-то собесы пойдут.

    • @secretcommander2519
      @secretcommander2519 Місяць тому

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

    • @eugenern_dev
      @eugenern_dev Місяць тому

      Вот честно сказать, я только единожды сталкивался с проверками и звонками в предыдущие конторы. Это было в циан, где на собесе с hr мне сказали, что для них решающее значение имеет созвон с предыдущим руководителем, на мнение которого они будут опираться. Я не стал дальше собеситься, потому что а что если я его послал нах когда уходил, потому что он себя некорректно повел? Что, среди руководителей мало шакалов? Да большинство. Как это характеризует меня как разработчика или тимлида? Да никак. Желание созваниваться о самой конторе сразу много что говорит. В основном такое делают конченые конторы, в которых 100% делать нечего. Поэтому не надо париться о трудовой, хоть бумажной, хоть электронной. Работу с трудовой ведет просто человек на зп. Ему сказали написать туда текст, он написал. Что там до этого было написано никого не интересует. Я мог в прошлом вообще работать как угодно, где угодно просто по словесной договоренности, бартеру и тп. Это все понимают, поэтому проверять это бестолку.

  • @Romanychch
    @Romanychch Місяць тому

    Вопросы не спрашивают, а задают)

  • @Morok001
    @Morok001 Місяць тому

    Возможно очень глупый вопрос, но подскажите пожалуйста сам текст изначально сделан в какой-то программе для заметок или чего-то подобного? Просто похоже на то, что взяли скрины из заметок и красиво смонтировали и анимировали или все делалось на монтаже с нуля?

    • @eugenern_dev
      @eugenern_dev Місяць тому

      Добрый день! Все полностью делалось на монтаже, без скринов

  • @pablo_barnes7329
    @pablo_barnes7329 2 місяці тому

    Спасибо

  • @maady17
    @maady17 2 місяці тому

    Лютая база!

  • @l0nelystranger581
    @l0nelystranger581 2 місяці тому

    Спасибо за хорошее видео🙂

  • @krakhmalev_vlad
    @krakhmalev_vlad 2 місяці тому

    Сними видео: как из джуна стать мидлом.

  • @РоманШевцова
    @РоманШевцова 2 місяці тому

    Круто

  • @ДмитрийГусаров-к5о
    @ДмитрийГусаров-к5о 2 місяці тому

    в целом норм но есть оговорки, vite это аналог cra, а не вебпака

    • @eugenern_dev
      @eugenern_dev 2 місяці тому

      Webpack, vite, parcel, rollup, turbopack, esbuild - сборщики, которые способны собирать и реакт и вью и свелт и просто верстку и библиотеки компонентов. Cra - заранее настроенный проект на реакте, где в качестве сборщика используется webpack. И в целом cra уже давно умер, не поддерживается и не рекомендуется к использованию

    • @ДмитрийГусаров-к5о
      @ДмитрийГусаров-к5о 2 місяці тому

      @@eugenern_dev vite под капотом использует ролап и есбилт. Ты сказал что вебпак неиспользуют, а на самом деле это cra неиспользуют, а вебпак еще как используют, кто умеет его настраивать. По этому vite и популярный что его настраивать не нужно как вебпак, а cra умер

    • @eugenern_dev
      @eugenern_dev 2 місяці тому

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

    • @ДмитрийГусаров-к5о
      @ДмитрийГусаров-к5о 2 місяці тому

      @@eugenern_dev удачи

    • @eugenern_dev
      @eugenern_dev 2 місяці тому

      Взаимно

  • @BayOneTee
    @BayOneTee 2 місяці тому

    Мне кажется применение redux тут не очень оправданно. Сохранение данных в письме при переключении можно сделать штатными инструментами.

    • @eugenern_dev
      @eugenern_dev 2 місяці тому

      Да, можно. Это просто понятный пример, близкий к реальному. Сложно новичку объяснить, что редакс лечит props drilling, позволяет разнести код на слои и тп)

  • @Zaryad-od2qm
    @Zaryad-od2qm 2 місяці тому

    Если вы знайте react то чтобы быстро сверстать можете использовать shadcn

  • @Zaryad-od2qm
    @Zaryad-od2qm 2 місяці тому

    А где next js?

    • @eugenern_dev
      @eugenern_dev 2 місяці тому

      Расположен после этой карты)

  • @Айна-п9я
    @Айна-п9я 2 місяці тому

    Очень полезное видео, ёмко, по делу, а самое главное понятно😄

  • @kasdamato5158
    @kasdamato5158 2 місяці тому

    Классная карта я сделал себе скриншот. Пригодится для новичков. Я как раз постигаю фронтенд. У меня уже есть свой небольшой так сказать сверстанный полусайт в git на html и css в котором я пытаюсь применять новые полученные знания. Такой вопрос есть ли смысл интересоваться бэкендом на этапе обучения фронденду хотя бы в общих чертах и что можно посмотреть? С меня лайк подписка.

    • @eugenern_dev
      @eugenern_dev 2 місяці тому

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

    • @kasdamato5158
      @kasdamato5158 2 місяці тому

      @@eugenern_dev спасибо

  • @Rasenfull
    @Rasenfull 2 місяці тому

    Офигенный роадмеп, не позволите ли вы ссылку на макет с почтой?

    • @eugenern_dev
      @eugenern_dev 2 місяці тому

      Добрый день! Макета нету, брал для примера рабочую демку, чтобы кликабельные элементы продемонстрировать

    • @Rasenfull
      @Rasenfull 2 місяці тому

      @@eugenern_dev хорошо, спасибо)

  • @ВладимирТитов-х4л
    @ВладимирТитов-х4л 2 місяці тому

    Вопрос только где Docker, node js

    • @eugenern_dev
      @eugenern_dev 2 місяці тому

      Привет! Не добавлял потому, что нам не нужно разбираться в nodejs, чтобы писать фронт, а докер больше относится к теме деплоя.

    • @ВладимирТитов-х4л
      @ВладимирТитов-х4л 2 місяці тому

      @@eugenern_dev Ок, просто некоторые блогеры добавляют

  • @ВладимирТитов-х4л
    @ВладимирТитов-х4л 2 місяці тому

    Самая лучшая roadmap , все разъяснено на на примере и с описанием технологий, лайк

  • @анналистопадская-ь5я

    минимализм лаконизм, очень подкупает!

  • @InterestFactsRefef
    @InterestFactsRefef 2 місяці тому

    Отличное видео, жду гайд по Git

    • @torlant3742
      @torlant3742 2 місяці тому

      Зачем ждать? У яндекса хороший бесплатный курс по гиту. Его даже в универах проходить заставляют)

  • @newuser7926
    @newuser7926 2 місяці тому

    Привет. Ты ложишь видео про решения проблемы в верстке ? У меня бывают такие проблемы, что стили в css не работают или не так работают. Мне бы хотелось решить эту проблему.

  • @falcon94q
    @falcon94q 2 місяці тому

    Спасибо

  • @falcon94q
    @falcon94q 2 місяці тому

    И если есть возможность, ориентироваться именно по представленному вами Roadmap

  • @falcon94q
    @falcon94q 2 місяці тому

    Но в целом - шикарно!

  • @falcon94q
    @falcon94q 2 місяці тому

    Хорошо. Сделайте пожалуйста, небольшой проект на React TS, от самого начала и до конца, чтобы - как на Git загружать и тестировать, и всё остальное нужное для дела.

    • @dofaqq
      @dofaqq 2 місяці тому

      поддерживаю, отличная идея, можно такой проект как на видео был пример

    • @falcon94q
      @falcon94q 2 місяці тому

      @@dofaqq молодец

  • @Alex.Shalda
    @Alex.Shalda 2 місяці тому

    Классный ролик 🎉

    • @eugenern_dev
      @eugenern_dev 2 місяці тому

      Спасибо! 🙏

    • @falcon94q
      @falcon94q 2 місяці тому

      Хорошо. Сделайте пожалуйста, небольшой проект на React TS, от самого начала и до конца, чтобы - как на Git загружать и тестировать, и всё остальное нужное для дела.

  • @DaniilBaranov-l1f
    @DaniilBaranov-l1f 3 місяці тому

    Привет! А в какой программе ты рисуешь граффику для видео ?

    • @eugenern_dev
      @eugenern_dev 3 місяці тому

      Привет! Программы нет, делаю с помощью canvas

    • @DaniilBaranov-l1f
      @DaniilBaranov-l1f 3 місяці тому

      @@eugenern_dev Спасибо за ответ)

  • @DaniilBaranov-l1f
    @DaniilBaranov-l1f 3 місяці тому

    Привет! А в какой программе ты рисуешь граффику для видео ?

  • @MrStrangewow
    @MrStrangewow 3 місяці тому

    Всего лишь 15к просмотров. Это хорошо. Меньше конкурентов. Ультра годная инфа

    • @eugenern_dev
      @eugenern_dev 3 місяці тому

      Спасибо! Да и не все это делать будут)

    • @MrStrangewow
      @MrStrangewow 3 місяці тому

      Евгений, подскажите. Изучил базу по реакту и хочу сделать проект для портфолио на ts, react, sass. Подойдёт же простенький сайт по поиску фильмов с подключением АПИ?(и какую роль этот проект для портфолио играет для рекрутеров) И надо ли набивать руку на вёрстке макетов фигма(пиксель перфект) или хватит базовых знаний(не сложный адаптив) @@eugenern_dev

    • @eugenern_dev
      @eugenern_dev 3 місяці тому

      Такой сайт подойдет. Рекрутерам все равно, но тимлид может посмотреть код. Насчет верстки. Пиксель перфект это кринж, время тратить не стоит, но в целом на верстку я бы немного времени потратил, макетов 5 максимум сложных бы сделал.

  • @Bibimotik
    @Bibimotik 3 місяці тому

    Очень хорошее видео, заметил косяки в своем резюме. Очень хотелось бы увидел от вас что-то типо Roadmap по frontend. ❤

    • @eugenern_dev
      @eugenern_dev 3 місяці тому

      Благодарю! Сделаю про roadmap, ожидайте в ближайшее время

  • @danielluko7635
    @danielluko7635 4 місяці тому

    Про образование орнул знатно... Каким образом 3-4 года отсидки в шараге имеют хоть какое-то значение в работе

    • @avel8965
      @avel8965 Місяць тому

      Имеет значение, когда принимающая сторона - старая школа. Твое нерелеватное образование или его отсутствие подчеркнет твою несостоятельность в их глазах. Иными словами, голодающая попрошайка пришла просить большой оффер в крутую компанию. Именно так могут тебя воспринимать. У меня была на памяти такая шарага, в которой работали какие-то профессора из технических вузов и видеть они хотели именно 100%-ого технаря. Но таких ребят редко можно встретить.

    • @danielluko7635
      @danielluko7635 Місяць тому

      @@avel8965 Ну а релевантное образование в IT играет большую роль? Одно дело научное направление, а другое backend/frontend и остальные направления. Программирование всё в интернете а в вузах либо повторение из интернета + ненужные в работе низкоуровневые абстракции либо бизнес ради денег.

    • @alexandrcorbin
      @alexandrcorbin 5 днів тому

      @@avel8965 а зачем тебе в компанию, где сидит старая школа? Многим оно не нужно, например мне не хочется идти в компанию, где галера пилит около гос.бабки

    • @allo-bardo937
      @allo-bardo937 День тому

      ​@@danielluko7635насчёт шараги сказать не смогу, но вышку точно смотрят. Есть знакомый работающий прогером в гос. Компании (зарплата 350+ на руки). Отправили на вышку его учиться, паралельно.

  • @fuadmusayev2726
    @fuadmusayev2726 4 місяці тому

    Super❤❤❤

  • @nikolaikorol6640
    @nikolaikorol6640 4 місяці тому

    Хорошее видео, без воды

  • @MikhailElistratov
    @MikhailElistratov 4 місяці тому

    Спасибо за полезное видео! А как можно предусмотреть невложенные модальные окна? Например если на странице несколько кнопок открывающие разные модальные окна, указывать всем разные стейты? [isVisible1...], [isVisible2...] ... и т.д, в моем представлении это выглядит громоздко и костыльно, может есть проще вариант?

    • @eugenern_dev
      @eugenern_dev 4 місяці тому

      Привет! Либо каждому окну отдельный useState, либо один общий объект стейта для всех окон, но внутри 1 поле - одно окно. Также можно сделать компонент, например CreateDataButton, в который входит триггер (кнопка) и окно. Тогда будет по одному usestate на каждый подобный компонент

  • @НікітаКорчемний-г4ч
    @НікітаКорчемний-г4ч 4 місяці тому

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

  • @dw_tv3992
    @dw_tv3992 5 місяців тому

    а чем фотка на пляже отличается от фотки в горах, контекст то у них один - отдых? без негатива

    • @eugenern_dev
      @eugenern_dev 5 місяців тому

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

  • @dmitriybogdanov7349
    @dmitriybogdanov7349 6 місяців тому

    Спасибо. Очень круто. Можешь подсказать в какой программе ты делал резюме в видео. Или подскажи в каких программах его лучше сделать.

    • @eugenern_dev
      @eugenern_dev 6 місяців тому

      Привет! Именно в видео делал в canvas

  • @PanicWassano
    @PanicWassano 6 місяців тому

    Вот тут реально по делу, сам когда-то сталкивался с этой сложностью.

  • @nouchance
    @nouchance 6 місяців тому

    Spasibo!

  • @тимур_атмосферный
    @тимур_атмосферный 6 місяців тому

    Четко и по делу. Спасибо за видео!

  • @ВладиславШитов-о6й
    @ВладиславШитов-о6й 6 місяців тому

    Евгений, почти никогда не пишу комментарии, но ваши видео - это настоящая находка! Успехов в развитии канала!

    • @eugenern_dev
      @eugenern_dev 6 місяців тому

      Большое спасибо за обратную связь! Вам желаю успехов во всех делах!

  • @krakhmalev_vlad
    @krakhmalev_vlad 6 місяців тому

    Чел, ты крутой. Такую манеру изложения информации я еще не встречал. Верю что твой канал может взлететь. Похоже что пока ты больше нацелен на новичков, но хотелось бы увидеть твои видео на более сложные темы

    • @eugenern_dev
      @eugenern_dev 6 місяців тому

      Спасибо за обратную связь! Какие темы Вам будут интересны?

    • @balcony_warrior
      @balcony_warrior 6 місяців тому

      @@eugenern_dev я не автор комментария, но лично мне было бы интересно послушать про доступность и адаптивные изображения. По JS, интересны темы всплытия, замыкания, ну и в целом какие ходовые задачки для джунов часто встречаются

  • @eugenern_dev
    @eugenern_dev 6 місяців тому

    Помощь в составлении резюме и поиске работы: - Временно не консультирую, сильно загружен

  • @ИскандерШамгунов-я7ж
    @ИскандерШамгунов-я7ж 6 місяців тому

    Классное видео, особенно анимации хорошо сделаны, приятно было смотреть. Спасибо за ваш труд.

  • @Evgenii-fb6kr
    @Evgenii-fb6kr 6 місяців тому

    Полезное видео. Спасибо.

  • @InterestFactsRefef
    @InterestFactsRefef 6 місяців тому

    привет а когда ролик по созданию резюме?

    • @eugenern_dev
      @eugenern_dev 6 місяців тому

      Привет, следующим выйдет, сделаю на днях)

  • @МаксимЧумак-и4у
    @МаксимЧумак-и4у 6 місяців тому

    Очень полезное видео

  • @mr.playeroffical826
    @mr.playeroffical826 6 місяців тому

    Очень классное видео! Спасибо автору! Вопрос. А видео делалось при помощи кода?)) если да, то что использовалось?)

    • @eugenern_dev
      @eugenern_dev 6 місяців тому

      Привет! Спасибо за обратную связь! Да, с помощью кода, я же разработчик) Typescript, canvas

  • @diamondskrt
    @diamondskrt 6 місяців тому

    Визуально видео очень приятно смотреть, офигенная графика и анимация

    • @eugenern_dev
      @eugenern_dev 6 місяців тому

      Спасибо! Стараюсь чтобы было красиво и информативно)