Для чего мы размечали блоки H1 с текстом, которые никто никогда не увидит т.к. они постоянно скрыты?
Когда мы вешаем на элемент класс .visually-hidden на элемент, то мы скрываем элемент, но не от поисковиков и скринридеров. Происходит визуальное скрытие элемента.
верстать нужно по мобильной версии или сразу учитывая все версии? (расстановка классов, некоторых декоративных элементов, контента и другое, отличия ведь серьезные)
Верстайте начиная только с мобильной версии. В такой последовательности, от мобильной до десктопной, вы увидите как модифициуется блок и какие свойства придётся изменить, чтобы изменить блок под новое расширение. Это вас научит думать наперёд и верстать без макетов вовсе.
В проекте "Погнали" нужно получить данные с "инпутов", расположенных на разных местах (не в одной форме). Как получить данные со всех "инпутов" после отправки формы?
В "Погнали?" нет таких мест. Вы можете смело обернуть несколько блоков в одну форму. Согласны, что в жизни такие интерфейсы случаются. В таком случае данные форм склеивают с помощью JavaScript.
В чем заключается скилл "Кроссбраузерная верстка"? Это просто добиться, чтобы сайт одинаково выглядел и вёл себя во всех браузерах? Или есть какие-то особые техники/знания, которые стоит освоить?
Если говорить просто, то вы всё правильно поняли. Подчеркну, что самое главное это даже не вид, хотя про него не стоит забывать, а функциональность. Если корзина товаров немного развалится, то ничего страшного, но если пользователь не сможет купить товар, то это уже не простительно.
Кто есть travis? По какому принципу он проверяет код? Это аналог валидатора W3C?
Travis - это некий бот, которому разработчики, в данном случае HTML Academy, поручает работу. Это есть некая автоматизация процессов. Например, одна из таких работ это проверка кода на валидность. Таких задач может быть сколько угодно и они могут быть какими угодно. Всё зависит только от задач, которые стоят перед разработчиком и его фантазией. Также "мы" проверяем весь ваш код на консистентность и много-много других проверок.
Вопрос про операционную систему. Во многих статьях вижу отзывы о том, что Windows - неудобная среда для разработчика, что на windows далеко не уедешь, что нужно ставить либо Linux/ubuntu, либо покупать Mac. Насколько это правда для верстальщика?
Это очень сложный вопрос и на него не может быть однозначного ответа. Основные проблемы это установка программ и консоль - для разработчика. Стандартному пользовтелю это всё не нужно.
В Ubuntu можно пользоваться консолью большую часть времени, например чтобы установить программу нужно сделать sudo apt install nodejs, а вспомните как это делается в Windows 10? зайти на сайт, скачать, установить. Но это не большая проблема, так как программы мы устанавливаем редко.
Вторая проблема это консоль. В Linux и Mac работает bash, а в Windows 10 cmd.exe, которая для разработчика действительно не лучший вариант. Но и это уже не особо проблема, так как в Windows 10 можно установить wsl или установить новый terminal в котором будет вообще какая угодно консоль.
В целом, совет такой. Пробуйте и только вы сможете понять, что вам удобнее.
Насколько сейчас является обязательным для верстальщиков знание адаптивной верстки, предпроцессоров и т.д. Вообще рассматривают ли работодатели претендентов, которые умеют верстать только фиксированные макеты?
Уже сейчас мобильные устройства обогнали декстопы по просмотрам, так что ответ, что знать нужно. В целом разобраться с адаптиновстью не сложно, если у вас есть база.
Расскажите про минусы BEM и про задачи, решение которых невозможно с использованием этой методологии, если такие задачи существуют. Подходит ли BEM-методология для верстки под WordPress и другие CMS?
БЭМ универсальная метология и поэтому решает большинство задач. Самые большие претензии к БЭМ это его длинные классы. К сожалению, БЭМ часто воспринимают как аксиому, которой нужно строго следовать. Хотя если почитать документацию, то она сама разрешает допущения. Если БЭМ где-то не помогает, а мешает, то в этих местах от него можно избавиться, но при этом в проекте будет БЭМ.
БЭМ метология подходит для CMS, если в CMS уже нет своей архитиктуры.
Немного не по теме. Критерий Б27. "Вёрстка идентично отображается в последних версиях браузеров Chrome, Firefox, Safari, Edge, Internet Explorer." Помню, что на первом уровне HTML+CSS нам говорили, что проверять в Internet Explorer (IE11) больше не надо будет. Что наш 27-й поток HTML-CSS-level-1 скорее всего последний кто тестирует свой код в IE11. Может это ошибка?
Ничего не изменилось. Нужно верстать и под IE11.
Какой метод разметки по бэм используется в самом Яндексе? От чего отталкиваться?
Пройдите в документацию - https://ru.bem.info/methodology/naming-convention/#%D0%B0%D0%BB%D1%8C%D1%82%D0%B5%D1%80%D0%BD%D0%B0%D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D0%B5-%D1%81%D1%85%D0%B5%D0%BC%D1%8B-%D0%B8%D0%BC%D0%B5%D0%BD%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F. Посмотрите какие предлагает сам яндекс.
Мы советуем придерживаться .block-name__element-name--modifier-name как самую распрастранённую.
Подскажите, появилась ли за последние несколько лет технология, которая может потеснить БЭМ в веб-разработке? Или БЭМ это надолго?
Если рассматривать методологии, то что-то прям, что может заместить БЭМ не появилось.
Что сейчас чаще всего используют при верстке, флекбоксы или гриды? Или это зависит от макета, его сетки?
И то и то. Гриды только-только начинает проникть в вёрстку на должном уровне и мы только начинаем знакомится с ним и с его мощью. Гриды скоро будет больше, но не потому, что они крутые, а потому что сейчас построением сеток занимается flexbox, что не является его работой, поэтому grid заберёт её.
Как БЭМ мне поможет если я фрилансер и верстатю в основном лендинги или проекты на разных заказчиков?
БЭМ это не только про именование классов. Это и структура проекта, и модульность ваших блоков. Фрилансерам очень помогает переимпользование блоков. Если вы хорошо по БЭМ сделали шаку, то вы смело можете её вынести в другой проект.
Чем больше вы проектов сделаете, тем больше у вас будет переимпользуемых компонентов.
Вопрос к разделу JS, объекты. Материал подан понятным языком и когда проходишь постепенно - все вроде бы Ок, но не понятно как в реальной жизни решать похожие задачи. Как представить и описать все варианты событий при той или иной ситуации и не облажаться:) Например, в интерактиве описана игра в кости. Для этого задействованы несколько функций и объектов. Как сконструировать все варианты событий такие как (допустим) "ничья", "несколько победителей" и ничего не пропустить? Или детальность поставленной задачи прилетает сверху и ненужно предугадывать варианты событий?
Тут всё зависит от ТЗ проекта/компоненты и от ваших навыков. Чем больше у вас опыта, тем лучше вы будете справляться с такими задачами и думают о больших нюансах.
Для разметки по БЭМ необходимо сначала визуально ознакомиться с макетом и прикинуть поведение элементов, и только после этого лучше начинать верстать?
Вне зависимости от ситуации всегда начинайте своё знакомство с макетом, потом разметка и потом css(классы).
Отдельный scss или less файл следует создавать только для блока и вкладывать через амперсанд элемент и модификатор? Или отдельный файл создаётся помимо блока так же и для элемента?
Подождите до лекции с препроцессорами.
Отдельные файлы создаются для блоков.
blocks/
header.scss
footer.scss
...
Элементы вкладывать с помощью амперсанда не нужно, так как это ухудшает чтение и поиск элемента, а вот модификтор можно. Об этом у нас есть критерий Д11
Насколько это правильно задавать блоку стили в виде background -color, background -image, итд или же лучше на этот случай применять "модификаторы"?
Такие модификаторы не в ходу. Потому что как только применится ещё одно свойство, то смысл от такого модификатора теряется. В вашем случае также не понятно на что меняется цвет. Был фон и он поменялся, что такая информация даёт?
Плохой пример
.footer--background-color {
background-color: green;
color: red;
}Поэтому о модификаторах следует думать как о темах и учится задавать вопрсоы. Почему компонент стал другим? Потому что в футере
.logo {}
.logo--footer {}Почему блок стал других? Потому что активный
.link {}
.link--active {}А какие свойства меняются нам уже не интересно.
Подскажите, есть ли разница в порядке записи классов по БЭМ для элемента (при миксе)? То есть первым пишется элемент, затем блок либо наоборот? Что имею в виду:
<nav class="main-nav">
<ul class="main-nav__list site-list">
.......
</ul>
</nav>Правильно писать class="main-nav__list site-list" или class="site-list main-nav__list" или без разницы? Спасибо!
Порядок такой. Вы миксуете блок к блоку или элемент, то есть миксуемый блок пишется вторым.
Такой вариант правильный
<nav class="main-nav">
<ul class="main-nav__list site-list">
.......
</ul>
</nav>