Глобальное: Как научиться верстать?

Вопрос в заголовке.
Собственно, где взять Roadmap для чайников?
Какие ресурсы только не рыл, везде советуют одно и то же:
А зайдите на хтмлбук и начинайте изучать теги... Теги, карл. Изучать.
Или там на хтмлакадеми - вот вас то там за 20 уроков научат. Ага, цвет текста менять и шрифт. И бордеры еще делать у дивов.

Но нигде не найду именно обучение в режиме - "от важного к деталям", "от крупного к мелочам".
Например - смотрю на макет. И
- Шаг 1:
- Шаг 2:
- Шаг 3:
-... шаг 99.

Ну и никак не могу подступиться к верстке, ибо возникает масса вопросов
- основной - как правильно устанавливать установку блоков друг относительно друга. flex, grid, margin, table, position - что в каком случае выбирать. И для какого "уровня вложенности" чем лучше одно либо другое.
- верстать "от крупного к мелкому" или наоборот?
- в каком случае инлайн элементы, в каком block, в каком flex
- зависимость размера элементов в зависимости от размеров экрана - закладывать сразу или сначала делается основной макет, потом уже все стили переделываются под адаптивность
- единицы измерения - в каких случаях жестко приколачивать в пикселях, а в каких - от прочих "относительных" единиц. как это связано с адаптивностью и прочее.
- ::before и ::after - вообще странные селекторы, из доки не понятно. Смотришь на верстку - на одном сайте какая нить иконка через обычный img делается, на другом сайте через ::before, на третьем - вообще backgroundом. Шта?
- соответственно, из предыдущего вопроса рождается следующий - для меня сложность в том, что одно и то же в css можно сделать десятком способов. Но так же не бывает, чтобы все были одинаково правильными.
- вложенность селекторов и правильное именование классов. В каком случае обходиться без классов, или всегда обязательно использовать.

Хочется получить знания именно "правильного подхода" к верстке. А не попиксельным подгоном, как на многих ютуб каналах, где берут макет и начинают - вот здесь позишном сдвинем вниз, а здесь маргином вправо. Но нигде не объясняется, почему В ДАННОМ КОНКРЕТНОМ СЛУЧАЕ НАДО ТАК, а не по-другому.

В сети миллиарды сайтов и страниц, но нормальный гайд, как это освоить быстро и ПРАВИЛЬНО, найти невозможно.
Буду признателен помощи.

Добавлено через 7 минут
Да, даже на этом сайте пишут: Практика и еще раз практика.
Оно понятно.

Но вопрос звучит "Как правильно построить дом". А на это ответ "Строить и только строить"
Так может говорить человек, который уже что-то построил. И то, не факт что он это делает правильно.

Если ты никогда не строил, то начинать со строительства - глупо.
Нужно для начала понимать технологию самого строительства.
Также и здесь. - если нет понимания, что лучше - span или div inline, то вряд ли получится что-то путнее.

0

0xFFFFFF,

Вообще, если честно, я ожидал от вас какой-то реакции, потому что лично я приложил немало усилий, чтобы написать (и дать ссылки к) полезные вещи по этой важной теме!

И вот - время проходит, а вы вообще не реагируете на ответы по теме!

п.с. Я с фигме не работаю, пишу только на чистий HTML и CSS, и поэтому я не могу комментировать выложенный сейчас вами проект!

0

Круто, спасибо!

Добавлено через 6 минут
Сорян, запарился немного.
Ссылки чувака из VK видел, объясняет просто и доходчиво, обязательно посмотрю!

Много книг перечислил, только по мне книги технические читать - это так себе вариант.
Но обязательно посмотрю, спасибо.

Сообщение от ivanov_333 п.с. Я с фигме не работаю, пишу только на чистий HTML и CSS, и поэтому я не могу комментировать выложенный сейчас вами проект!

Дак в фигме сделан макет дизайнерский (вместо фотошопа). Верстка понятное дело на HTML и CSS

Добавлено через 1 минуту
У меня была серьезная проблема, как блоки размещать горизонтально, flex решает (хоть и говорят, что 5% браузеров не умеют флекс - ну это их проблемы ))))

0

TestCastaway, ну не хватает самой малости, какой то интерактивной реакции на ссылки, адаптивности, общих паттернов в отступах, ну и конечно картинок с правильно повёрнутой дробью, браузер возможно исправит ваши ошибки, но проект надо сдавать с нулём ошибок

0

Mailo,
- интерактивной реакции на ссылки - это понятно, задача была отрисовать макет на html
- до адаптивности пока не добрался, знаю что с помощью медиа-запросов это все можно делать. Хочу сначала со статичной верской разобраться
- про слеш, понял )

- "общих паттернов в отступах" -вот это самое интересное. Я делал через PerfectPixel, не очень строго, но +/- на пару пикселей где-то отклоняется, все совпало. Но самое что меня бесит (и кажется неправильным) - это все и вся подгонять маргинами (и паддингами), указывая их в пикселах. Это вообще правильный подход? Там же вроде как надо делать через em хотя бы (шагами через сколько то десятых) - но в этом случае не попадешь точно в макет. Или "правильные" дизайнеры рисуют макеты с учетом этого?

0

0xFFFFFF,

Вот один очень хороший сайт с бесплатными шаблонами HTML и CSS. Я даю вам ссылку на раздел "Free CSS Layouts" — вы можете просмотреть и изучить эти шаблоны: https://www.free-css.com/free-css-layouts/page1

Потом в разделе "Free CSS Templates" вы также можете посмотреть шаблоны целых сайтов - лучше начать с последней страницы 296 - где находятся самые старые шаблоны.


Кроме того, в своем блоге я загрузил свой проект — простой пример современного сайта, полностью построенного на чистом HTML и CSS. Вы можете скачать и посмотреть его.
Это не идеальный пример на 100% (потому что у меня была другая цель), но он современный по стилю и содержит много полезных вещей!

0

Сообщение от ivanov_333 Вот один очень хороший сайт с бесплатными шаблонами HTML и CSS.

Я смотрю, там многие на бутстрапе.
Вот и вопрос - есть ли смысл пытаться верстать сразу с бутстрап (и использовать только сетку и адаптивность, или элементы/карусели и прочее). Или учиться только на чистом HTML/CSS?

0

По моему мнению и по мнению многих экспертов - новичку лучше не использовать фреймворки, чтобы сначала научиться хорошо работать на чистом HTML и CSS!

0

Сообщение от 0xFFFFFF - "общих паттернов в отступах" -вот это самое интересное. Я делал через PerfectPixel, не очень строго, но +/- на пару пикселей где-то отклоняется, все совпало. Но самое что меня бесит (и кажется неправильным) - это все и вся подгонять маргинами (и паддингами), указывая их в пикселах. Это вообще правильный подход? Там же вроде как надо делать через em хотя бы (шагами через сколько то десятых) - но в этом случае не попадешь точно в макет. Или "правильные" дизайнеры рисуют макеты с учетом этого?

А ну тогда про паттерны это к дизайнеру претензии, там у них с этим вообще проблема глобальная какая то, от одних и тех же заголовков разные отступы, одни и те же блоки с разными отступами на разных страницах, особенно забавно когда они тебя при этом pixel-perfect просят сделать, ну вариантов 2, сказать что диз осёл или тупо классы добавлять там 20,21,22 px, в портфолио только такое лучше потом не выкладывать. em вообще никогда не юзаю, по ним не подскажу.

0

прочитал две вверху цитаты и почему-то вспомнил письмо от учебной платформы. Что-то было по учебе, мне стабильно оттуда прилетают призывы не забывать их:
кому уже прилетела подобная рассылка, наверное понятно о ком речь
Самое интересное, оно уже почти наступило. Или нагрянуло, как угодно «Яндекс» научил YandexGPT искать ошибки в коде студентов

«По данным внутреннего тестирования, больше 70% студентов "Практикума", допустив ошибку, обращаются к нейросети за подсказкой....», — рассказал технический директор «Яндекс Практикума» Давид Роганов.

0