165 минут, 5 этапов (25 минут + 5 минут передышка)
HTML — 40 слайдов 2 этапа
CSS — 57 слайдов 2,5 этапа
15 минут перерыв
DevTools — 8 слайдов 0,5 этапа
слайд 4
Два основных тега: <head> и <body>.
<head> содержит то, что не отображается на странице (кроме имени вкладки), но доносит информацию до браузеров о масштабировании, кодировке, совместимости, также связанную с выдачей в поисковиках и т.д. Еще в нем указываются теги отвечающие за запросы на внешние ресурсы (стили, скрипты, шрифты)
<body> содержит структуру и элементы видимой части документа (сайта). Существуют категории содержимого разделяющие теги по предназначению и помогающие определит что во что можно вкладыват.
<!DOCTYPE html>
<html lang="ru">
<head>
...
</head>
<body>
...
</body>
</html> слайд 5
С помощью тегов мы описываем содержательные сущности нашей страницы.
Тег: <имя_тега>
<html> <body> <section> <article> <div> <h1> <nav> <ul> <ol> <li> <p> <a> <strong> <em> <time> <mark>
<img> <video> <audio> <form> <input> <button> <label>
<!-- Комментарий! --><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <!-- параграф -->
<а> 10 способов научиться верстать за час! </а> <!-- ссылка -->слайд 6
<!-- Одиночные -->
<hr> <!-- разделитель -->
<br> <!-- перенос строки -->
<input type="text"> <!-- поле ввода -->
<img src="logo.png"> <!-- изображение -->слайд 7
<!-- Вложенност тегов -->
<p>
Текст абзаца с <em>выделением</em>
</p>
<ul>
<li>элемент списка</li>
<li>элемент списка</li>
</ul>
<!-- Ошибки вложенности -->
<!-- Неверный порядок закрытия -->
<strong><em>жирный</strong> курсив</em>
<!-- Правила для отдельных тегов -->
<ul>
<p>название списка</p>
<li>элемент списка</li>
</ul>слайд 8
Атрибуты нужны чтобы расширить возможности отдельных тегов и более гибко управлять содержимым контейнеров.
<!-- Атрибутов может быть несколько. -->
<!-- Некоторые теги не могут использоваться без атрибутов. -->
<img src="image.jpg">
<input type="text" name="email">
<p class="important">...</p>
<input type="submit" class="btn">
<div class="logo">...</div>
<span class="date">...</span> - Описывает один или несколько классов (группа предметов или явлений, обладающих общими признаками), к которым принадлежит элемент.
- Помогает уточнить смысл и предназначение каждого тега.
- Множественные классы перечисляются через пробел.
- Наш лучший друг при разметке!
<a class="social-btn social-btn-vk">
Мы ВКонтакте
</a> Как называт классы?
Имя класса должно отражать назначение элемента, а не рассказывать о его внешнем виде. Воздержитесь от транслита.
Типовые имена классов
https://github.com/yoksel/common-words
слайд 8
Абстрагируемся от полученной информации. Важно понимат, что предшествует процессу верстки потому что от этого зависит как будет считан код и будет ли считан вообще.
Также так как вы разработчики, то вам в первую очеред интересно чтобы ваши скрипты исполнялис пока ползовател любуется чудесными цветными кнопочками.
слайд 10
<head>
<meta charset="utf-8"> <!-- Наиболее распространненая кодировка — UTF-8 и в болшинстве случаев если ее не указат, то ничего не сломается, но лучше всегда подстраховатся. -->
<meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- один из множества приветов от internet explorer'a, за которые его многие не любят -->
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- параметры viewport важные для правилного отображения размеров страницы на многообразии девайсов. Не имеет смысла если верстка фиксированная -->
...
</head>слайд 11
<head>
...
<title>HTML5 Noveo Software University</title>
<script src="app.js" defer></script>
<link rel="manifest" href="site.webmanifest"> <!-- немного о светлом будущем -->
<link rel="apple-touch-icon" href="icon.png">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="css/normalize.css">
</head>слайд 12
<!-- СИНХРОННАЯ ЗАГРУЗКА -->
<head>
<script src="app.js"></script> <!-- Остановит (заблокирует) рендер на время считывания и исполнения скрипта-->
</head><!-- АСИНХРОННАЯ ЗАГРУЗКА -->
<head>
<script src="app.js" async></script>
</head>
<!-- ИЛИ -->
<head>
<script src="app.js" defer></script>
</head>слайд 13
Отличие async от defer в том, что первый это просто асинхронное считывание и исполнение скрипта, а второй — асинхронное считывание, но исполнение согласно порядку следования скриптов с этим атрибутом.
слайд 14
Тогда, даже в старых браузерах (IE 9 и старше), не поддерживающих асинхронную загрузку скриптов, отрисовка не будет начинаться заново.
<head>
...
<script src="app.js" async></script>
<link rel="stylesheet" href="main.css">
</head>слайд 15
Текущий стандарт языка HTML 5.2 рекомендован к использованию 14 декабря 2017 года.
Но ест и живой стандарт не привязанный к версиям, имеющий отделную рабочую группу и спецификацию.
Не стоит пугатся внешней нагроможденности спецификации, главное понимат, что это главный ориентир и источник знаний об HTML. Обращайте внимание толко на нужные вам пункты и поля в них.
Все это справедливо также и в отношении CSS.
Например: #3 Semantics, structure, and APIs of HTML documents https://www.w3.org/TR/html52/dom.html#dom Описывает как теги можно вкладывать друг в друга
#4 The elements of HTML https://www.w3.org/TR/html52/semantics.html#semantics Описывает что обозначает каждый тег
слайд 16
Всего тегов чут болше сотни
слайд 17
Мы рассмотрим 4 категории из 10. И толко нескмолко базовых тегов в каждой из них.
слайд 18
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Значение: заголовки смысловых разделов.
Особенности: желателен один <h1> на странице. Нежелательны пропуски в уровнях заголовков на странице. Внутри <article> заголовков можно начинать с <h1>. На главных страницах не всегда рисуют заголовок первого уровня.
Ошибки: определение уровня заголовка по размеру текста на макете. Не весь крупный текст – заголовки.
слайд 19
Общая группа для болшей части тегов. Это се теги входящие в <body>.
Сюда входят и некоторые теги из Metadata content.
<a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>,<bdo>, <bdi>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <ul>, <var>, <video>, <wbr> and Text.
Мы рассмотрим:
- ul/ol
- p
- table
- div
слайд 20
Значение: неупорядоченный и упорядоченный списки.
Особенности: если существует набор однородных элементов, порядок которых не важен (пункты меню), то используем <ul>. Если порядок элементов важен, то используем <ol>.
Ошибки: использовать что-то, кроме <li> в качестве дочерних элементов списка. Неправильная разметка вложенных списков.
слайд 21
Последовательность фразового содержания, как обычный параграф, только универсальнее.
- Параграф в HTML — это структурный элемент, а не смысловой.
- Параграфы можно явно выделять с помощью тега <p>. Если не выделите явно, они всё равно будут существовать неявно.
- <p> — универсальный контейнер для группировки мелких фразовых элементов, отделения их друг от друга, особенно, когда нужна стилизация.
слайд 22
<p> — это не текст как считают многие, а контейнер для фразового содержания.
Также он по умолчанию имеет свойство dislpay: block, а не dislpay: inline.
Значение: параграф (как структурный элемент, а не как смысловой).
Особенности: использовать внутри параграфов не фразовые элементы, например, списки.
слайд 23
Значение: многомерные связанные данные (табличные данные).
Особенности: простейший, двумерный, вид связанных данных – «параметр-значение». Его можно описать как таблицей, так и списком определений (тег <dl>). Когда измерений больше (параметр-знач1-знач2-…), подходят только таблицы.
Ошибки: использовать таблицы для сеток. Не использовать таблицы там, где они нужны.
слайд 24
Значение: универсальный контейнер без собственного значения.
Особенности: смысл этому элементу придаётся с помощью атрибута class.
Ошибки: «Дивянка» – когда в разметке используется слишком много дивов. Однако в фреймворках, где верстаются кастомные компоненты этого не избежат. Эта гран сложно уловима и блуждает в зависимости от специфики проекта.
слайд 25
Ранше их называли строчными, но "это было давно и неправда". На самом деле нынешняя классификация более деталная и содержит в себе гораздо менше противоречий. Однако противоречий стало болше для тех, кто до сих пор верстает по стандартам XHTML 4.
Как правило это теги содержащие текст, однако в эту группу также входят привычные "блочные" теги (button, img, input, video и т.д.).
<abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> and plain text (not only consisting of white spaces characters).
Рассмотрим:
- <img>
- <a>
- <button>
- <b>
- <br>
- <span>
слайд 26
Значение: контентное изображение.
Особенности: есть обязательный атрибут src. Хороший тон — задавать атрибут alt, который описывает содержание картинки.
Ошибки: использовать контентные изображения вместо фоновых. Использовать фоновые изображения вместо контентных.
слайд 27
Значение: ссылка.
Особенности: если атрибута href нет, то это заглушка («здесь будет ссылка при других обстоятельствах»). Ссылка без href используется, чтобы не делать ссылку на саму себя.
Ошибки: использовать вместо ссылок другие элементы, например, кнопки.
слайд 28
Значение: кнопка.
Особенности: лучше явно указывать атрибут type. Его значение по умолчанию — submit, но часто нужно значение button. Кнопка не обязательно должна находиться в пределах формы. Часто это просто интерактивный элемент, который «оживляется» с помощью JavaScript. Например, кнопка закрытия всплывающего окна.
Ошибки: использовать вместо кнопок другие элементы, например, ссылки или спаны.
слайд 29
Ошибки: слишком частое неуместное использование. Путание с em и strong.
<i> — был просто курсивом, а сейчас обозначает дополнительное выделение (например, для иностранных слов, технических терминов) или просто курсивное начертание текста;
<b> — просто выделял текст полужирным, а сейчас обозначает стилистическое усиление текста (например, для ключевых слов) или просто полужирное начертание;
<em> — обозначал выделение, а сейчас обозначает экспрессивно-эмоциональное выделение, т.е. слово или фразу, произнесённые иначе;
<strong> — обозначал большее усиление экспрессии, а сейчас обозначает высокую важность, что, в общем, почти то же самое (ещё большее усиление или важность сейчас определяется уровнем вложенности).
слайд 30
Значение: перенос строки.
Ошибки: слишком частое использование. Использование вместо параграфов.
Злоупотреблять нельзя. Тег используется при обоснованном разбиении текста на строки.
слайд 31
Значение: Универсальный фразовый элемент без собственного значения.
Aналогичен div, толко для текста.
Особенности: Смысл этому элементу придаётся с помощью атрибута class.
слайд 32
Формы — главный способ взаимодействия ползователей с сайтом. Они позволяют отправлят различные данные на сервер для обработки. Таким образом без них никак не обойтис, если конечно вашей целю не является простая публикация контента без обратной связи.
слайд 33 Тег, объединяющий поля для ввода информации.
Основные атрибуты:
- method="get" — метод, который использует браузер для отправки формы
- action="URI" — адрес программы, которая обрабатывает информацию переданную через форму
- autocomplete — автозаполнение
<!-- Простая форма, которая пошлёт GET запрос -->
<form action="">
<label for="GET-name">Name:</label>
<input id="GET-name" type="text" name="name">
<input type="submit" value="Save">
</form>
<!-- Простая форма, которая пошлёт POST запрос -->
<form action="" method="post">
<label for="POST-name">Name:</label>
<input id="POST-name" type="text" name="name">
<input type="submit" value="Save">
</form>Вложенные формы запрещены.
слайд 34
- <input>
- <button>
- <select>
- <label> —
- <textarea> —
слайд 35
Внешний обзор видов input Универсалный интерактивный элемент форм, чи функции и внешний вид зависят от аттрибута type
слайд 36
Здесь мы видим, что аттрибутами можем задавать тип каждому тегу, а разница заключается в способе указания содержимого в кнопке текста.
слайд 37
Также разница заключается в удобстве стилизации содержимого. Еще у этих тегов различается API.
слайд 38
Часто путают эти две сущности и считают, что одно заменяет другое. Использование атрибута placeholder не отменяет необходимость использования
слайд 39
слайд 40
выпадающий список, работает в сочетании с тегом <option> внутри
слайд 41
Каскадные таблицы стилей — это простой механизм для добавления стилей (например шрифты, цвета, расстояния) на веб-документы. С недавних пор CSS не имеет общей версии (с версии CSS3), а развивается по модуной системе, грядут 4ые версии несколких основных модулей (селекторы, цвета, медиа-запросы).
слайд 43
слайд 44
Селекторы — с их помощю мы можем указыват на конкретный элемент или группу элементов чтобы задат им свойства css
слайд 45
Мы можем совмещат селекторы для более точного указания и повышения специфичности.
слайд 46
Помогают комбинироват — КО. Но можно и перестаратся, а сложные селекторы плохо влияют на производителност.
слайд 47
Специфика CSS такова, что обязателно образуются конфликты стилей. Назначение стилей происходит с трех сторон:
- От разработчика. Наследование и стили из разных источников.
- От ползователя. Специалный интерфейс, масштабирование, расширения.
- От агента. Стили по умолчанию для тегов.
В этой ситуации нам помогают разобратся каскад и специфичност.
Каскад — принцип по которому наиболшим приоритетом среди равных обладает нижнее (последнее) правило.
слайд 48
Равные правила — это те, что обладают равной специфичностю
слайд 49
Синего, потому что объявление класса по специфичности весомее, чем любое количество селекторов по тегу. Соответственно вопрос: как это работает?
слайд 50
Специфичность — максимално возможное количество тегов, которые селектор может выбрат. Селектор тем специфичнее, чем менше тегов он выбирает.
Специфичность определяется по селектору. Если она одинаковая, то побеждает то правило, которое расположено ниже в коде. Чем проще селекторы, тем меньше проблем с расчётом специфичности
Явно специфичност нигде не указывается, это и не нужно.
слайд 51
!important это не пятый уровен специфичности, а скорее отделная специфичност в которой любое правило будет весомее правил без !imp. Для правил с !imp работают те же принципу сравнения между собой. Однако до такого доводят толко в верстке писем, а в обычной верстке это крайне дурной тон.
слайд 52
Псевдо — мнимый, ложный.
слайд 53
Псевдоэлементы не являются элементами, на входят в классификацию и не имееют семантики. after — добавляет текст или контейнер в начало содержимого элемента к которому был применен before — добавляет текст или контейнер в конец содержимого элемента к которому был применен
Распространное заблуждение — считат что эти псевдоэлементы добавляются вне элемента.
Псевдоэлементы ::before и ::after появляются в визуальной модели DOM в инструментах разработчика после применения стилей.
слайд 54
Если свойство content не задано, то псевдоэлемент не отобразится в визуальной модели DOM.
Тоже самое, если псевдоэлемент скрывается при помощи display: none
Это происходит потому, что перед тем, как добавить псевдоэлемент, браузер вычисляет все стили, которые относятся к этому псевдоэлементу. Если обязательного свойства content нет, то и отображать псевдоэлемент незачем.
слайд 55
слайд 56
Легко перепутат :active {} и :focus {}. Элемент (например кропка) входит в состояние фокуса, когда мы переходим к нему при помощи клавиши Tab, чаще всего это проявляется как outline. Активное состояние проявляется во время нажатия на элемент клавишей мыши или space, на кнопка в этом состоянии выглядит нажатой.
слайд 57
слайд 58
слайд 59
В HTML-документе каждому элементу на странице соответствует прямоугольная область (бокс или блок).
В CSS сохранилос определение элементов как блочные и строчные. Это не про семантику, а про поведение на практике. Также существует понятие box-model с помщю которого определяются размеры элементов.
слайд 60
Расположение
- Блочный элемент всегда с новой строки.
- Строчный — справа от предыдущего строчного, если достаточно места.
Боксовая модель
- Блочный элемент по умолчанию занимает 100% ширины.
- Строчный — только необходимое ему пространство.
Пробелы между блоками
- Eсли в содержимом парного тега есть только пробел, табуляция или перенос строки, то браузер отобразит это как пробел между - словами.
Отступы
- K строчным элементам применяется только горизонтальные margin и padding
слайд 61
Дословно | Перевод с MDN | Как называт
Содержимое | Внутренняя област | Контент
Набивка | Поля | Пэддинг (верхний, нижний...)
Граница | Рамка | Бордер (верхний, нижний...)
Поле | Отступы | Мерджин (верхний, нижний...)
слайд 62
Content-box по умолчанию width + padding + border Padding-box width + border Border-box width
Блок в правом нижнем углу это css-шутка. Не ищите в них смысл, они могут быт не понятны. Также они не всегда напрямую относятся к содержанию слайда.
слайд 63
Вложенные блочные элементы занимают 100% доступной ширины родительского блока (без учета padding и border), если значение width не задано.
margin: auto центрирует блочный элемент внутри контейнера только по горизонтали, но если контейнер имеет свойство display: flex, то и по вертикали тоже.
слайд 64
слайд 65
- block
- inline
- inline-block
- flex
слайд 66
-
Расположение — как у inline элемента
-
Ширина — по умолчанию как у inline, но может быть задана любая
-
Боксовая модель — полноценная, как у block.
-
Пробелы между блоками — как у inline.
-
Margin — как у block, но без margin collapse
-
Вертикальное выравнивание inline-block зависит от контента (по умолчанию — baseline)
слайд 67
объясняется на примере
слайд 68
объясняется на примере
слайд 69
margin: auto центрирует блочный элемент внутри контейнера только по горизонтали, но если контейнер имеет свойство display: flex, то и по вертикали тоже. Это относительно новый и простейший способ центрирования.
Центрироват по вертикали можно с помощю — vertical-align: inline-block, transform, position: absolute, calc(), grid layout.
слайд 70
Адаптивная верстка — подход, предполагающий изменение дизайна в зависимости от поведения пользователя, размера экрана, платформы и ориентации девайса. Другими словами, страница должна автоматически подстраиваться под разрешение, изменять размер картинок и т.д. Это позволит устранить нужду в разработке дизайна для каждого нового устройства, появляющегося в продаже.
слайд 71
- screen / print / speech / all — тип устройства
- min-width / max-width — ширина окна браузера
- min-height / max-height — высота окна браузера
- min-device-width / max-device-width — ширина устройства (используется для стилизации iframe)
- min-device-height / max-device-height — высота устройства (используется для стилизации iframe)
- orientation ( landscape / portrait ) — ориентация устройства
слайд 72
Рассматривается на примере
слайд 73
Немного типографики никому не помешает. Все таки болшая част веба состоит из текста.
слайд 74
Кавычки в названии шрифтов даже если это несколко слов не обязателны. Если шрифт не скачивается и у ползователя его нет, то он будет заменен резервным и так до типа шрифта.
serif, sans-serif, monospace, cursive, fantasy
слайд 75
Может задаваться
- ключевыми словами: normal, bold, lighter, bolder;
- числами: от 100 (самый тонкий) до 900 (самый толстый).
слайд 76
Значения:
- italic — курсив
- normal — по умолчанию
слайд 77
Наиболее часто использующиеся единицы измерения:
- px — пиксели
- rem — зависит от размера шрифта документа и масштабирования страницы
- em — зависит от размера шрифта родительского элемента
- vw — зависит от размера окна браузера
слайд 78
Длинна строки обычно задается обычным числом, которое означает коэффицент умножения. Также можно указыват в других единицах. Важное свойство в построении вертикалного ритма.
слайд 79
Форматы цветов:
- шестнадцатеричный: #fa452e; #000;
- RGB(A): rgb(0, 150, 0); rgba(0, 0, 0, 0.5);
- HSL(A): hsl(222, 33%, 66%); hsl(222, 33%, 66%, 0.8);
- цветовые константы: red, blue, green...
слайд 80
Значения:
- none — значение по умолчанию, отменяет изменение регистра;
- lowercase — все буквы строчные;
- uppercase — все буквы заглавные;
- capitalize — каждое слово начинается с большой буквы.
слайд 81
Обширная тема, проблем с ней достаточно. Лучше глянут ролик по ссылке.
Подключение через google fonts наиболее простой и беспроблемный способ в случае исползования несистемных шрифтов. В случае подлючения иных и хранящихся локално в идеале нужно подключат шрифты форматов woff2 и woff (именно в таком порядке). При подлючении разных начертаний следует дават одинаковое имя в свойстве font-family, на разные значения в свойствнах font-weight и font-style. Это сэкономит вам и вашим коллегам время вдалнейшем.
@font-face {
font-family:'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}слайд 82
Любимые свойства всякого в душе дизайнера. С их помощю делается уйма css-хаков.
слайд 83
Наиболее часто исползуемые виды рамки solid, dotted, dashed
слайд 84
border-radius на самом деле не имеет отношения к рамке. Так уж исторически сложилос что в названии присутствует слово border. Связано это с тем, что это свойство когда-то было под префиксом.
слайды 85—90
Сокращенное свойство. Каждое значение можно задават отделно.
слайд 91
С их помощю можно делат третего измерения. Также можно имитироват несколко рамок
слайд 92
Задается свойством text-shadow. Moжно имитироват 3D-текст и обводку. Можно хитро имитироват внутреннюю тен.
слайд 93
Мы можем задават изображения на фон прописывая пути к файлу через css. Также можно задават фону градиенты, цвета и их сочетания.
слайд 94
body {
background-color: #ff0000;
}
body {
background-image: url('images/bg.jpg');
}слайд 95
.block {
background-repeat: no-repeat;
background-size: cover;
}background-size: cover;
Ширина или высота изображения равна ширине или высоте блока, часть изображения может обрезаться.
слайд 96
Bootstrap 4, Foundation, Sceleton, Material Design Light, Semantic UI.
Готовые компоненты, система сеток, стандартизированный стил (темы), кроссбраузерност и кроссплатформенност, доступност.
слайд 97
Актуалная версия 4.0.0
Более 20 видов компонентов.
слайд 98
Впихнут огромное множество функций и инструментов в весма ограниченный интерфейс это как пытатся в формате двух с половиной часов рассказат основы верстки. Толко разработчикам ДевТулзов это не удалос, а мне да — шутка.
DevTools предоставляет веб-разработчикам глубокий доступ к внутренним возможностям браузера и их веб-приложений. Используйте DevTools для эффективного отслеживания проблем раскладки, установки точек останова JS и получения информации об оптимизации кода.
слайд 99
- Chrome DevTools 👑
- Firefox Developer Tools
- Safari Web Development Tools
- Microsoft Edge Developer Tools
слайд 100
- Показывает DOM-дерево
- Позволяет изменять/ добавлять/ удалять DOM-узлы, атрибуты, классы, данные.
- Показывает псевдо-элементы
слайд 101
- Показывает CSS-правила для активного элемента (специфичность сверху-вниз)
- Добавление/выключение свойств
- Изменение правил для псевдо-классов
- Указывает источники CSS-правил
- Отслеживание каскада
- Просмотр вычисленных значений
слайд 102
- Запуск JS-команд
- Взаимодействие со скриптами
- Просмотр лога событий и отслеживание сообщений об ошибках
слайд 103
- Изменение исходных файлов приложения
- Экспорт изменений
- Оtслеживание версий файла
- Snippets
слайд 104
- Информация o ресурсax — размер, тип, время и т.д.
- Детали ответов с сервера
- Временная шкала сетевых запросов
слайд 105
Просмотр коротких видео с возможностями