Не получается верстать самостоятельно. Как преодолеть это?

Question

[Инокентий Джелали]

Не получается верстать, выучил теги, стили всё что нужно, но как дело доходит до самостоятельной работы то руки опускаются.
Учусь несколько месяцев результата нет..
Помогите советом, спосибо.

Comments

[Михаил]

выучил теги, стили всё что нужно

алло, это не стих, нафига это учить?

[Михаил]

Берёте макет, верстаете как можете, див на диве, куча повторяющегося кода, 100 ошибок, никакой адаптивности
как сверстали, смотрите на этого франкештейна, исправляете ошибки, и по новой

[Антон Литвиненко]

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

[Дмитрий]

Начните с этого htmlbook.ru/practical.

[ReActor Дмитрий Вершанский]

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

[Дмитрий Чайников]

Макет это по сути готовая верстка. Зачем Вам чужая, создайте свою, блок за блоком.

[Одиночка Айс]

Антон Литвиненко, "куча нормальных профессий", например?

[Argentinium]

Одиночка Айс, любая профессия, которая не создаёт новых конкурентов комментаторам, ха :)

[survivor2005]

Ой не знаю, не знаю, я абсолютно тупое создание, учился на колы в школе. Логики во мне как в пробке. И вдруг сел я лет 5 назад за эту вёрстку, а так же сел мой друг, отличник, заучивал все формулы, выигрывал олимпиады по математике. Итог, через 2 недели изучения, он продолжил изучать, я начал верстать. Я был в шоке, прошло пол года, я делал сложные макеты, и продолжал его учить, затем мне все надоело, я сказал, что не могу больше повторять ему одно и то же изо дня в день. В общем он стал отличным менеджером, находит клиентов, я пошёл дальше, js, php и т д. Человек он не усидчивый, он не любит ждать, терпеть и похоже ему не это было не интересно. Вопрос к вам, это вам интересно? Вы испытываете чувство удовлетворения когда что то получается в этом деле? Вы должны чувствовать что вы в своей тарелки. И не чувствовать время. Если все это присутствует, то остаётся дело за малым, практиковать и не сдаваться). С чего и как по сути начинать. Вы выучили определённую порцию свойств, так остановитесь и пытайтесь что то сделать из этого. У вас на руках есть div, создайте несколько дивов, покрасте их в разные цвета, расположить их по горизонтали, сделайте внутренние и внешние отступы. Измените размеры, изменяйте позиционирование, играйтесь и смотрите что получается, смотрите разницу между разными тегами, какие у них свойства по умолчанию. Простая истина в том, что вёрстка состоит из блоков. Блок в блоке, блок на блоке, блок слева и справа. Разделяйте макет на логические блоки, сначала надо выделить внешние, каркасные блоки, обычно это header(шапка), main(центральная часть) и footer(подвал). Идём от общего к частному. Уж 3 блока вы точно можете отрисовать. Затем идём в шапку, делим её на блоки, блок с логотипом, блок с меню, блок с телефоном и т д. Ничего сложного. Далее делим на блоки менюшку. Обычно это ul-li. Пытаемся их пока что расположить горизонтально, дать отступы между пунктами и т д.

[Alex Step]

У меня так уже лет 5 с уборкой дома. Инструменты есть, выучил все лайфхаки домохозяек по видео на Ютубе, но как доходит до самостоятельной работы, я такой сразу - аа у меня лапки ^•^

Answer 1

[approximate solution]

Учусь несколько месяцев результата нет..

За несколько месяцев вы могли уже сверстать макетов 5-10.

Когда сверстаете 99 макет, отпишитесь из будущего как там поживает верстка. Обычно на макете 50-том ты макет видишь в виде html разметки и css стилей, и уже мыслено разбил его на bem блок и добавил в проект как отдельный кусок кода.

Comments

[Инокентий Джелали]

Хорошо, ждите)

[Инокентий Джелали]

Не сочтите за неумение гуглить , но немогли бы посоветывать очень простые макеты или что-то такое?

[approximate solution]

Инокентий Джелали, зачем, вы слишом заморачиваетесь. Научиться тыкать в код и доставать готовый css из figma или photohsop - 2 секунды.

Алгоритм такой - пишите любой запрос, допустим "Корм для кошек в Москве", открываете первую ссылку, и полностью переписываете сайт. И вам не нужны макеты. С помощью Chrome Devtools эмулируете разные разрешения под мобильные, планшеты и деск.

[Аркадий Паравозов]

Инокентий Джелали, как дела с вёрсткой ?

Answer 2

[Тарас Шульга]

Теги нужно не заучивать как стишок в школе, а понимать.
Ибо скорее всего вы вместо практики сидели и тупо запоминали теги/стили, а как оно работает хз. Это как тактика студента заучить , заучил, а как работает хз.
Просто начните с чего-то маленькое. Сперва какой нить элемент сверстате, потом соберите их в див. И так пару раз, а потом бац - и что-то, да готово.

Comments

[Инокентий Джелали]

Пытаюсь верстать отдельные элементы типа форм для ввода

Answer 3

[ArtJH]

1) Заучивать теги и css свойства не нужно. Никто их все наизусть не знает, не переживайте. Потому если что можно быстро загуглить нужный тег. Да и в процессе верстки все равно будете запоминать
2) Возьмите какой-нибудь легкий макет и верстайте его. Как можете верстайте. Правильно с первого раза все равно не получится. Потому что через макетов 5, вы будете видеть какие ошибки совершали и так далее и далее
Короче говоря глаза боятся руки делают. Больше делайте и делайте, не знаете как что-то сделать гугл.
Если вообще отчаянный, то в youTube много марафонов по верстке, где вместе с вами верстают макет, для первого раза можно, но дальше больше верстайте САМИ
P.S. не забудьте отметить ответом)

Comments

[Инокентий Джелали]

Спосибо за ответ ,попытаюсь

Answer 4

[DaraSumrak]

У меня была похожая проблема. Это как страх перед чистым листом когда, например, пишешь сочинение в школе. Вроде понимаешь, что надо, но боязно. Тут могу посоветовать хотя бы попытаться заткнуть своего внутреннего критика. Так сказать, верстать как получится.
А еще поставить таймер на пять минут, сесть за комп и сказать себе, мол, я просто посмотрю что и как, всего пять минуток и все. И не ставить задачей верстать точь в точь по макету, а лучше вообще не с макета начать, а с песочницы. Простенького такого файлика, в котором ты пишешь код и смотришь: ага, так вот как оно работает.
Если тебе понравится, то со временем втянешься, немного поигравшись в этой самой песочнице, и сможешь потихоньку приступать к простым макетам, одностраничникам например.
И да, в начале пути лучше за большие проекты не браться, всю мотивацию убьет.

Comments

[Инокентий Джелали]

Спосибо большое за мотивацию и поддержку)

Answer 5

[kragone]

Сначала сверстайте чтобы выглядело как на макете, затем чтобы работал функционал. Затем сделайте адаптив. Как получиться. И начинайте рефакторинг. Вынести цвета, шрифты и прочее в переменные. Объедините дубли в CSS. Разбить на компоненты стили, разметку на секции, проверьте наличие тегов section, main, nav, header, footer и пр. С каждым макетом вы будете делать это заранее и совершать меньше ошибок.

Comments

[Andry Shepard]

Полностью согласен с оратором))) верстка это не сложно . Надо только понять. Например, как я боролся с вёрсткой.
" Так это header. У него 2 блока: бренд и меню. Значит 2 дива... В бренде у нас логотип и название... И т.д. "

Answer 6

[freeman0204]

Научись учиться. Веди конспект.