Теперь Кью работает в режиме чтения

Мы сохранили весь контент, но добавить что-то новое уже нельзя

Как опытные верстальщики верстают сайты, сначала делают полностью html разметку, а потом css? И как лучше практиковать начинающему верстку?

Например я открыл на ютубе видео марафон по верстке, смотрю как он делает и я также повторяю у себя, будет ли толк от этого? Или лучше самому брать макет и делать?
Программирование+4
Анонимный вопрос
  ·   · 50,3 K
Веб-разработчик, геймер, специалист по этике  · 15 мая 2023
Здесь два вопроса одновременно, отвечу сначала на первый.
Я начинаю с HTML, да. Но только не "полностью HTML разметку". Я переношу в HTML весь текстовый контент с дизайна и все необходимые семантические теги. Я старовер, я исхожу из принципа "страница должна быть читаема даже если CSS вообще не прогрузился".
После того, как у меня есть все нужные `ul`, `p`, `h1`, `h2`, `a` и `img`, и другое что там хочет от меня дизайнер, я начинаю применять CSS.
Если какой-то эффект из дизайна невозможно воспроизвести  без дополнительных HTML "обёрток", добавляю эти обёртки в HTML.
Если какой-то эффект невозможно воспроизвести без JavaScript, добавляю к нужным элементам атрибут `class` с каким-нибудь классом типа `js-effect-target` (чтобы у класса был префикс `js-`) и пишу JavaScript, который воспроизводит этот эффект. Конечно же, если страница предполагает поведение, то без JavaScript никак не обойтись всё равно.
Результаты вёрстки проверяются в DevTools в браузере, параллельно в мобильном режиме, планшетном и десктопном. Я подразумеваю, что дизайнер вам дал все три дизайна.
Потом, когда в одном браузере страница довёрстана, открываем её во всех остальных мажорных браузерах, включая мобильные. В последнее время осталось всего два движка рендеринга, правда, так что достаточно проверить в Firefox и каком-нибудь клоне Chrome, но вот мобильных браузеров очень много разных. Если есть расхождения в рендеринге, ищём причину и устраняем.
На тему как "лучше практиковать вёрстку" — я бы на вашем месте один раз повторил за лектором, но потом уже следующее упражнение сделал бы сам. В вёрстке это организовать достаточно просто: открываете абсолютно любой веб-сайт, делаете скриншот страницы и повторяете 1:1. Эффекты, которые вы не знаете, как делать, ищете в интернете. Все решения уже кем-то были где-то описаны: и меню выпадающие, и тени, и градиенты, и закруглённые углы и наложения и всё на свете. И повторяете это упражнение столько раз, сколько хотите, пока уверенность не придёт в своих силах.
Пишу код и т.п.  · 3 мая 2022  · itustinov.ru
Делают либо одновременно, либо используют CSS-фреймворки, т.е. CSS есть до разметки. Дело в том, что у разных способов позиционирования может требоваться разный порядок тегов и разное даже их количество. Когда основной каркас... Читать далее
2 эксперта согласны
В свое суте все верно.
Я веб программист, так же занимаюсь веб дизайном...  · 1 июн 2022
Для начала следует проанализировать макет сайта, практически любой сайт в своей основе имеет довольно простой общий шаблон, к примеру на любом сайте есть шапка, контентная часть и подвал, эти блоки можно заранее задать в html... Читать далее
1 эксперт согласен
Да, я зарабатываю на ✺Толоке 👇  · 20 апр 2023  · toloka.yandex.ru/promo
Опытные верстальщики обычно следуют методу разметка  🢡 стили, что означает, что они сначала создают HTML-разметку и затем добавляют стили CSS. Это позволяет им лучше понимать структуру документа и убедиться, что разметка и... Читать далее
Заработать пару сотен рублей онлайн на Яндекс✺Толока! Регистрируйся.Перейти на toloka.yandex.ru/promo
1 эксперт согласен
Первый
Привет! Я Андрей - главный программист компании...  · 17 июн 2022
Мы согласимся с предыдущими ответами о том, что в первую очередь необходимо проанализировать макет сайта целиком. Наверняка, есть ограничения по ширине контейнера и типовые блоки. Всегда лучше задавать сразу стили для секций и... Читать далее
Яндекс, Frontend  · 19 апр 2023
Довольно короткий ответ — у каждого свой путь и свои лайфхаки, всё приходит со временем. «Серебрянной пули» не существует в обучении, именно поэтому стоит попробовать разные способы, главное не бояться и если понимаете, что... Читать далее
1 эксперт согласен