Описание
: создание сайтов очень не простой процесс. Все, наверное, знают, что в его создании принимают участие веб-дизайнер и программист, но многие не знают про верстальщика. А ведь именно работа верстальщиком расставляет все элементы дизайна по местам. Хотите научиться этому? Тогда читайте статью о том, как стать верстальщиком с нуля.
Оплата
: в среднем 10$ за час или 50-100$ за проект.
Требования
: усидчивость, внимательность, знать html, css, JavaScript, Photoshop
Многие люди даже не знают о такой профессии, так что для начала стоит понять что делает верстальщик и в чем заключается его работа.
Верстальщик создает каркас сайта, используя макет от дизайнера. Он отвечает за адаптацию ресурса под различные браузеры, мониторы и экраны смартфонов/планшетов, чтобы везде сайт выглядел определенным образом. Иными словами, он получает статичную картинку от дизайнера, а затем «оживляет» ее.
Что требуется для работы ? Минимальный набор верстальщика включает в себя:
- Notepad++, чтобы писать код;
- Photoshop или другой подобный графический редактор;
- Популярные браузеры, чтобы посмотреть, как отображается работа в разных браузерах.
Что нужно знать и какие качества понадобятся?
- HTML.
- JavaScript.
- Photoshop или другую подобную программу.
- Усидчивость.
- Внимательность.
- Зрительная память.
- Аккуратность.
Как стать верстальщиком ?
Желательно иметь среднее или высшее образование в этой области, но многие верстальщики-фрилансеры самоучки. Либо своими силами изучили всю необходимую информацию, либо окончили специальные курсы в интернете. К счастью, подобных школ теперь довольно много.
1. Для начала вам нужно изучить HTML, CSS и JavaScript. Можно не запоминать с ходу все значения, а составить себе понятную и удобную шпаргалку. Особенно обратите внимание на следующие моменты:
- как строится HTML страница – основные теги страницы (head, body) и что в них может находиться.
- главные HTML элементы — a, p, div, table, h1-h6, ol, ul, span и т.п.. Научитесь их правильно прописывать, изучите зачем нужны. Поймите разницу между блочными и строчными элементами.
- Ознакомьтесь с версиями HTML и какие теги в них входят.
- Изучите отличие табличной и блочной верстки, какие у них преимущества.
- Основные элементы HTML5.
- Изучить виды селекторов.
- Основные (фон, размер, цвет, шрифт, границы и т.п.) и особенные (position, float …) свойства CSS.
- Ознакомьтесь с версиями CSS, какие к ним относятся свойства.
- Какие свойства работают по другому в некоторых браузерах.
- Научитесь делать блочную структуру web-страницы.
- Изучите основны CSS3.
JavaScript:
- Зачем и когда применяется.
- Как скрыть или показать определенный блок.
- Как добавить анимацию (скроллер или слайдер).
- Как сменить класс и стиль элемента.
- Как получить или изменить значение определенного элемента.
2. Освойте программу Photoshop , ведь вам придется работать в графическом редакторе и довольно много. Верстальщику не обязательно уметь рисовать, ведь вы работаете с готовым макетом страницы. В основном вам нужно будет:
- Делать нарезку макета.
- Определять размеры.
- Получать нужные цвета.
- Вырезать определенные элементы из макета.
3. Изучите основы верстки – разберитесь в терминологии (кроссбраузерность, валидность, семантика). Почитайте пару книг по этой теме или посмотрите хотя бы бесплатные курсы – их полно. Желательно научиться работать с WordPress и Joomla, так как многие сайты работают на этих CMS, и у них много особенностей в работе.
4. Практикуйтесь – не нужно сразу идти на биржу фриланса и хватать самый сложный заказ. Сделайте 2-3 тестовые работы, чтобы набить руку и отточить практические навыки.
Работа верстальщиком удаленно
Где ее найти? Ведь во фрилансе основная проблема – найти заказ. А новичкам сделать это очень и очень сложно, особенно если вы самоучка и нет опыта реальной работы.
- Первый опыт можно получить бесплатно. Т.е. предлагать свои услуги за положительный отзыв. Найти заказчиков несложно – находите сайты и предлагайте сделать верстку за положительный отзыв. Многие вебмастера будут рады такому предложению, а в дальнейшем будут обращаться к вам по другим вопросам (уже платно) или посоветуют знакомым. Главное покажите себя с лучшей стороны.
- Найти работу можно там, где требуется постоянно создавать или дорабатывать сайты. Так что вам стоит обратиться в студии веб-дизайна или крупные интернет-проекты. Можно напрямую написать веб-студиям с предложением о сотрудничестве. На первых порах можно работать на бесплатной основе (испытательный срок + обучение), а через месяц выйти на оплату. Так вы сможете получить реальный опыт работы, а потом сможете пристроиться на постоянную удаленную работу. Но тут многое зависит от ваших умений, талантов и удачи.
- Не забывайте про самый распространенный вариант – биржи фриланса. Именно там новички могут получить свой первых опыт, хотя взять первый заказ будет проблематично. На сайте weblancer.net довольно много заказов по верстке, а конкуренция не так сильна как на fl.ru
5 советов для начинающих верстальщиков:
- Думай. Верстка это не простое дело, которому легко и просто обучиться.
- Будь в курсе всего нового в этой сфере – читайте блоги, форумы, сайты и другие источники информации по этой теме. Постоянно появляются новые технологии, техники, выявляются распространенные ошибки – вы должны держать руку на пульсе, чтобы не пропустить важную информацию.
- Html + css – старайтесь по минимуму использовать javascript, чтобы ускорить загрузку страницы.
- Используйте наработки – сохраняйте свои старые наработки, чтобы была возможность к ним вернуться и воспользоваться в новом проекте.
- Занимайтесь версткой только если вам действительно это интересно. Просто выучить Html и css мало – надо жить версткой. Ведь в каком-то смысле это искусство, в котором нужно отдавать все свои силы, время и интерес, и только тогда можно получить удовольствие от работы и прийти к успеху.
Так что прежде чем задаваться вопросом «как стать верстальщиком с нуля», спросите себя «нравится ли мне работа верстальщиком удаленно или лучше попробовать что-то другое?». Ведь вариантов очень много, и это не та сфере, в которую стоит идти только ради денег.
- Стили - это набор параметров, определяющих положение, вид и функциональность элементов веб-страницы. Главное преимущество стилей - они предоставляют гораздо больше возможностей для форматирования, дизайна и верстки в сравнении с уже родным вам HTML. Эта мощнейшая система может быть собрана в отдельных документах, благодаря чему не перемешивается с HTML кодом. Это - основа; больше, проще и понятнее - здесь: http://htmlbook.ru. Ознакомление с разделом «CSS» начните из “Самоучителя”, а справочник значительно упростит понимание пока незнакомых терминов. В будущем вам также пригодится раздел «Блочная верстка».
- Для особо настойчивых и любопытных в вопросе программирования рекомендуем сайты http://www.xiper.net, http://css-live.ru. Тут предоставлены уроки, открывающие секреты применения «продвинутых» приемов HTML и CSS. Если вы владеете английским языком - обязательно посетите ресурсы http://css-tricks.com/ , http://net.tutsplus.com/ , на которых можно найти не только текстовые, но и видео-уроки.
Высший пилотаж- JavaScript!
Использование языка JavaScript придаст вашим веб-страницам интерактивности. Изучая эту, уже более серьезную верстку, постепенно включайте код JavaScript в HTML.
- Достаточной информационной базой для изучения этого языка владеет ресурс http://javascript.ru. Он включает много необходимых материалов, обсуждений и советов для качественного обучения.
- Первая часть книги Дэвида Флэнагана “JavaScript Подробное руководство” станет замечательным проводником в основы JavaScript. Вторая часть описывает среду разработки сценариев, предоставляемых браузерами. Третья часть - это обширный справочник по базовому JavaScript, четвертая - по клиентскому.
- С целью упрощения внедрения JavaScript в веб-страници применяется библиотека jQuery, также написана на JavaScript. Официальный сайт http://jquery.com и книга «jQuery Подробное руководство по продвинутому JavaScript» (Бер Бибо, Иегуда Кац) в доступной форме излагают все, что вам необходимо знать об этом языке.
- Значительную помощь в разработке JavaScript предоставляет свободный модульный фреймворк Mootools.
Малые хитрости от больших мастеров
Даже для опытных верстальщиков мы готовы предоставить информацию, способную значительно усовершенствовать работу. В вопросе создания оптимизированного кода верстки вам обязательно пригодится сайт hthttp://www.xiper.net. Руководитесь разделами «Учимся» и «Готовые приемы», в которых собраны передовые решения и технология применения скриптов.
Существует также множество сервисов для оптимизации верстки. Рекомендуем обратить внимание на ресурсы, посвященные этой теме:
- http://www.google.com/webfonts ; — предоставит коллекцию шрифтов, которые можно подключать на свои страницы.
- http://www.fontsquirrel.com/fontface/generator — конвертирует любой шрифт и создает CSS - код для вставки в таблицу стилей.
- http://stm.dp.ua/web-design/color-html.php — широкий выбор цветов и их кодов.
- Сервис CSS спрайтов сократит число HTTP запросов для загрузки графических ресурсов, посылаемых вашим сайтом. Статья http://www.xiper.net/collect/html-and-css-tricks/overclock-site/sprite.html расскажет вам об этом более подробно.
- Раздел «Валидация документов» на сайте http://htmlbook.ru ознакомит вас с понятием валидаторов. Код каждой страницы должен отвечать спецификации, что разрабатывается W3 Консорциумом www.w3c.org. Несколько примеров валидаторов (проверка html - кода и css- кода) приведено здесь: http://validator.w3.org/ , http://jigsaw.w3.org/css-validator/ .
- http://caniuse.com — проверка кроссбраузерности - сервис, что поможет избежать разного отображения верстки в нескольких браузерах.
+ Обещанный приятный бонус
Если ваша жажда к профессиональным знаниям еще не полностью утолена, спешим порадовать - это еще не все. Изучить HTML и CSS можно также с помощью следующей литературы:
- Марк Пилгрим «HTML5. Up and Running»
- Эрик Мейер “CSS — каскадные таблицы стилей: подробное руководство”
- Питер Лабберс, Брайан Олберс, Фрэнк Салим «HTML5 для профессионалов: мощные инструменты для разработки современных веб-приложений»
- Стивен Шафер «HTML, XHTML и CSS. Библия пользователя»
- Эрик Фримен, Элизабет Фримен «Изучаем HTML, XHTML и CSS».
P.S. Приняв решение изучить HTML, откажитесь от использования специальных редакторов. Пишите в обычном блокноте или Notepad++, это поможет вам быстрее приобрести необходимые навыки. Если вы - сторонник интерактивного общения - станьте частым гостем специализированных форумов:
- http://www.cyberforum.ru/html/
- http://ru.html.net/forums/viewforum.php?f=49
- http://www.html.by/
- http://forum.htmlbook.ru/
Спрашивайте советов у более опытных коллег, делитесь собственными знаниями с новичками!
Надеемся, эта статья станет для вас достойным руководством в изучении программирования. Следующий материал будет посвящен серверному язику программирования РНР.
,Блочная верстка
Как вы уже догадались выше, в этой статье речь пойдет именно от блочной верстке, если предыдущая статья была, как вводная, то сейчас мы будем уже разбираться более конкретно на примере — как сверстать сайт с нуля . Во время своего изучения верстки я был в поисках подробного мануала — как по шагам сверстать даже самую простую html страницу. В этой статье я хочу максимально подробно рассмотреть каждую строчку кода и объяснить принципы работы с html, чтобы любому новичку в этом деле было понятно. Надеюсь, у меня это получится. 🙂
Итак, начнем. Для примера я взял простой прототип, макетом его нельзя назвать, нормальный макет рисуется в psd формате, а у нас он в jpg. Нам главное понять принцип как же верстать сайты с помощью блочной верстки. Чтобы работать с блочной версткой нужно знать не только html , но и css (каскадные таблицы стилей). В ходе цикла статей по верстке сайта , мы как раз с вами и изучим тот набор css стилей, который в дальнейшем вам всегда поможет верстать практически любые каркасы макетов/мокапов, ведь принцип один и тот же.
Итак, вот макет (кликабельно).
Мы видим у него 4 логические части:
- Шапка сайта (далее будем называть header, хедер);
- Левая колонка (далее будем называть left sidebar);
- Правая колонка (далее будем называть content);
- Подвал (далее будем называть footer, футер);
Итак, начнем конечно же с блока хедер. У нас мокап шириной 1000 пикселей (px).
Для начала скажу, что верстка делается с помощью html тегов. Например,
В начале работы вам нужно создать новый каталог у вас на диске под названием, например, myfirsthtml и в редакторе кода (я пользуюсь sublime text 3, это самая новая версия на момент написания статьи), создать 2 файла index.html и style.css. Теперь откроем index.html и начнем с разметки нашей страницы, а именно с хедера. Но перед тем как делать хедер, нам нужно сделать стандартную разметку любой html страницы. Сейчас покажу о чем я.
Теперь разберем каждую строку. Комментарии:
Строка №1: здесь указан так называемый доктайп документа, он обязателен, чтобы браузер понимал в каком виде ему нужно интерпретировать веб-страницу. Существует 4 вида доктайпов:
- XHTML 1.0
- XHTML 1.1
- HTML 4.01
- HTML 5
В свою очередь XHTML 1.0 делится на подвиды: строгий синтаксис (Strict) — не допускает никаких вольностей, нельзя применять тег , ; переходный (Transitional) — допускает некоторые вольности в верстке, которые нельзя использовать при строгом; содержащий фреймы (Frameset). XHTML 1.1 не делится ни на какие подвиды, он единственный, разработчики даже пророчили, что он вытеснит постепенно HTML, но если почитать за это детальней, то у HTML развился с 4 версии до 5, а стандарт XHTML, приостановил свое развитие, но тем не менее можно встретить проекты, у которых указан именно этот doctupe.
HTML 4.01 также делится на 3 повида: строгий синтаксис (Strict), переходный (Transitional) и содержащий фреймы (Frameset).
Ну и наконец-то HTML5 для всех типов документов, самый универсальный. В дальнейшем у нас предстоит большое количество статей именно с этим доктайпом. Все свои новые проекты я делаю с применением именно его. Но не будем забегать наперед, сейчас мы разбираем именно HTML 4.01. В данном примере мы используем как раз Transitional (переходный), он очень подходит для новичков.
Строка №2: открытый тег он идет сразу же после указания доктайпа и включает в себя абсолютно весь html-код, вконце документа следует закрывающий тег .
- заголовок страницы
Заголовок страницы - описание страницы
- ключевые слова, разделенные запятой
- и множество другой мета-информации.
После
следует тег . Именно в нем мы уже будет верстать наш сайт. Все, что находится в пределах этого тега, будет отображаться непосредственно в браузере.Вот мы выполнили и разобрали стандартную разметку страницы с применением html4. Этот урок я буду завершать, а как сверстать основные элементы, с применением я расскажу в следующем уроке, который напишу в ближайшие дни. Не забывайте добавляться в
Аркадий Мочульский:
Саша, привет. Прочитал последний пост на канале и возник вопрос к тебе. Я бы хотел немножко фронтенд подучить. С чего начать? Знаю базовый HTML/CSS, совсем азы JS.
Аркадий, привет!
Базовые знания - это хорошо. Можно начинать верстать. В процессе придёт понимание того, каких знаний не хватает. Потом идешь читать статьи, книги, смотреть видео уроки, возможно стоит записаться на курсы.
С чего начать?
Моё знакомство с вёрсткой началось в 10 классе. Стало интересно, как делают сайты. Зарегистрировался на каком-то бесплатном хостинге и начал верстать сайт. Попутно читал статьи как что-то реализовать. После этого начал за деньги делать сайты для учителей.
Для начала необходимо попробовать. Понравилось? Можно начинать учить.
Установи редактор кода, например, Atom . Попробуй:
- Сверстать домашнюю страницу своего сайта
В заметке про указал ссылки на интересные домашние страницы, посмотри их - Придумать идею для небольшого веб-сервиса и самостоятельно запрограммировать
Посмотри примеры: помидорковый таймер , тяжеловато . Мой первый проект был XSLT редактор , он упрощал работу по созданию новых XSLT-файлов
Как только сталкиваешься с проблемой - ищи решение в интернете. 99% твоих проблем уже решены и описаны в статьях. Описание HTML-тегов и свойств стилей CSS можно смотреть на htmlbook.ru .
Научись работать c веб-инcпектором: смотреть и редактировать вёрстку, стили, отлаживать скрипты. Если понравился чей-то сайт, не стесняйся заглянуть «под капот» и посмотреть как там всё сделано.
Иногда встречаются весёлые сообщения:
Если в процессе вёрстки что-то пошло не так, то открывай инспектор и ищи ошибку. Чтобы узнать как с ним работать - посмотри эти видео:
Когда начнешь уверенно чувствовать себя в вёрстке - переходи к изучению JavaScript. Cначала разберись с возможностями языка, а потом уже переходи к изучению библиотек и фреймворков.
Изучение языка советую начать с книги Дэвида Флэнагана - « ». Книга большая, но не пугайся. Читать целиком необязательно.
Ещё можешь посмотреть видеокурсы, на ютубе их много. Вот пара интересных:
Что дальше?
У Ильи Кантора есть классный скринкаст по Gulp
Понравилось верстать? Теперь можно ускорить работу. Изучи какой-нибудь препроцессор для стилей: SASS , LESS или Stylus . Автоматизируй сборку стилей и их обработку через