Знаю основы HTML CSS, но верстать не получается. Как преодолеть баръер?

Знаю основы HTML CSS, но верстать самостоятельно не получается. Все получается косо-криво и т. д.
Как преодолеть этот баръер? Что делать или изучать далее? Есть ли какой то мануал по практической верстке?
  • Вопрос задан
  • 7344 просмотра
Решения вопроса 8
Skolpov
@Skolpov
Веб-дизайнер
«Ты в начале крив, косой,
а потом уж Лев Толстой».


Ты молод, зелен, девственно чист перед версткой. Пока у тебя нет практического опыта а есть только теория. Все ново, все страшно. Ожидаешь от первого раза с ней романтики и нежности, а на деле — она будет жестко рвать тебя без сожаления.

«Боже, я никогда не научусь верстать как они :( ...»
«Блин эти ребята так круто делают, видимо у меня нет дара...»
«Наверно это не мое, лучше пойду я отсюда...»

КОНКРЕТНО О ПРАКТИКЕ НОВИЧКА

Все барьеры у тебя в голове Ты хочешь верстать как боженька, а как только ты делаешь ошибку ты тут же разочаровываешься в себе и считаешь, что ты ни на что не годен. Любой, кто что-то учит сталкивается с этим, просто нужно свыкнуться что от косяков никуда — это часть прогресса. Желательно разобраться с собой, в том смысле, что многие бросают свои начинания, увидев на пути даже маленькую преграду. Дальше будут разочарования собой, усталость и много чего еще в голове.
Нужно просто пережить первые шаги, дальше будет легче.

Не нужно сразу пытаться сверстать весь сайт, научись верстать отдельные кусочки. Уверен, ты каждый день сидишь в VK. Поставь себе цель — Сверстать страницу регистрации VK например за три дня. Сегодня например сверстай шапку (без перфекционизма). Начни с малого. Со временем одной левой сможешь верстать то, что сейчас тебе кажется тяжелым. Да будет не так, да многое из головы вылетит. Не беда, гугл всему голова. У любого профи есть самый главный Шаолиньский скилл — «Мастерство великого гугления». Не все его постигают в начале пути, но многие все равно придут к нему однажды.

Перфекционизм и навык PixelPerfect— качество профессионалов, мы новички должны в начале делать ошибки Не надо вылизывать каждый участок макета, к этому ты придешь сам, но тогда, когда ты уже спокойно сможешь верстать. За то время пока ты пытаешься сделать крошечный блок сайта идеальным, ты бы мог уже быстро набросать весь макет и на практике использовать сразу много тегов и увидеть их к действии. Не надо заниматься в начале созданием идеального сайта, первые сайты все равно будут говно.

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

Главное не останавливаться. И надо смириться, что верстальщик всегда должен развиваться. Не только теорией но и практикой. Это его дар и его проклятье на всю жизнь. А грамотно развиваться поможет только грамотный подход к этому.

Всего лишь мое маленькое, скромное мнение.
Ответ написан
Комментировать
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
1. Задача/проблема
2. Гугл
3. Практика
4. GOTO 1
Ответ написан
Комментировать
m77x
@m77x
Консультант
Преодолеть барьер очень просто:
1) загрузить и установить PSPad
2) открыть и написать первые два тега <html></html>
сразу возьмите за правило - парные теги писать сразу
3) в середине этих тегов напишите еще пару тегов:
<head></head>
  <body></body>

1 В начале сотворил Бог небо и землю.
2 Земля же была безвидна и пуста, и тьма над бездною, и Дух Божий носился над водою.
3 И сказал Бог: да будет свет. И стал свет.
4 И увидел Бог свет, что он хорош, и отделил Бог свет от тьмы.
5 И назвал Бог свет днем, а тьму ночью. И был вечер, и было утро: день один.

в блоке тегов head
напишите еще пару тегов style
и у вас получится:
<html>
  <head>
    <style>
    </style>
  </head>
  <body></body>
</html>

И задайте как Бог ваш свет, т.е. в CSS поиграйтесь с цветами и "фокусами"
<html>
  <head>
    <style>
* {
	word-wrap: break-word;
	margin: 0px;
	padding: 0px;
}

html, body{
	width: 100%;
	height: 100%;
	margin:0;
	padding:0;
}

body {
	position: fixed;
	background: linear-gradient(top, #418ac7 0%, #fafeff 100%);
	background: -moz-linear-gradient(top, #418ac7 0%, #fafeff 100%);
	background: -o-linear-gradient(top, #418ac7 0%, #fafeff 100%);
	background: -ms-linear-gradient(top, #418ac7 0%, #fafeff 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#418ac7), color-stop(100%,#fafeff));
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#418ac7), to(#fafeff));
	background: -webkit-linear-gradient(top, #418ac7 0%, #fafeff 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#418ac7', endColorstr='#fafeff');
}

    </style>
  </head>
  <body></body>
</html>

Теперь пора создавать "землю" ))
в style измените css body добавьте картинку вашей Земли:
body {
	background: #635328 url('http://img.urodaizdrowie.pl/wp-content/uploads/2013/03/globe.jpg') fixed top center no-repeat;
	-o-background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	-khtml-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	background-size: 100% 100%;
}

теперь озвучьте ваш проект, что-то написав на своей странице, но сразу возьмите за правило, любой текст, должен быть читаемым. Поэтому надо задать цвет. И не просто цвет, но и тень (иначе текст может слится с фоновой картинкой).
в css добавьте для текста оформление:
p {
   color: white;
   text-shadow: 0 0 2px #000;
}

Используйте резко контрастирующие цвета текста и обводки, например черный текст - белая обводка, белый текст - черная обводка, желтый текст - синяя обводка.
ну и так далее…
Верстка это творчество, лишь слегка притянуто к математике ))
Всего вам доброго, новый Бог!
Ответ написан
veydlin
@veydlin
Мне никогда не жалко средств на свое любопытство
Возьмите, допустим, этот сайт, и не подглядывая в css попытайтесь его сверстать (можно выдирать картинки)
Как только ступор - можно подглядеть

И так несколько сайтов
Ответ написан
Комментировать
vilka_2009
@vilka_2009
Верстаю
Нужно просто брать и верстать. Не думая ни о чем. Самое главное не думать о том, что что-то не получается и не получится. Это должно быть не про вас. Просто берете и делаете.
Ответ написан
Комментировать
T_y_l_e_r
@T_y_l_e_r
изучить float left, clear both, position relative, position absolute,
посмотреть как ведут себя вложенные диви с разной position
попробовать сверстать 2 столбика на div и 3 столбика
сверстать адаптивную таблицу на div
после практических упражнений все должно получиться
Ответ написан
Комментировать
HamSter007
@HamSter007
HTML/CSS верстальщик
ПРАКТИКОВАТЬ!

Брать 1-10 макетов и верстать их.
Потом обязательно проверять на валидность.
Верстка не программирование, а всего лишь разметка.
Заучить основные теги, свойства правила и все.
Ответ написан
Комментировать
MaryT
@MaryT
IT люблю
Все мы когда-то через это проходили. И это нормально. Побольше практики! Просто берете и верстаете. Все, что находите - верстаете. Если не знаете как заверстать - сейчас очень-очень много материалов в сети есть. Вводите запрос "как сверстать такуюкрасоту" и вуаля. Не бойтесь спрашивать тут, или на других форумах, не бойтесь гуглить. Главное - не бросать. :) И ступор пройдет. Удачи вам! :)
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
@Chynsi
Htmlacademy, базовый курс 2016, советую скачать и посмотреть
Ответ написан
Rou1997
@Rou1997
Основы вызубрили - похвально, теперь все остальное вызубрите, спецификация вам в помощь и draft'ы тоже не пропускайте, вот как всю-всю-всю спецификацию вызубрите, так сразу случится реинкарнация и все будет получаться ровно и красиво, потому что спецификация это заклинание такое, пока все слова не произнесете не сработает!
Ответ написан
SkiperX
@SkiperX Куратор тега CSS
pixel perfect плагин для хрома
накладывай сверху скрин макета и исправляй кривокосы
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы