Существует ли краткое древовидное руководство по вёрстке?

Если особенности html и css изучены, но существуют пробелы в схематичности знаний и требуются такие подсказки, например:
- когда какой тип позиционирования использовать;
- когда применить методологию БЭМ, а когда сверстать макет простыми div'ами или элементами html5;
- способы центрирования блоков;
- итд.
Необходимо что-то вроде такой древовидной структуры: https://coggle.it/diagram/Vfk3_SwDy7sQL1wk
Цель - при оценке макета, взглянув на такую "шпаргалку", быстро прикинуть какие элементы каким способом будут верстаться, где какую методику применить и дальше уже работать на основе полученных знаний и со справочниками, которых полно в сети, тот же wc3 или htmlbook.
  • Вопрос задан
  • 1938 просмотров
Решения вопроса 2
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
Ваш вопрос из разряда "Как начать рисовать? Слева вправо или справа в лево?"
Все зависит от проекта и каждого конкретного случая. Я так понимаю, Вы прочитали много, а сделали мало. Поэтому занимайтесь практикой и побольше думайте. Ибо тот или иной способ оправдан в том или ином случае. И не может быть методички, где будет расписаны все случаи. Так как на практике вы сталкиваетесь не с проблемой позиционировать элемент внутри дива, а учитываете тот факт, что этот див является частью странице где еще куча элементов. Всегда есть много способов и чаще один из них правильный.
Ответ написан
Комментировать
@Elizavetta
Matroid: gamedev/js-разработка
Вам не нужно ничего учить и собирать шпаргалки. Загрузите себя задачами, основные моменты быстро отложатся в памяти: позиционирование, центрирование и тп, остальное и в принципе запоминать не стоит, в процессе работы все равно будет много гугла.
Для оценки трудозатрат на макет гораздо важнее требования адаптивности, число платформ, интерактив (CSS-анимации, svg ). Расположение элементов не является основной работой.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 5
DeLaVega
@DeLaVega
Верстаю, фронтэндю =)
Простите, но при таких вопросах - у вас особенности html и css вообще ни разу не изучены!

htmlbook.ru - для начала в помощь.
Ответ написан
riky
@riky
Laravel
Судя по вопросу и ответам, вам действительно не хватает практики.

Я мог бы прийти на форму строителей и спросить "парни мне нужна блок схема как построить любой дом. я уже пробовал делать пару шалашей и даже в строительстве дома участвовал. Во всех курсах которые я смотрел показывают как строить один кокнретный проект дома, а мне нужно любые!!! поэтому сейчас хочу пошаговую методичку по которой смогу строить любые дома от частных домов из оцилиндровки до небоскребов".

для вас сейчас главное набивать больше шишек и изучать разные способы верстки и самое главное изучать их побочное действие, и таких вопросов больше не будет. а это практика + чтение тысяч отдельных маленьких мануалов по особенностям верстки.

"быстро прикинуть какие элементы каким способом будут верстаться" - с опытом эта шпаргалка будет в голове.
а сейчас вам нужно изучить как верстаются те элементы с которыми вам чаще приходится работать.
Ответ написан
Комментировать
neoshinji
@neoshinji
Проектировщик простых интерфейсов
Берёшь готовый HTML-шаблон, похожий под требуемую реализацию проекта на последней адаптивной версии Bootstrap. Меняешь классы у блоков до достижения необходимой структуры новых блоков/страниц. CSS желательно редактируя сразу на SASS. После тестирования на кроссбраузерность(основа Chrome) Десктопной версии переходишь к адаптивному мобильному виду.

Всё время следуя правилу - Достаточно ли я чисто выполнил вёрстку данного элемента, не наделал ли я лишнего из-за недостатка знаний. Не делайте лишних блоков для оформления, используйте псевдоэлементы и CSS 3.

Если необходимо создать новую страницу(если вы отвечаете за дизайн также), то до вёрстки желательно сделать её динамический прототип на Axure, утвердить данную страницу с программистами, директорами и только потом верстать. Таким образом максимум придётся дорабатывать готовую страницу 1-2 раза, а не 10-20 раз. Следовательно экономия времени.

Дизайнер должен знать как верстаются элементы по сетке. Верстальщик должен знать дизайн, чтобы быть уверенным что дизайнер спроектировал качественный адаптивный дизайн. А вот верстальщик необязательно должен сразу становится фронтендом, то есть изучать сразу JS.

Если нет чёткого представления оформления элемента, добейтесь этого, иначе даже качественная вёрстка не будет полезна для проекта и возможно всю разработку данного элемента вы произвели впустую.

Чем больше знаний и опыта у специалиста тем меньше требуется ему времени на разработку элемента. Однако спешить не следует, необходимо следовать системному подходу, продумывать юзабилити заранее и начинать с прототипа, который строится от максимально эффективно(функционально) реализованной идеи.

Древовидное руководство по вёрстке) Рекомендую побольше почитать про "шаблонизацию", думаю, вы про это хотите узнать.
Ответ написан
Комментировать
@SergeyZelensky-Rostov
Если не знаете когда какой тип позиционирования использовать то
особенности html и css
не изучены, центрирование блоков делают по разному, можно margin, можно position, внимательно читайте про позиционирование в чем разница между relative и absolute, когда поймете вопросов когда что использовать не будет
Ответ написан
Комментировать
@ysaeredir
Почитай книги по ООП, потом опять вернись к верстке. Перейди от легкого к тяжелому, а потом обратно. Сразу все поймешь в верстке, что и как.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
SPIKS Санкт-Петербург
от 70 000 до 90 000 ₽
PERX Нижний Новгород
До 50 000 ₽
07 окт. 2024, в 16:09
16000 руб./за проект
07 окт. 2024, в 16:04
1000 руб./за проект