Тестирование верстки с помощью Devtools

  Рет қаралды 3,633

code_sisters

code_sisters

Күн бұрын

Докладчица: Ирина Шляпина
Презентация: drive.google.com/file/d/1J5Ga...
Ссылка на проект: github.com/liveldi/kirjs_layouts
Инструмент для хрома: chrome.google.com/webstore/de...
00:00 План
00:37 Введение
02:00 Работа в Figma
03:53 Сравнение макета и вёрстки
11:35 Адаптивность
14:16 Вопросы

Пікірлер: 9
@aliakseibabitski7316
@aliakseibabitski7316 6 ай бұрын
Спасибо, реально полезный для джунов видос. Продолжайте, хорошая подача материала😊
@user-bl8on1vq4o
@user-bl8on1vq4o 3 ай бұрын
Спасибо, очень полезно!
@Diotima1
@Diotima1 Жыл бұрын
Отличное видео, пусть оно будет первым в цикле обучающих видео этой авторки.
@code_sisters
@code_sisters Жыл бұрын
спасибо, передадим! думаю ей будет очень приятно.
@Cher_Ivan
@Cher_Ivan 7 ай бұрын
Спасибо ведущей, хороший материал. От себя немного добавлю: 1. При переключении адаптива с веб на мобилку и обратно лучше дополнительно обновлять страницу. Сильно удивитесь тому, как верстка изменится после рефреша (если говорить о выборе конкретного устройства) 2. Разные цвета в браузерах: был опыт, когда цвета элементов в Firefox и Chrome отличались. Про Internet Explorer и говорить не стоит - там вообще верстка расплывалась (благо, последние годы его исключили на тех проектах, где работал) 3. При тестировании верстки надо понимать разницу между отступами padding/margin. Тогда сразу станет понятно «где и почему» нужно использовать конкретный вид. В макетах этого нет будет, а вот в верстке может сыграть злую шутку: достаточно изменить ширину браузера, перетягивая влево-вправо границу девтулза. Если отступы подобраны правильно, то резких перекосов в верстке не будет. Если вместо padding-right разработчик прикрутил margin-right (к примеру), то элементы могут начать сваливаться ниже 4. На одном из проектов было пожелание «избавиться от излишней вложенности» элементов DOM. Напр: div1 с отступом1, в него вложен div2 с отступом2, в него вложен div3 с цветом и тп. Это все можно было вкрутить в один div вместо 3 5. Когда создается верстка, лучше сразу договориться о добавлении нормальных id элементов. Очень поможет при дальнейшей автоматизации: гораздо удобнее создавать локаторы по «человекочитаемым» id, чем потом городить xpath с множеством contains(@class,’’). Зачастую эти id вообще не добавляются на старте проекта, а переделывать потом готовые страницы - долго и дорого
@code_sisters
@code_sisters 5 ай бұрын
спасибо за развернутое дополнение!
@user-wl5mz3eq8u
@user-wl5mz3eq8u Ай бұрын
Много ли у вас на работе проверки вёрстки?
@pavelm.2449
@pavelm.2449 3 ай бұрын
Добрый день! подскажите пожалуйста название инструмента о котором в конце говорили, для определения ширины и т.п. спасибо
@code_sisters
@code_sisters 2 ай бұрын
Здравствуйте! Ссылка на инструмент в описании под видео
PixelPerfect все что нужно знать
37:58
От 0 до 1
Рет қаралды 15 М.
Glow Stick Secret 😱 #shorts
00:37
Mr DegrEE
Рет қаралды 127 МЛН
ПЕЙ МОЛОКО КАК ФОКУСНИК
00:37
Masomka
Рет қаралды 8 МЛН
[2023] Основы верстки сайта с нуля! HTML5 и CSS3 - верстка макета
1:06:37
DevTools: Анализ бага, используя Network tab
11:15
Lucy Ladybug QA
Рет қаралды 1,3 М.
42 приема Midjourney V6 | Большой гайд 2024
16:46
ITSCOOL | Школа новых пайплайнов в CG
Рет қаралды 7 М.
⚡ Замена компонентам? Большое обновление Фигмы 2024
19:34
Study Kvo. Обучение веб-дизайну и UX UI
Рет қаралды 16 М.
Chrome DevTools для тестировщиков (QA)
40:25
Олег Малышев
Рет қаралды 3,2 М.
APPLE УБИЛА ЕГО - iMac 27 5K
19:34
ЗЕ МАККЕРС
Рет қаралды 97 М.
Any Sound & Call Recording Option Amazing Keypad Mobile 📱
0:48
Tech Official
Рет қаралды 325 М.
СЛОМАЛСЯ ПК ЗА 2000$🤬
0:59
Корнеич
Рет қаралды 2,4 МЛН