Как практиковаться в верстке?

Question

[gleendo]

В общем не так давно начал интересоваться вебом. Начал изучать html и css.. прочитал книгу "Большая книга CSS", прошел несколько видеокурсов, изучил все почти все теги и свойства, понимаю все что написано, но реальной практики верстки у меня нет. Пробывал, но не как не получается...даже не знаю как к ней приступить, с чего начать.

Как можно попрактиковаться в этом деле? Может книги какие нибудь посоветуете по практике верстки или еще что нибудь. Заранее спасибо.

Comments

[Mist8]

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

В моем случае такое к сожалению (или к счастью?) почти никогда не работало.
Но с другой стороны, если мне вдруг понадобилось сверстать какой-то сайт... То задница автоматически начинает магнититься к стулу перед компом. А мозг начинает думать в ключе "так, мне нужен такой дизайн, с таким функционалом". "Я не знаю как это сделать, похоже мне нужно освоить это, это и это."

Не знаю как это лучше описать, но что-то с чем-то в этом случае меняются местами. И когда мне нужны навыки, чтобы достичь цели - навыки обретаются сами собой, с интересом и удовольствием.
А когда у меня нет четкой цели - то и желания/понимания как обрести навыки - ноль.

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

Вот реально не поверю, что у Вас не завалялось хотя бы парочки небольших идеек-потребностей. Может у ваших родителей есть небольшой бизнес, которому помог бы простой сайт? Или там девушка занимается фотографией и ей пригодится красивый сайт-портфолио.

Или, беспроигрышный вариант, тут точно угадаю - вы во что-то верите, какая-то идея занимает Вас, кажется ценной, достойной/нуждающейся в распространении. Сверстайте для неё сайт, сделайте его так, чтобы смотря на него вы чувствовали "я вложился на 100%". Пусть это будет небольшой лендинг - важна сама цель.

А остальное - навыки, понимание технологий, красота кода и т.п. - приложится автоматически. Нужные книги сами найдутся, в том что уже прочитали/просмотрели - вспомните и станете использовать полученные знания - автоматически.

Answer 1

[Абра Кадабра]

Пройдите здесь все задания. Их не много, но многие аспекты верстки были затронуты . Затем отправляйтесь сюда, ищите псдшники сайтов и верстайте их . По мере верстки настоящего, сложного макета используйте это или сразу это, так вы найдете/получите нужные вам ответы на вопросы и набьете руку в верстке.

Comments

[GoodProject]

Всё на английском, эх..

[Moe Green]

GoodProject: а без него у тебя ничего не получиться ))

[Moe Green]

за behance - спасибо! )

[Moe Green]

и за dash! ))

[Абра Кадабра]

mQm: всегда пожалуйста )

[GoodProject]

mQm: получится, ещё как.

[Moe Green]

GoodProject: да ради бога, если получиться ))) только поверь мне - самые свежие и грамотные материалы - только забугорные и без перевода. это факт. ))

[GoodProject]

mQm: да я это понял, буду учить со времен =)

[Влад Преображенский]

Ребята мне нравится все:и этот ребят и люди которые сидят,помогают делаться знаниями безвозмездно-очень приятно наблюдать со стороны!Молодцы!

[Влад Преображенский]

*ребят->ресурс (Punto Switcher исправил :-))

Answer 2

[Станислав Езерский]

Напишу для человека с «нуля»

Я считаю, самый глупый совет, брать PSD и верстать его.

Читайте статьи/книги по вёрстке (хотя бы тут)

Для начала нужно понимание структуры страницы — смотрите исходный код абсолютно любых сайтов, запоминайте интересные и понравившиеся вам реализации, пробуйте сами.

1. Верстайте не страницы, а отдельные элементы — блоки, меню, формы и прочее.
2. Верстайте прототипы (да-да, именно их).

Вникайте в javascript, он нужен, хотя бы для понимания и мелких реализаций типа «скрыть-показать». Но не злоупотребляйте им. Часть того, что реализовано JS, делается в CSS3

Научитесь CSS-дизайну «на лету» — то есть дизайн сайта в процессе вёрстки страницы.
Смотрите сайт в разных браузерах, в разных ОС — ищите отличия. Узнавайте про рендеринг страниц в браузерах. Узнайте, что такое «движок браузера» и какая у них разница.

Ищите непростые psd-шаблоны и верстайте их.

Остальное всё придёт с практикой. Хороший верстальщик всегда продолжает учиться в процессе деятельности. Всегда будет что-то новое.

P.S. Никогда не верстайте таблицами и не пытайтесь верстать табличные элементы блоками.
P.P.S. Забудьте про IE6, он неактуален

Удачи!

Comments

[Владик Лимонадик]

Забудьте про ИЕ6? :-) Я уже давно забыл про ie9, откуда вы берете таких динозавров, заставляющих даже ие9 делать?

[Тимофей Белоусов]

ie 9 вполне нормально себя ведет, если верстаешь нормально, про 10 и 11 вообще молчу, я даже про ie сейчас не беспокоюсь, а вот мозила начинает мозг компилировать...

[Кирилл Вольф]

Тимофей Белоусов: мозила и вправду иногда печалит, но скорее отсутствием поддержки некоторых свойств

[Станислав Езерский]

knitevision1: я вообще на IE не ориентируюсь (разве что подключение пары js). Не верстаете вы, не верстаю я, но это не значит, что не верстают другие. Есть куча верстальщиков, до сих пор пишущих «костыли» под IE< 9.
Я дал совет из практики и опыта.

Answer 3

[GoodProject]

Те же проблемы ))

Вроде HTML и CSS знаю, но как практиковаться хз, Видимо люди не понимают что мы просим ) А именно видео какие нибудь, с подробной версткой, для нубов, что бы было всё понятно. Или текстовые гайды, типа вот берём шаблон, вот я пишу тут в хтмл код для шапки сайта, в ксс тут же вписываю её размеры и пр, вот так, что бы было понятно, а не так как в большинстве видео тупо верстают без объяснений + видео старые, и возможно вообще это неправильный тип верстки, в одном видео чел вообще всем элементам привязывал ID, и в комментах писали что это неправильно, вот так вот потом насмотришься корявых видео и сам таким же будешь, поэтому нужен качественный материал, но за бесплатно его не так много.. раз такая проблема имеет место быть.

Продублирую ответ Максима Фролова из моего вопроса:

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

Так же от себя рекомендую сайт htmlacademy.ru , много курсов, в данный момент обучаюсь именно там, (до этого читал курc по ксс и хтмл на каком то сайте про html, css, js, там была очень хорошая подача материала, и смотрел видосы соракса и вебтеори) подкрепляю знания, потом можно будет перейти к верстке, ещё желательно узнать как делаются основные элементы типа слайдеров и пр. но это уже по части JS как я понял.. =)

Ну и как я часто слышал, нужно именно практиковаться, я и сам это стал замечать, просто всё что ты учишь тут же нужно записывать по несколько раз, например выучил новые теги, тут же их записал, протестировал, и так понемногу рано или поздно дойдём до верстки ))

Comments

[Абра Кадабра]

Если вы знаете HTML и СSS зачем вам "видео какие нибудь, с подробной версткой, для нубов, что бы было всё понятно. " ??

[GoodProject]

@Jmaster: Видимо плохо знаю ) Или привык что всё излагают по полочкам, да и почему бы нет? Это же было бы полезно, сразу сказать какие ошибки не стоит допускать, ну и прочие советы всегда полезны, ведь при изучении HTML и CSS тебе никто никаких советов по вёрстке не даёт )

[Влад Преображенский]

Поделюсь своим печальным опытом,можно сказать 3 года пытался изучить веб ,смотрел видео динозавтров weformyself ,но дело стояло,сам сделал вывод для себя,мелкими шажочками,но на высокую гору,а не как я ,все сразу,веб такое дело,его надо изучить со всех сторон,одну фишку прочитал ,сразу практика.
Htmlacademy ресурс хорошоий ,сам купил годовой абонемент)Рекомендую.
Кстати,dash очень понравился,насколько понимаю -еще к тому же и бесплатный.

Answer 4

[Юлия YuKi]

Сделайте себе свой сайт, взяв какой-нибудь исходник. В дальнейшем это будет ваше зеркало прогресса, если продолжите учиться профессии, то раз в год вам захочется задушить того, кто это верстал/писал и все переделать. :)

Answer 5

[Сергей Некрасов]

Напишу как сделал я, изучил основы html, css(как вы на данный момент), сверстал пару страниц, затем создал свой личный сайт-портфолио, положил в него несколько своих работ, и разместил на всяких ресурсах (hh, avito, superjob), а так же пулял своё резюме по всем вакансиям, связанных с версткой (в том числе и сайт-портфолио). Прошёл 4-5 собеседований неудачно(в основном из-за отсутствия знаний по JS), на 6 раз попал в команду! От одних книг опыт не прибавиться, практика - вещь!

Comments

[GoodProject]

Круто!

[patashok]

Могу ли я узнать? Вы нашли работу удаленную, или в своем городе?

Answer 6

[twixoff]

Посмотрите видео на ютубе https://www.youtube.com/results?search_query=%D0%B...

Подробно по пунктам описывают весь процесс. Будете знать с чего начинать и как двигаться дальше. Все остальное придет со временем)

Answer 7

[ModestesGonze]

Как я понял ты не знаешь как правильно? )
Здесь только практика с набиванием шишек поможет, опыт ведь со временем приходит.
Если что, пиши, помогу с "затыками".

Comments

[GoodProject]

Сколько примерно нужно времени что бы стать хорошим верстальщиком? Ну для набора опыта и т.д, если часто заниматься этим делом.

[ModestesGonze]

Зависит от человека, если схватывает быстро, то не долго, если мозг тормозит, соответственно медленней ). У меня ушло примерно полтора года чтобы изучить верстку и окружающие её технологии, типо препроцессоров, jquery и т.д. HTML и CSS изучить можно вообще за месяц-два, но знать названия свойств и тегов не достаточно. Нужно понимать что ты пишешь. Британские ученые установили, что человеку нужно 7т часов чтобы стать профессионалом в любом деле )

[Влад Преображенский]

10к))Даже так

Answer 8

[O_godo]

сейчас объясню как это делать . Для начала берешь простенький шаблончик(psd) и пытаешься его реализовать исключительно средствами css и html , поверьте , после того , как вы будите сталкиваться с проблемами в реализации , ваш мозг все запомнит. Так что совет таков: не надо видео, надо только практика, очень много практики и вскоре успех в этом деле будет обеспечен

Comments

[GoodProject]

Хороший совет!

Answer 9

[Gettoheaven]

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

Comments

[Gettoheaven]

меньше слов больше кода

Answer 10

[Сергей Мельников]

подобный вопрос задавался уже много раз, гуглите

Answer 11

[Ivan Ivanov]

Найди в google free psd и верстай любой понравившийся макет. Чем сложнее, тем лучше

Comments

[gleendo]

да 100500 раз уже качал...но как именно его верстать. для меня в этом трудность.

[Ivan Ivanov]

а в чем состоит трудность? если есть знания хотя бы основ html и css, то в выполнении верстки просто макета сложностей быть не должно. Разбей весь макет на блоки, блоки на объекты. И приводит элементы html к нужному виду c помощью css

[Gettoheaven]

@evgeniy8705: ну значит мало старались, люди прикладывают больше усилия и верстаю до 16 часов в день, нужно это понимать, удачи.

Answer 12

[bromzh]

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

Comments

[GoodProject]

Вот тоже хороший совет.

Answer 13

[Павел Мышкин]

Отвечал недавно в другой теме.

Answer 14

[slaykovsky]

ШРИ посмотри

Answer 15

[tornadoman]

Я бы рекомендовал вот эти онлайн курсы. Параллельно имеет смысл делать свой статичный сайт, на котором можно было бы применять новые знания, а также искать работу как можно скорее. Чем быстрее начнёте получать реальный боевой опыт, тем скорее познаете дзен вёрстки. Кроме того, есть смысл подписаться в твиттере на ведущих фронтэнд разработчиков и следить за трендами, чтобы не отставать от жизни.

Comments

[Damir Aushenov]

"ведущих фронтэнд разработчиков", например каких?

[hjk]

yespeace да вот, пожалуйста, ресурсов-то полно — раз, два, три, четыре

[Damir Aushenov]

hjk: спасибо;)

Answer 16

[Максим Гатилин]

www.youtube.com/user/WebTheory/videos
Вот эти ребята наглядно обьясняют и показывают основы верстки.
Конечно в их видекурсе сайт минималистический но для начала самое то)

Answer 17

[Danil Namaste]

Мне без мотивации (денег), было тяжело даже набивать руку. По этому, я сразу брал заказы, хоть и за низкую плату.

Comments

[MagAssist]

А расскажите, пожалуйста, подробнее каков был ваш опыт в этом. Какого плана брали заказы? Из расчета чего ставили стоимость работ? Говорили ли заказчику что имеете немного опыта, компенсируя это ценой и как реагировал заказчик на это? Было ли такое, что не могли справиться с заказом?
Иногда смотрю заказы на биржах и по условиям кажется, что вполне мог бы выполнить. Но напрягает момент того, что что-то может не получится и то, что заказчику важнее будет свое время, чем тратить его на нуба.

[Danil Namaste]

По началу было всё. Брал заказ с предоплатой - не справлялся отдавал деньги, подводил, извинялся. Брал снова, старался не повторять ошибки.
Ценник ставил средний по fl. Сразу позиционировал себя специалистом.
Череда неудач делала свое дело, оттачивая умения и навыки.

[Danil Namaste]

Первый мой заказ (серьезный) - это создание сайта на htm, страниц 5. Покерная тематика.
Бюджет был 8000 рублей. Это было лет 5 назад. Заказчик не особо понимал в тонкостях, что дало мне с легкостью сдать проект и получить деньги.

Answer 18

[Uglevod]

Смотри Генератор простых заданий для верстки по FlexBox
htgen.ucl.org.ru