evgeniy8705
@evgeniy8705
Повелитель вселенной

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

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

Как можно попрактиковаться в этом деле? Может книги какие нибудь посоветуете по практике верстки или еще что нибудь. Заранее спасибо.
  • Вопрос задан
  • 33919 просмотров
Пригласить эксперта
Ответы на вопрос 18
Пройдите здесь все задания. Их не много, но многие аспекты верстки были затронуты . Затем отправляйтесь сюда, ищите псдшники сайтов и верстайте их . По мере верстки настоящего, сложного макета используйте это или сразу это, так вы найдете/получите нужные вам ответы на вопросы и набьете руку в верстке.
Ответ написан
Напишу для человека с «нуля»

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

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

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

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

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

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

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

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

Удачи!
Ответ написан
GoodProject
@GoodProject
Верстальщик
Те же проблемы ))

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

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

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

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

Ну и как я часто слышал, нужно именно практиковаться, я и сам это стал замечать, просто всё что ты учишь тут же нужно записывать по несколько раз, например выучил новые теги, тут же их записал, протестировал, и так понемногу рано или поздно дойдём до верстки ))
Ответ написан
yulsonka
@yulsonka
Сделайте себе свой сайт, взяв какой-нибудь исходник. В дальнейшем это будет ваше зеркало прогресса, если продолжите учиться профессии, то раз в год вам захочется задушить того, кто это верстал/писал и все переделать. :)
Ответ написан
Комментировать
Judixel
@Judixel
Front-end Engineer
Напишу как сделал я, изучил основы html, css(как вы на данный момент), сверстал пару страниц, затем создал свой личный сайт-портфолио, положил в него несколько своих работ, и разместил на всяких ресурсах (hh, avito, superjob), а так же пулял своё резюме по всем вакансиям, связанных с версткой (в том числе и сайт-портфолио). Прошёл 4-5 собеседований неудачно(в основном из-за отсутствия знаний по JS), на 6 раз попал в команду! От одних книг опыт не прибавиться, практика - вещь!
Ответ написан
twixoff
@twixoff
Посмотрите видео на ютубе https://www.youtube.com/results?search_query=%D0%B...

Подробно по пунктам описывают весь процесс. Будете знать с чего начинать и как двигаться дальше. Все остальное придет со временем)
Ответ написан
Комментировать
@ModestesGonze
Как я понял ты не знаешь как правильно? )
Здесь только практика с набиванием шишек поможет, опыт ведь со временем приходит.
Если что, пиши, помогу с "затыками".
Ответ написан
O_godo
@O_godo
сейчас объясню как это делать . Для начала берешь простенький шаблончик(psd) и пытаешься его реализовать исключительно средствами css и html , поверьте , после того , как вы будите сталкиваться с проблемами в реализации , ваш мозг все запомнит. Так что совет таков: не надо видео, надо только практика, очень много практики и вскоре успех в этом деле будет обеспечен
Ответ написан
@Gettoheaven
Берешь макет .psd и верстаешь, все с этого начинали и многие все таки считают что практика гораздо быстрее научит всему чем теория.
Ответ написан
mlnkv
@mlnkv
JavaScript Developer
подобный вопрос задавался уже много раз, гуглите
Ответ написан
Комментировать
@inferal73
Frontend developer
Найди в google free psd и верстай любой понравившийся макет. Чем сложнее, тем лучше
Ответ написан
@bromzh
Drugs-driven development
Самое простое - заходи на любой сайт и пытайся сверстать так же, не заглядывая в исходники. При совсем непонятных ситуациях, смотри исходники и адаптируй их под свой стиль.
Ответ написан
Отвечал недавно в другой теме.
Ответ написан
Комментировать
slaykovsky
@slaykovsky
ШРИ посмотри
Ответ написан
Комментировать
@tornadoman
Я бы рекомендовал вот эти онлайн курсы. Параллельно имеет смысл делать свой статичный сайт, на котором можно было бы применять новые знания, а также искать работу как можно скорее. Чем быстрее начнёте получать реальный боевой опыт, тем скорее познаете дзен вёрстки. Кроме того, есть смысл подписаться в твиттере на ведущих фронтэнд разработчиков и следить за трендами, чтобы не отставать от жизни.
Ответ написан
gatilin222
@gatilin222
Frontend-разработчик
www.youtube.com/user/WebTheory/videos
Вот эти ребята наглядно обьясняют и показывают основы верстки.
Конечно в их видекурсе сайт минималистический но для начала самое то)
Ответ написан
Комментировать
htmlcssverstka
@htmlcssverstka
Верстка сайтов
Мне без мотивации (денег), было тяжело даже набивать руку. По этому, я сразу брал заказы, хоть и за низкую плату.
Ответ написан
@Uglevod
Смотри Генератор простых заданий для верстки по FlexBox
htgen.ucl.org.ru
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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