Демонстрация первого кейса сделана немного не удобно, на мой взгляд.
Существующий интерфейс не обладает достаточной наглядностью и чем больше кода, тем труднее становиться найти, какие CSS правила относятся к какому элементу на странице.
На мой взгляд самый простой и наглядный инструмент для понимания того как сверстана страница, это Инструмент разработчика в любом браузере.
Т.е. навел курсор на HTML-элемент и он выделился на странице.
Кликнул по этому элементу, сразу увидел его CSS свойства.
Думаю даже в существующем интерфейсе это можно реализовать.
Вспомогательные стили (Outline.css) меня только запутывают, мне было проще пролистать всю демонстрацию до конца. Скопировать готовый код в редактор кода (VSCode) и через его плагин (LiveServer) в браузере изучить готовую верстку, обращая внимание только на те моменты которые мне были не понятны.
На фото ниже я показал как примерно можно реализовать такой интерфейс.
К такому интерфейсу было бы не плохо добавить переключатель, который бы включал и отключал содержание сайта, оставляя только голую сетку в виде цветных блоков, без текстов и картинок, но с явно выраженными границами, - то самое переключение на Outline.css.
Так же мне не до конца понятно в каких случаях отступы реализовывать с помощью марджинов, а в каких случаях с помощью паддингов. Просто бывают ситуации когда можно реализовать нужный отступ и так и эдак.
Но это просто идея, реализация на ваше усмотрение, в принципе и так все не плохо.
PS. В навыках встречаются мелкие опечатки, в место line-height указано font-height, или в макете 70px, а теории к навыку 60px и т.д. Три или четыре ошибки уже нашел, но не запомнил где именно они были, т.к. не особо критично для меня.
Вот еще момент по этой теме.
Почему мне не очень нравится добавление вспомогательных стилей. В текущей реализации, очень много визуального мусора, какие-то элементы, которые даже выползают на скроллбар( два оранжевых прямоугольника).
Плюс названия классов блоков наползают друг на друга. На фото ниже показал эти моменты.
Так же само описание демонстрации. В данном случае звучит так:
Добавим вспомогательный стилевой файл. Временно переопределим стилевые правила для <body> и добавим вспомогательное фоновое изображение.
Как работает в данном случае логика человека, который не умеет всё схватывать на лету.
Ничего не понял, но заметил что появились четыре новых элемента с классом card-photo-preview-item
Лезем во вкладку index.html и интуитивно ищем в начале документа этот класс.
Находим его и понимаем что это мелкие фотки товара.
Ок значит будем стилизовать их. Читаем еще раз описание, а там ни с того, ни с сего идет стилизация тега <body>.
Сразу возникает вопрос а при чем тут тег <body>, зачем нужно переопределять его свойства?
Почем ему были заданы такие ширина и высота этому тегу <body> ?
Свойство CSS для тега <body> background-image: url(‘card.jpg’) - это что за картинка, понятно что это вспомогательное фоновое изображение упомянутое выше. Но как понять где начинаются линии из Outline.css, а где сама картинка?
Ок, наверно дальше будет объяснение всем этим вопросам, поэтому листаю дальше… и нифига.
И вот на таких мелочах я переодически буксую, при том что прошел все интерактивные курсы и вроде бы есть какие-то знания.
Идея №2. Мне было бы удобно, если бы объяснение строилось в обратном порядке.
Сначала демонстрируется готовый макет, а на нем уже объясняются мелкие детали. Для чего тот или иной блок сделан подобным образом.
