DevTools для верстальщика за 20 минут! Изучаем инструменты разработчика

DevTools - панель разработчика в браузере. Любой уважающий (и не уважающий) себя верстальщик просто обязан знать, что это такое, как ей пользоваться. В этом видео я расскажу об основных функциях инструментов разработчика для верстальщика, покажу небольшие, но удобные фичи по работе с ней. Поехали!

Данное видео выходит первым в большом цикле роликов "True верстка". В данном цикле я расскажу о самых, на мой взгляд, важных темах в верстке, опуская ненужные основы (как писать тег, что такое CSS).

Таймкоды:
00:00 - 01:39 - Вступление
01:40 - 02:54 - Базовые настройки
02:55 - 04:00 - Редактирование разметки
04:01 - 07:47 - Работа с CSS
07:48 - 08:35 - Про ошибки в пути до файла
08:36 - 09:17 - Вкладка sources
09:18 - 10:29 - Вкладка console
10:30 - 11:20 - Вкладка network
11:21 - 13:54 - Device toggle toolbar (эмулятор разных устройств)
13:55 - 16:14 - Вкладка application (про local storage и cookies)
16:15 - 18:39 - Проверка сайта на переполнение простым способом
18:40 - 19:38 - Заключение, анонс практических видео по верстке сайта

Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.

#обучение #devtools #maxgraph #верстка

[igrrrra]

Картинка - отличная. Звук - хороший. Ролики - замечательные, особенно темы. Так держать!!!

[КоляФтомиченко]

Все отличнинько ! Ждем новых видосов !

[gio]

за body contenteditable респект, как же я до этого не додумался))

[m_mariya_mari]

не представляю себе верстки без DevTools. но до конца никак не разберусь в ее тонкостях. спасибо за фишки в работе с ней. могу подкинуть еще одну - недавно узнала и теперь постоянно пользуюсь - при нажатой клавише Shift можно менять представление цвета в ColorPicker, из шестнадцатиричного, например, в RGB.

[maxgraph]

Друзья, пишите мнение о звуке и картинке. Да и вообще общее впечатление о последних роликах, стараюсь сделать лучше и нужен фидбэк. Кстати, как вам смена названия канала?))

У меня так же появились телеграм-канал и чат. Там пока, естественно пусто, но давайте наполнять :)

[arturvoznyuk]

Спасибо, нужно пересмотреть, попробовать.)

[ForeverDarkDeath]

12:05 встроенная проверка очень часто вообще показывает отсебятину. лучше не пользоваться ею, а использовать какой-нибудь нормальное расширение для проверки, например: ViewPort Resizer - он и лучше и точнее.

[majes]

можете пожалуйста дать ссылку на рубрику с конца ролика

[sencorio]

хм, как, оказывается, звуковая подложка улучшает восприятие!) Прежнее название, как по мне, было лучше, т.к. точнее описывало наполнение, взгляд цеплялся, если ищешь это.

[АлександрОвчинников-пд]

Привет, ты говорил что сделаешь видео про плагин emmet, если попросим) Не работают некоторые настройки, например, как у тебя в видео вводишь тег ul с двумя классами, он потом автоматически у меня не добавляет(у тебя добавляет когда ты набираешь тэг с классами в конце автоматически тэг ul с классами добавляется, видел в плейлисте, где ты верстаешь сайт по макету с 8 видео), только если задействуешь ul, а только в нем наберешь классы(у меня). Как автоматизировать? или например когда надо 2 li в списке ты пишешь *2 тоже не работает. То есть у меня плагин стоит, тэги распознает в html, автоматически добавляет класс например, но такие тонкости не функционируют.

[lisofsky]

писать нужно более 7 слов для продвижения видео !
и лайкать чужие комменты !
п.с. если хотите сказать спасибо !

[NikolayPetrov-ut]

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