Как правильно создавать макеты для сайта?

Ранее не занимался UX/UI дизайном и не знаю, как, что должно работать

Нужно обьяснение по ошибкам в коде?

MrColdCoffee,
Все ровно не работает как нужно

Нужно обьяснение по ошибкам в коде?

MrColdCoffee, https://jsfiddle.net/urfno1e7/ Не работает даже, если развернуть вьюпорт на ширину экран. Размещается одной колонкой

Нужно обьяснение по ошибкам в коде?

1. Почему у вас 1000px - это ширина родителя ? Родитель для блока карточек должен быть 56.5% (должно быть 567px, но в диспетчере разработчика указано 561px. Почему так ?) от ширины контентной части (1003px). Учитывая фиксированные отступы 9px, ширина карточек должна быть 32.5% от ширины блока карточек.

3. Ширина header = 100%, что подразумевает от края до края ширины body (так как он родитель, и также имеет ширину 100%).

А у вас видимая часть вывалилась за эти 100%, потому что у внутреннего блока ширина 1003px (откуда она такая кривая взялась?). Но хедер закончился там, где закончились 100%.

"Но хедер закончился там, где закончились 100%" Что это значит ?
Что означает "видимая часть" ? И как задать в этом случаи ширину контентной части ?

Нужно обьяснение по ошибкам в коде?

А как тогда создать фиксированный отступ между ними ?
.product-wrapper{
// убрать внешний отступ справа
margin-right: 9px;
}
.product{
// 100 чего? тут нужно дописать %
width:100;
}

Почему при использовании свойства inline-block для выравнивания блоков положение одного из блоков плывет?

Ankhena, Также использую mdn, примеров "из жизни" нет. А относительно книг, что-то посоветуете ?

Почему при использовании свойства inline-block для выравнивания блоков положение одного из блоков плывет?

Ankhena, можете посоветовать книжки для обучения или интернет-ресурс с реальными примерами верстки, чтобы каждую тему разбирали по порядку ? Прохожу обучения на w3schools.com, но там обычно примитивные примеры без разбора: грубо говоря, есть три квадратика и нужно их разместить в ряд. Но когда дело доходит до верстки, использовать эту информацию не получается. Для каждого действия от меня новый вопрос задается, а так не должно быть.

Почему при использовании свойства inline-block для выравнивания блоков положение одного из блоков плывет?

Ankhena, Конечно возможно использовать flex для родителя, но интересует конкретный пример. Где-то ошибка в коде или чего-то не хватает ? Я только начинаю разбираться в верстке. Поэтому нужно понимать базовые вещи

Как правильно выровнять строчный элемент и его псевдоэлемент внутри блока div?

Ankhena,

/*Свойство Выравнивает элементы внутри flex-контейнера "shipping_container"по высоте - то есть "container_1" и его псевдоэлемент*/

Я имел в виду псевдоэлемент container_1.

У инлайновых элементов НЕТ высоты и ширины.
Но в вашем коде он не инлайновый, а блочный. Потому что у него родитель флекс.

То есть, если родитель flex , его дочерний элемент всегда block ?

Как правильно выровнять строчный элемент и его псевдоэлемент внутри блока div?

Ankhena, Я это и имел в виду

Как центрировать метку по вертикали?

Ankhena, то, что псевдоэлемент инлайн разве как-то повлияет на что-то, ичывая, что псевдоэлемент относится к классу инлайнового элемента. ? Также оставил пустой "content", но ничего не изменилось https://jsfiddle.net/emu5co9t/2/

Как центрировать метку по вертикали?

Делал так, но хотелось найти именно способ сделать автоматически

Как центрировать метку по вертикали?

Ankhena, Вы имеете в виду псевдоэлемент ? Если я правильно понял, использование ::before возможно только при условии наличия url "кружочка" и создать его с помощью стиля невозможно. Поэтому задал новый вопрос. Вот, что я имею в виду. https://jsfiddle.net/emu5co9t/1/

Как центрировать метку по вертикали?

Ankhena, эта правильная https://jsfiddle.net/emu5co9t/

Как сделать правильно отступы?

Hungryee, я для примера написал 20px. Конечно буду использовать %. Вопрос, что не так с таким методом разметки и какие могут быть другие способы - более корректны я имею в виду ?

Как сделать правильно отступы?

Hungryee, я понимаю, что "position: absolute это не «позиционирование относительно родителя»". У меня вопрос, почему нельзя использовать комбинацию absolute (грубо говоря, для внутреннего блока 1) и relative (блока 2, в котором находится блок 1) ? Если я не использую position, блок 1 размещается под блоком 2 (как и должно быть для div) и разместить в нужном месте его нельзя. У меня есть header, в который нужно вставить справа на расстоянии 20px от края 1 кнопку. Поэтому я использую для кнопки absolute относительно header (со свойством relative). Правильно ли это ?

Как сделать правильно отступы?

А разве не нужно позиционировать элементы относительно родителя для удобства? Тогда не понимаю: зачем вообще использовать position ?

Как сделать правильно отступы?

Ankhena, почему absolute не использовать ? Я использую, чтобы правильно элементы расставить из одного блока.
Относительно схлопывания. А как это поможет ? Может некорректно задал вопрос сначала. Сейчас при задании top для filter-container (панель с фильтрами) отсчет начинается от границы logo-name-box (лого с названием). Но при задании top для aside (рекламная панель) отсчет начинается сверху страницы

Как выровнять текст ссылки по центру?

1. Можете детальнее объяснить по псевдоэлементу ? Я использую для этого
"::before { content". Но при этом невозможно использовать top или bottom, чтобы выставить отступы так, как необходимо. Возможно только left и right. Как тогда использовать псевдоэлемент и какой именно ?

Как изменить часть фона при сохранении светотени?

Текстура хоть и повторяется, но стена изображена под углом и соответственно текстура в перспективе, то есть от начала и до конца размер повторяющегося элемента текстуры разный.
По этому нужно именно заменить текстуру на однородною, но с сохранением светотеневого рисунку. Возможно есть способ наложения светотеневого рисунка неоднородной текстуры, как изображено на картинке, на однородную ? Или как-то по подобии частотного разложения ?