Html — Начинающему верстальщику


Содержание

ТИПИЧНЫЙ ВЕРСТАЛЬЩИК

Итак, настало время продолжить статью и дополнить её недостающей историей. Садитесь поудобнее, сейчас я расскажу о том, как устроилась работать верстальщиком без опыта.

Это была осень 2015 года. Встал вопрос о поиске работы. Сложность была в том, что я точно не знала кем хочу быть, поэтому решила пойти по пути наименьшего сопротивления: начала рассматривать вакансии, которые максимально подходили к моей специальности. Я ж дипломированный экономист как ни как!

Зарегистрировалась на популярном сайте hh.ru и менее популярном — rabota66.ru (региональный сайт Свердловской области) и составила резюме о себе.

Результат за неделю:
1. Одно собеседование на должность брокера, куда меня не взяли из-за отсутствия серьезного опыта работы в этой сфере.
2. Узнала, что в престижном БЦ Екатеринбурга собирают людей для поиска лохов, которые отдали бы свои деньги для заработка на посреднической платформе Форекс.
3. Не пошла на собеседование в Сбербанк, потому что вместо собеседования там было ТЕСТИРОВАНИЕ. Собирали людей в общей комнате для прохождения теста, после сдачи которого ты услышишь: «Спасибо, мы Вам перезвоним». Не стала даже пытаться и тратить своё время. Сразу поняла, что это не то, что мне нужно.

Окей, я снова зашла на вышеуказанные сайты и создала вторую учётку с новым резюме. Теперь я — не экономист, а веб-дизайнер и верстальщик в одном лице. К веб-дизайну всегда тянуло, а сайты — это то, где я обитаю 90% своего времени.
В навыках указала следующее: Adobe Photoshop, Illustrator, HTML5, CSS3, PHP, MySQL.
Всё.
Я даже о существовании jQuery тогда не подозревала, а PHP и mySQL знала на уровне ковыряния в чужом коде. HTML5, CSS3 — из прочитанной книги на парах, на последнем курсе института.
Из всего этого списка идеально владела только Adobe Photoshop.

Начала прозвон с менее серьезных организаций, которые занимаются дизайном. Откликнулась только студия полиграфии. Самая обычная, которая занимается всем на свете — от копирования до дизайнов любых сувенирок.
Если бы я осталась там работать, то узнала бы всё стандартные размеры визиток, как работать с Corel и Illustrator и другие дизайн темы. Но проблема в том, что в их компании полный беспорядок. Нет кассиров, а это значит, что ты должен бегать между кассой и машинами (печатающие станки или компьютер). Я сама видела как из-за отсутствия делегирования у них собиралась очередь из людей и в воздухе образовывалась атмосфера любого отделения Почты России. И за всё это они хотели платить в районе 8-15к. Больше я там не появлялась.

На следующий день, мне поступает звонок. Вы только вдумайтесь.
МНЕ. ЗВОНИТ. ПОТЕНЦИАЛЬНЫЙ. РАБОТОДАТЕЛЬ.
Говорит: «Увидели Ваше резюме, мы откликнулись на Ваш аккаунт. Нас интересует веб-разработчик. Посмотрите нашу вакансию и дайте ответ». Кладу трубку и думаю ААААА КАК ЖЕ КРУТО!
Но это было бы слишком просто, если бы не одно но. У нас произошла крупная авария в доме и уже третий день не было электричества. Мой старенький телефон, на тот момент это был iPhone 3GS, не мог осилить загрузку регионального сайта и пришлось звонить подруге, прислать свой лог/пасс от сайта, чтобы она продиктовала мне всё, что сказано в вакансии.
Чего там только не было… Надо было знать JavaScript, PHP, Ruby и всё-всё на свете. Уже даже мысленно попрощалась с этим предложением, но все равно написала SMS и мы договорились, чтобы я пришла к ним в офис в 10:00.

Прихожу на следующий день. В офисе сидит пара человек. Тишина. Никто не встречает, как это обычно бывает и не говорит, что делать. Потом программист (как я потом узнала) показывает на скайп и говорит: «Заходи в учётку». Хорошо, что я помнила данные от входа наизусть.

Там я добавила CTO в друзья и получила первое тестовое задание. Заключалось оно в том, чтобы объяснить причину, почему их виджет в браузере Mozilla отображается не так, как в Chrome.

Да-да, сейчас я бы посмотрела в инспектор, нашла кроссбраузерный стиль, который не дописан и исправила бы всё.
Но тогда… Это было слишком сложно.
Просидела час, если не больше, чтобы в итоге написать ей: «Что-то связано с кроссбраузерностью», до конца не понимая значение слова.

После пришел Big Boss этой компании и началось то самое собеседование, к которому все привыкли. Рассказала ему, что знаю, что хотела бы изучить и какую преследую цель — научиться делать сайты. Так мне дали испытательный срок на 2 месяца, который успешно прошла.

Основные выводы по поиску работы, если у Вас нет опыта:

• Не стоит бояться создавать резюме о себе, пусть оно хранится на сайте, даже если Вы не занимаетесь активным поиском;

• Создавайте резюме о себе не только на популярных сайтах по поиску работы, но в региональных. Вероятность того, что Вас заметят, заметно возрастёт;

• Опишите всё, что знаете в порядке убывания по уровню знаний. Не стоит писать лишнего, что вряд ли заинтересует работодателя. Всё должно быть по делу и связанное в web-разработкой;

• Работодателям выгоднее взять сотрудника с минимальными знаниями, по экономическим соображениям, но это правило не действует для престижных больших компаний. Они готовы платить и ищут таланты;

• Есть вероятность, что Вам позвонят, особенно, если Вы живете в мелких городах или городе-миллионнике. Москва и Санкт-Петербург — не подходят. Недостаток кадров в регионах ощущается остро;

• Если работодатель позвонил Вам лично, скорее всего поиск кадров затянулся, либо есть текучка кадров. Изучите причину этого явления;

• Если в вакансии указан большой перечень технологий, который необходимо знать — не спешите отказываться. Есть большая вероятность того, что работодатель представления не имеет, что ему нужно, поэтому выписал актуальные технологии из интернета;

• Если в вакансии перечень технологий не велик, но всё-таки Вы что-то не знаете, например, Git — не расстраивайтесь. Лучше сказать об этом на собеседовании. Уверена, что он с радостью возьмется Вам дообучить, особенно если в компании уже есть веб-разработчики.

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

Верстальщик HTML (HTML-верстальщик)

HTML-верстальщик – это специалист, выполняющий вёрстку web-страниц. Другими словами, он создаёт HTML-шаблон для web-сайта с использованием знаний HTML-кода и всех особенностей стиля и графического оформления. Профессия подходит тем, кого интересует информатика (см. выбор профессии по интересу к школьным предметам).

HTML — аббревиатура от Hyper Text Markup Language (англ.) — это язык разметки гипертекста, принятый в World Wide Web для создания и публикации web-страниц. Соответственно, HTML-верстальщик – это специалист, выполняющий вёрстку web-страниц. Другими словами, он создаёт HTML-шаблон для web-сайта с использованием знаний HTML-кода и всех особенностей стиля и графического оформления. Созданный код должен одинаково отображаться во всех браузерах («кросс-браузерность») с учетом разных разрешений монитора и количества цветов.

Особенности профессии

Верстальщик посредством кода HTML, CSS и JavaScript создает HTML-шаблон, реализация которого состоит из нескольких этапов:

  • анализ графического дизайна сайта;
  • подборка модели шаблона;
  • нарезка графических спрайтов;
  • сборка HTML-шаблона.

В настоящее время существует большое количество компьютерных программ, которые автоматизируют труд верстальщика, различные текстовые редакторы с подсветкой кода, визуальные редакторы (Notepad++, Adobe Dreamweaver), front-end фреймворки (наборы фрагментов кода и библиотек классов для ускоренной разработки макета сайта путем прототипирования — ZurbFoundation-4 и т.п.). Они позволяют писать большие фрагменты кода в наглядном режиме, то есть результат каждого этапа работы можно наблюдать в отдельном окне. Но профессиональный HTML-верстальщик этими программами не пользуется. Он должен уметь использовать кодировку HTML вручную, без помощи визуальных редакторов, чтобы обеспечить максимальную корректность кода в минимальном весе.

HTML-верстальщик должен знать каскадные стилевые таблицы CSS, владеть JavaScript и базовыми навыками web-программирования на языках PHP, Perl или Java, а также основными графическими редакторами Photoshop, Fireworks, Gimp. Опытный верстальщик может создать небольшой сайт, используя текстовый редактор Microsoft Word c минимальным количеством средств и инструментов.

Успешная работа HTML-верстальщика строится на трех китах: качественный код, принцип юзабилити, адаптивный дизайн. Качественный код должен быть хорошо структурирован и иметь правильное семантическое оформление в соответствии с правилами SEO-оптимизации. Принцип юзабилити подразумевает простоту в разработке интерфейса. Навигация по сайту не должна заставлять посетителей напряженно думать. Простота интерфейса — залог успеха проекта. Адаптивный дизайн сделает сайт дружелюбным к мобильным устройствам.

При работе над крупными проектами работа HTML-верстальщика сводится к созданию только лишь макета сайта. Различные модули и элементы в него устанавливают программисты узкой специализации. Но на небольших проектах HTML-верстальщику приходится выполнять работу с кодом от начала до конца.

Плюсы и минусы профессии

Плюсы:

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

Минусы:

  • присутствует доля рутинности и однообразия
  • необходимость долговременного сидения за компьютером

Место работы

Интернет-компании, фирмы по разработке сайтов, дизайн-студии, организации со своими интернет-проектами, фрилансерская работа.

Верстка сайта с нуля. Меню навигации. Часть 1.

Начиная с этого урока, мы будем учиться верстке сайта с нуля в популярном flat стиле. Эта тема очень объемная и мы посвятим ей не один урок. Что означает это на практике?

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

Будем исходить из того, что заказчик оказался добрым человеком и предоставил нам вместе с макетом и заранее порезанные картинки. Для создания HTML страницы, нам потребуется: .psd макет, папка с картинками, Photoshop, Notepad++ и браузер.

Мы говорим с вами про макет, но пока это только картинка, из которой нам предстоит сделать полноценную HTML страницу.

Обратите внимание, что наш макет представляет из себя классический пример flat дизайна. Flat дизайн – это значит «плоский», здесь вы не увидите объемных теней, градиентов и других «наворотов».

Открываем макет в фотошопе и берем оттуда всю нужную информацию – цвет, шрифт, размеры и начинаем писать код, первой у нас идет шапка сайта, состоящая из логотипа и меню навигации. Разумеется, что наш сайт будет адаптивным под любые устройства и разрешения экрана, поэтому все размеры указываем в % и em.

Верстка шапки сайта

Создаем HTML страницу и делаем разметку нашей шапки. Содержимое шапки пишем внутри парного тега header.

Без оформления CSS стилями выглядит шапка совсем не так, как надо. В файле style.css, пропишим селекторам соответствующие свойства, чтобы шапка выглядела согласно макету.

Разберем основные моменты. Логотип и меню навигации должны быть в одной строке. Поэтому в блоке div с логотипом задаем обтекание — float: left; Навигационное меню встанет справа от логотипа. Пункты меню должны быть в одной строке — display:inline-block; Отменить обтекание можно вставкой в код пустого дива —

Как правильно и быстро верстать сайты

Всем привет, друзья. Сегодня мы затронем очень важную тему — быстрая и правильная HTML верстка макетов. Углубимся в проблему, разберем все возможные способы ускорения верстки без потери в качестве на всех этапах. Данный вопрос интересует очень многих веб-разработчиков, интересовал и меня, когда я уже углублялся более серьезно в веб-разработку. Теперь, я с радостью поделюсь накопленными знаниями, хитростями и фишками скоростной верстки, чтобы вы, дорогие мои друзья, смогли заработать больше денег за единицу времени. Ведь именно скорость верстки влияет на то, какую колбасу вы будете кушать на завтрак. Обычно медленные веб-дизайнеры кушают на завтрак колбасу за 80 рублей из эмульсии шкурок, в то время, как более прозорливые и быстрые — хорошую докторскую за 900 рублей/кг. Конечно, есть много веб-дизайнеров, которые скажут — «Я выполняю работу вдумчиво и качественно, соответственно, медленно». Я не буду долго углубляться в психологический анализ, но это отговорки и самооправдание. Можно верстать очень быстро и качественно, это не картину маслом малевать.

Давайте проанализируем, какие этапы нам приходится выполнять в процессе верстки. Это позволит нам выявить основные проблемы и узкие места верстки, которые можно автоматизировать или ускорить. К слову сказать, ускорение HTML верстки, собственно и заключается в автоматизации (использование инструментов) и в ускорении (ваша скорость печати, предварительный анализ, сообразительность).

1. Анализ макетов и подготовка к верстке

Пойдем по хронологии ваших действий — от работы с PSD макетом (или другим исходником), до, собственно говоря, верстки. Конечно, немаловажную роль играет макет, который нарисовали до вас или вы сами наваяли, так как правильно подготовленный макет позволит вам сэкономить кучу времени. В конце данного урока я приведу памятку для дизайнера по подготовке макета к верстке. А пока представим, что вы простой верстальщик и по определенным причинам вам пришлось верстать макет дизайнера, которому глубоко плевать на ваши проблемы и который слабо представяет, что делют с его макетом далее. Это типичная ситуация в настоящее время.

1.1 Визуально разбейте макет на повторяющиеся части, определите сетку

Первое, что вам необходимо сделать — это открыть макет и проанализировать. Потратьте на это некоторое время, ознакомьтесь с повторяющимися частями макета. Например, если это Landing Page — повторяющиеся части — это секции, у которых, скорее всего, есть очень много одинаковых заголовков. Если это многостраничный сайт, то на всех страницах должна быть шапка и подвал. После визуального ознакомления с макетом (макетами), определите базовые переменные и параметры проекта, используя ваш препроцессор и подготовьте страницу с заготовками кода.

Вообще, очень важную роль в скорости работы играет использование CSS фреймворков. Не зависимо от того, стилизуете ли вы все элементы CSS фреймворка, например, Bootstrap или используете только сетку — вы ускоряетесь до скорости света при позиционировании элементов на странице и решении вопроса с адаптивностью сайта. Чаще всего, в наше нелегкое время, требуется именно адаптивная верстка. Если вы — веб-стдия, хотите выполнять проекты быстрее и порадовать ваших верстальщиков (если у вас такая система распределения обязанностей), научите веб-дизайнеров пользоваться сеткой. Недовольные возгласы о стандартизации веб-дизайна и ограничениях можно проигнорировать, мы не картины на Невском рисуем, а значит нужно использовать эффективные и быстрые инструменты для максимальной стандартизации. Не в ущерб качеству, конечно. Сетка будет не лишней точно и даст крепкую основу для верстки.

Если вы — самобытный верстальщик 80lvl и считаете, что сами сможете сделать сетку проекта лучше Bootstrap — разработайте вашу собственную сетку, протестируйте и подключите к вашему проекту. Проект без сетки — геморрой на долгие года, благоприятная и теплая среда для размножения HTML костылей в будущем.

1.2 Определите параметры проекта

Не зависимо от того, используете ли вы какой-либо CSS фреймворк, обязательно используйте CSS препроцессор. Это очень важно, так как позволит вам сэкономить время на написании CSS. Открывая любой свой выполненный проект я с ужасом наблюдаю, как много времени было потрачено на написание CSS, можно сказать, что 60-70% работы на этапе верстки — это написание CSS. И было бы логично данный этап автоматизировать. Я рекомендую использовать препроцессор Sass, но здесь вы можете выбрать любой препроцессор, который вам нравится. Если вам понравился Sass синтаксис, рекомендую ознакомиться с руководством Sass для самых маленьких, где я рассказываю о преимуществах использования препроцессора и привожу примеры, которые демонстрируют эффективность верстки с использованием Sass. Довольно трудно объяснить новичку преимущества использования препроцессора, но ребята, которые, как говорится, «уже хлебнули», понимают, на сколько это эффективный инструмент. Думаю, после выполения верстки 10-15 макетов к вам придет это понимание, а пока просто поверьте мне на слово — верстать с CSS препроцессором быстрее.

Создайте файл _typography.html, подключите к нему все необходимые стили и библиотеки. Это будет ваш базовый плацдарм с типовыми элементами. Исходя из данных открытого в графическом редакторе макета, определите такие параметры проекта, как:

  1. Базовый шрифт. Определяется для селектора body. Это размер и шрифт текста на текстовых макетах сайта, например, на странице «Статья» или размер и шрифт текста наиболее часто повторяющихся текстовых блоков на макете Landing Page. Если не смогли определить размер, так как, например, все элементы одностраничника разные, напишите font-size: 16px, это среднее значение по больнице. Отобразите базовую верстку в _typography.html;
  2. В файле _vars.sass определите переменную акцентного цвета и остальных явных цветов макета. Здесь и далее я буду приводить в пример и менно Sass, но вы можете без труда спроецировать информацию на ваш препроцессор. Постарайтесь задавать интуитивно понятные названия переменным и комментировать переменные, чтобы в дальнейшем не запутаться;
  3. Пройдитесь по всем страницам проекта и определите заголовки от h1 до h6 (Размеры, капс/некапс, шрифт, цвет). Сделав это заранее, вы сэкономите около 10 минут вашего времени или 1 часа, с учетом времени на прокрастинацию. Также определите инверс для заголовков и цвета текта. Добавьте родительский класс .dark-section ко всем заголовкам и тегам типографики p, blockquote, ol, ul, если в вашем макете есть секции «светлым по черному». Отобразите базовую верстку типографики в _typography.html;
  4. Также было бы полезно сразу определить типографику вашего проекта. Для тега body определите такой параметр, как line-height, обычно это 1.4 — 1.7 без указания единиц измерения. Расстояние между строк базового текста должно быть ориентировочно такое-же, как на макете в графическом редакторе. Здесь очень важную роль играет ваш глазомер, он очень сильно влияет на скорость вашей работы. Вам не придется измерять линейкой всё и вся, если ваш глазомер работает как надо. Данный скилл, к сожалению, развивается только с опытом и я не могу представить себе упражнения лучше, чем верстка, сам рабочий процесс.
  5. Определите кнопки. В вашем макете, наверняка есть кнопки. Определите параметры самой большой кнопки и используйте CSS модификатор для получения кнопок другого размера. Не определяйте заранее отношение элементов к «внешнему миру», такие как float, только внешний вид. Единственное, опытным путем было выявлено, что чаще всего кнопки наиболее универсальны по отношении к внешним элементам, если определены, как display: inline-block по-умолчанию. Отобразите базовую верстку кнопок в _typography.html;
  6. На ваше усмотрение, определите другие специфичные конкретно для вашего проекта параметры и повторяющиеся блоки заранее. Если вам кажется, что можете что-то забыть — комментируйте.
Цукерберг рекомендует:  Типовые задачи для обучения программированию

1.3 Ускоряем экспорт данных из макета

Раньше было такое понятие, как «Нарезка изображений» или «Нарезка макета». Сейчас такое определение не совсем корректно и более подойдет Экспорт данных из макета. Экспорт данных заключается в экспорте изображений и определении параметров для CSS.

Если вы пользователь Photoshop, вы можете использовать плагины для определения CSS свойств, такие, как CSS Hat. Отличная альтернатива подобным плагинам и инструментам — развитый глазомер. Когда у вас будет достаточный опыт, вы естественным образом откажетесь от подобных инструментов. Обратите внимание, что копируя абсолютно все CSS свойства из CSS Hat, вы будете верстать несколько быстрее, но потеряете в качестве и возможностях кастомизации. Дело в том, что CSS Hat не всегда правильно определяет отношение элементов к другим. Там где нужен padding, он определяет margin, там где нужна резиновая ширина или значение в процентах, он определяет фиксированные значения. Поэтому развивайте глазомер и храните базовые параметры в переменных.

Для быстрого экспорта картинок достаточно пользоваться новым Adobe Photoshop или Adobe Experience Design. У первого достаточно кликнуть на слое правой кнопкой мыши и вырать пункт Quick Export As PNG. В Adobe XD процесс экспорта изображений также прост и даже есть возможность экспорта нарисованных иконок в формат SVG. На данном этапе не слишком заморачивайтесь оптимизацией изображений, так как это задача для таск-менеджера. Об этом чуть позже.

Что касается иконок:

  1. Если это сложные иконки или иконки-изображения, которые предположительно должны меняться контент-менеджером через админку сайта — экспортируйте их как png и подключайте в тег img, как обычные картинки;
  2. Если это «фиксированные» иконки, которые ни под каким предлогом не будут изменены на сайте и контент-менеджеру их менять незачем (например, иконки телефонов, почты, карты и т.д.), можете объединить их в спрайт и использовать через CSS, задавая одной картинке разные координаты background-position. Данную операцию можно автоматизировать с помощью Gulp плагина css-sprite. Хотя можете сделать сами, если иконок немного, просто разбив направляющими поле на матрицу из квадратов заданной ширины и высоты. К Gulp вернемся чуть позже и подробнее рассмотрим важность таск менеджера в быстрой верстке. Только предварительно убедитесь, что дизайнер не использовал какой-либо шрифтовой айконпак. Если это так то достаточно будет подключить соответствующий айконпак к проекту;
  3. Если это одноцветные простые иконки, также убедитесь, что дизайнер не использовал шрифтовой айконпак. Если это так то подключите соответствующий айконпак к проекту. Чаще всего используется шрифтовой айконпак Font Awesome. Если иконки самобытные — переведите их в вектор и создайте свой шрифтовой айконпак. У нас есть урок на эту тему: Создание шрифтового Icon Pack с использованием сервиса Fontello.

2. Скорость печати

После того, как вы подготовили все материалы, экспортировали картинки, сделали шрифтовой Icon Pack проекта, подготовили все иконки, настроили проект, можно приступать к верстке. Думаю, очевидно, что если вы хорошо знаете теги и CSS свойства, узким местом в скорости может быть только скорость набора символов на клавиатуре в процессе HTML верстки и написания CSS свойств. Для прокачки данного скилла более, чем достаточно освоить какой-либо метод быстрого набора символов на клавиатуре. Методов много и эта информация легко гуглится. Занимайтесь, практикуйтесь и все получится. Здесь также немаловажную роль играет практика именно верстки.

Мне как-то написал начинающий веб-разработчик, который сетовал на то, что его мечты о легком заработке не оправдались и за верстку макета Landing Page на биржах фриланса ему предлагают 2000 руб. Он отправил мне примерный макет. Я спросил, сколько бы он взял за этот макет денег, на что бедолага ответил мне — 10-12 т.р. Если бы мне предлагали на верстку LP за 2000, когда у меня была небольшая пригоршня опыта, как у этого парня, я искренне был бы рад таким возможностям. Конечно, сейчас верстка в моем исполнении стоит несколько дороже этой цифры, но если бы я брал такие проекты за 2т.р, с текущей скорость работы я без проблем поднимал бы 4-5 т.р в день без потери в качестве, работая по 7 часов в день. Не густо, но уже не плохо. Вообще, признаюсь вам, друзья, меня подбешивают нытики, у которых все плохо, у таких всегда будет куча отговорок и бублик в кармане. Поэтому оставим эту историю и двигаемся дальше к нашей цели верстать быстро и качественно.

3. Используйте Emmet и/или Jade

Я люблю Emmet. Благодаря этой полезной штуке, моя работа в 10 раз быстрее, чем без нее. Без лишних слов, просто посмотрите урок: на YouTube.

Также, вы можете использовать Jade или любой другой HTML препроцессор. Штука тоже удобная и классная, но для моих задач хватает Emmet с головой. Вангую много недовольных поклонников Jade, но несмотря на все преимущества и фишки, include для меня не многим проще вставки шапки Ctrl+V, а репит миксина не легче того-же Ctrl+Shift+D. Теоритически, если подумать, изменив шаблон миксина, можно не заморачиваться с переверсткой однотипных накопированных элементов, но таких ошибок я не допускаю, да и крупные проекты не по моей части, поэтому, надобности в ускорении подобных моментов нет. Пробуйте, друзья, экспериментируйте, может вам понравится такой инструмент :-)

4. Используйте ваши наработки

Используйте Github Gist для сохранения ваших наработок, кусов кода, блоков и даже целых секций. Всего того, что вам может оперативно пригодиться в процессе верстки. У нас есть урок по настройке Github Gist в редакторе Sublime Text для быстрого доступа и поиска нужного гиста: урок на YouTube с таймкодом на подключении Gist и отдельный урок по Gist.

5. Используйте таск-менеджер

Использование таск менеджера, например, Gulp — важнейший элемент быстрой работы над версткой. С помощью таск-менеджера вы сможете автоматизировать такие моменты, как: создание рабочего веб-сервера с автообновлением страницы при сохранении в редакторе кода; удобное использование препроцессоров; автоматизация рутиных задач, таких, как оптимизация изображений, сжатие CSS, JS, если нужно, то и HTML и многие другие задачи.

Вы можете также использовать инструменты типа Prepros, но Prepros — это не Gulp. Для Gulp существует тысячи полезных плагинов — от работы с файловой системой, создания спрайтов, до генерации шрифтовых иконок и многое другое. Очень часто меня спрашивают, в чем разница между Gulp и Prepros, вот вам и ответ. За один раз вы сможете настроить целый комбайн, построить нейросеть задач и пустить по трубам горячую воду, все будет автоматически работать и экономить ваше время при работе над более или менее сложными проектами.

Более подробно изучить Gulp вы можете в уроке Gulp для самых маленьких — подробное руководство.

6. Изучайте jQuery

Если бы данное руководство было написано для Front-End разработчиков, все сводилось бы к изучению JavaScript и его фреймворков, таких, как Angular. Но я не силен во Front-End, как и в программировании в целом, моя стихия — веб-дизайн, поэтому пусть настоящий глубокий фронтенд остается на закуску акулам прграммирования. Чаще в процессе верстки приходится решать несколько другие задачи. А именно: анимация каких-либо блоков, настройка сортинга в таблицах, создание табов и аккордеонов, подключение библиотек, определения фоллбека для SVG файлов, определение параметров документа для несложных операций и прочие мелкие скриптовые работы. Для этих целей нет лучше библиотеки, чем любимой всеми верстальщиками jQuery. Она проста, элегантна и обрасла огромным количеством плагинов, которые решают практически все необходимые задачи маленьких и средних проектов.

Практикуйтесь в решении каких-либо задач с использованием jQuery, изучите базу (благо, там немного) и разминайте мозг, создавая интересные динамические элементы и jQuery плагины.

jQuery не просто так был вынесен в отдельный пункт. Чаще всего узким местом верстки по времени являются многочасовые затупы над скриптами проекта и чем лучше вы разбираетесь в jQuery, тем быстрее выполняете проекты без изнурительного поиска решений на Stack Overflow.

Для решения типовых задач (карусели, галереи, попап окна, валидация форм и т.д.) используйте jQuery плагины, не стоит писать свои велосипеды — это долго, нестабильно и неэффективно в большинстве случаев.

Гайд для веб-дизайнеров по подготовке макетов для быстрой верстки

В принципе, многое описано в статье «Как стать крутым веб-дизайнером», но здесь я приведу основные пункты именно по подготовке макетов к верстке и правильной организации работы, которые, соответственно, ускорят работу в целом:

  1. Не увеличивайте фотографию больше ее оригинального размера — в верстке такое фото будет некачественным;
  2. Не масштабируйте графику непропорционально — такой дефект версткой точно не исправить ;-);
  3. Не применяйте режимы наложения слоев, отличные от обычного (Normal) — в верстке НЕВОЗМОЖНО воспроизвести какие-либо режимы наложения, как в графическом редакторе;
  4. Старайтесь не применять фильтры на изображения, которые должны иметь несколько состояний (обычно и при наведении, например). Все наложения, изменения — только посредством наложения нового слоя. Всё должно быть легко воспроизведено в HTML верстке. К ретуши и подготовке фото это не относится;
  5. Не масштабируйте фотографию до конвертации в смарт объект — верстальщик сам определит размер изображения в Responsive верстке, сохраняйте оригинал смарт-объекте;
  6. Обрезайте фотографию только посредством обтравочной маски для фигуры, оригинал фотографии, как и в предыдущем пункте, должен быть сохранен в смарт объект — не забывайте: «Каждый раз, загружая изображение для сайта и скругляя его вручную в фотошопе, где-то в мире плачет один котенок. «;
  7. Если вы рисуете иконки в Photoshop, не растрируйте их в уменьшенном размере. Не забывайте, что макету еще предстоит этап верстки и все иконки необходимо будет векторизовать. Оригинальные смарт объекты с иконками должны быть достаточно крупными для качественной трассировки;
  8. В идеале, у вас должны быть все плоские иконки и графика в формате SVG, в отдельной папке. Если вы ленивый дизайнер — предусмотрите возможнсть качественной конвертации или экспорта иконок в SVG;
  9. Всегда создавайте отдельную папку со всеми используемыми шрифтами в формате TTF или OTF. Иконочные шрифты также должны быть размещены в этой папке;
  10. Создавайте макеты 1 в 1 (72 пикс. на дюйм). При 100% отображении макеты должны быть в таком же масштабе, в котором предполагается результат HTML верстки;
  11. Обязательно используйте в работе какую-либо систему сеток. Можно разработать самому, но я рекомендую использовать систему сеток Bootstrap. Ширину контента можно кастомиировать от оригинальной ширины Bootstrap сетки, для этого можно использовать плагины для создания сеток в случае, если вы пользователь Photoshop;

Сразу отвечу на самые ожидаемые и каверзные вопросы по верстке:

1. Adobe Muse и подобные инструменты? — да, можно использовать и это будет быстро. Если только ваш проект не крупнее односложного одностраничника, который не нуждается в развитии, продвижении и системе управления.

2. Как быть с Perfect Pixel? — я искренне уверен, что Responsive Design и Perfect Pixel понятия разные и даже не совместимые. Я, как веб-дизайнер, конечно, обладаю некоторыми чертами перфекциониста, но если идея хороша, она будет блистать и в Responsive верстке, если идея, простите за выражение, говно, то хоть сколько ее не полируй и подгоняй по пикселам, она так и останется неработающим высером. Поэтому включите ваш дар убеждения, запаситесь аргументами и проведите беседу с вашим клиентом относительно бесполезности такого излишнего перфекционизма.

3. Почему бы все картинки не сделать спрайтами, ведь тогда будет всего один запрос к серверу? — есть изображения, которые должны загружаться контент-менеджером. Вряд ли контент-менеджер сможет быстро и безболезненно вычислить координаты новой добавленной в спрайт картинки. Не забывате о тех, кто будет обслуживать и наполнять сайт.

4. Где кончается грань верстки и начинается Front-End, это разве не одно и то же? — все просто, если стоит задача разработать сложный интерактивный интерфейс какого-либо сервиса или веб-приложения, где нужна тесная работа с базой данных — это Front-End. Такие уникальные проекты выходят за рамки области компетенции и бюджета одного фрилансера, чаще всего подобные задачи ставятся команде разработчиков и подходы к таким проектам совершенно другие.

Премиум уроки от WebDesign Master

Создание контентного сайта на Jekyll от А до Я

Как стать верстальщиком, или Почему азы верстки должны знать все

Время чтения: 19 минут Нет времени читать? Нет времени?

В комментариях к одной из наших статей читатель попросил сделать подборку курсов верстки веб-страниц. Простой список ссылок на сайты реальных и виртуальных учебных заведений был бы полезным для части аудитории блога. А чтобы публикация заинтересовала всех читателей, ее тему пришлось расширить. Эта статья будет полезной:

  • Владельцам сайтов и маркетологам. Вы узнаете, что такое HTML-верстка и какие задачи она решает.
  • Начинающим вебмастерам. Вы поймете, в каких случаях можно обойтись без верстальщика, а в каких можно сделать его работу самостоятельно.
  • Всем сторонникам принципа «если хочешь сделать хорошо, сделай сам». Вы узнаете, какие минимальные знания в области верстки веб-страниц нужны каждому блогеру, копирайтеру, маркетологу, владельцу сайта.
  • Будущим профессионалам. Вы узнаете, как стать верстальщиком.

Что такое HTML-верстка и зачем она нужна

Верстка — это этап разработки сайтов, на котором визуальные макеты переводятся в код, который обеспечивает отображение страниц в браузерах. Условно это можно представить так: верстальщик переводит страницу с визуального языка дизайнера на язык браузеров.

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

Нужны ли услуги верстальщика владельцам существующих сайтов? Ответ на вопрос зависит от потребностей вебмастера.

Если блогера или администратора корпоративного сайта устраивает функциональность и внешний вид ресурса и его отдельных страниц, верстальщик ему не нужен. С публикацией заметок в блоге, описаний товаров в интернет-магазине, контента на страницах сайта справится любой сотрудник с минимальными знаниями HTML. Более того, опубликовать заметку или описание товара вы сможете, даже если ничего не слышали про HTML.

В популярных CMS есть визуальные редакторы, с помощью которых можно отформатировать контент и сделать его читабельным. Обратите внимание на возможности штатного WYSIWIG-редактора WordPress.

Вы можете набирать текст непосредственно в редакторе CMS, форматировать его, добавлять фотографии. Функциональность CMS обеспечивает корректное отображение контента с небольшими оговорками.

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

В теории решить проблему можно без знаний HTML. Достаточно правильно отформатировать контент в текстовом процессоре и перенести его в визуальный редактор CMS.

Редактор CMS автоматически преобразовал визуальный формат контента в HTML-код. То есть администратору сайта для публикации контента достаточно уметь работать с текстовым процессором и WYSIWYG-редактором CMS.

Но иногда копирование содержимого из Word в CMS приводит к ошибкам. Обратите внимание на код страницы.

На практике хотя бы минимальные знания HTML контент-менеджеру нужны. Это подтверждает иллюстрация выше: в код страницы попали лишние теги подзаголовка. Такой мусор — частый побочный эффект при копировании контента из текстовых процессоров, например, Word. Подробности дальше.

«Верстальщиком можешь ты не быть, но HTML знать обязан»

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

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

Лишние теги делают код страницы невалидным. Валидность кода не входит в число факторов ранжирования сайтов крупнейших поисковых систем. Однако невалидный код страницы может направить поисковых роботов по ложному пути и исказить результаты сканирования страницы.

Простой пример: подзаголовки помогают поисковикам структурировать текст на смысловые блоки. Если в подзаголовке написано «Как составить файл robots.txt», поисковая система понимает, что в соответствующем разделе страницы речь пойдет о файле robots.txt.

Что случится, если подзаголовок не будет обозначен верными html-тегами? «Яндексу» и Google будет сложнее определить, о чем идет речь в соответствующем разделе страницы. Роботы могут посчитать страницу нерелевантной запросам о файле robots.txt. В результате сайт получит меньше посетителей.

Теперь понятно, почему блогеру, журналисту или сапожнику и по совместительству администратору сайта сапожной мастерской не помешает знать хотя бы основные HTML-теги? Например, эти знания могут помочь удалить «мусор» со страницы.

Большинство WYSIWIG-редакторов в CMS имеют два режима: визуальный и HTML. Чтобы найти и удалить лишние теги из кода страницы, достаточно переключить штатный редактор WordPress в режим «Текст».

Цукерберг рекомендует:  Выжимаем максимум из онлайн-курсов

Знание HTML на базовом уровне предупреждает появление на странице лишнего кода на этапе переноса контента из текстового процессора в редактор движка. Чтобы решить эту задачу, очистите созданный в Word контент от форматирования. Для этого воспользуйтесь функцией «Удалить форматирование» в текстовом редакторе или скопируйте контент и вставьте его в «Блокнот». Потом вставьте очищенный от форматирования контент в редактор CMS в формате HTML.

Разметьте контент с помощью тегов HTML и опубликуйте.

Очистка контента от форматирования и добавление тегов HTML вручную предупредила появление на странице мусорного кода и обеспечила корректное отображение публикации для пользователей.

Что нужно знать администратору сайта, чтобы обойтись без верстальщика

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

Во-вторых, знание основ HTML не превращает блогера или сапожника и по совместительству администратора сайта сапожной мастерской в верстальщика. Чтобы профессионально выполнять верстку, нужно учиться и практиковаться.

Администратор сайта автомойки не будет краснеть перед читателями за неудобный для восприятия контент, если у него следующие знания:

  • Общее представление о веб-страницах и браузерах. Как интернет-обозреватели отображают страницы сайта для пользователей. Что такое структура HTML-документа, какие задачи решают гиперссылки.
  • Общее представление об HTML. Зачем нужен язык гипертекстовой разметки, где и как он используются.
  • Что такое HTML-теги. Как обозначаются теги.
  • Основные теги. Чтобы корректно разметить простую страницу на сайте или в блоге, в большинстве случаев достаточно знать теги заголовков, абзацев, изображений, ссылок. Чтобы корректно использовать теги изображений и ссылок, придется запомнить их основные атрибуты.
  • Чуть более продвинутые знания помогут с помощью тегов обозначить важные смысловые блоки или визуально отделить произвольные фразы от окружающего текста, оформить маркированный или нумерованный список, цитату.

Чтобы корректно использовать теги, вебмастер должен понимать их значение. Например, специалист должен знать разницу между заголовками второго и третьего порядка или визуально одинаковыми тегами i и em.

Изучение базовой информации поможет самостоятельно размечать и публиковать контент. Если основы HTML дадутся легко, а интерес к веб-верстке не исчезнет, вы сможете взяться за обучение по-настоящему и стать профессиональным верстальщиком.

Тяжело ли научиться верстке? Где учат на верстальщика? Чем занимается данный специалист на практике? Об этом и не только читателям рассказал руководитель отдела верстки компании TexTerra Алексей Печенкин.

«Верстальщик реализует идеи дизайнера»

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

Дмитрий Дементий: Расскажите в двух словах о профессии верстальщика: чем занимаетесь вы и сотрудники вашего отдела, как организован рабочий процесс? Верстальщик — это кто: программист, технический специалист, дизайнер? Англичане и американцы называют типографских верстальщиков layout artist. Можно ли назвать HTML-верстальщика художником?

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

Д.Д.: Какие задачи решает HTML-верстка с точки зрения владельца сайта? Чем может помочь верстальщик владельцу интернет-магазина?

А.П.: Попросту говоря, верстка — воплощение идей дизайнера. На этапе разработки дизайнер прорисовывает общую структуру, внешний вид сайта, а после верстальщик все это реализует. Делается это с помощью HTML и других языков разметки, которые способен «понять» и преобразовать в привычные нам веб-страницы браузер.

Верстка новых элементов страниц, разделов, блоков, — все это тоже делают верстальщики. С помощью веб-верстки специалист создает статичную страницу, на которую при необходимости фронтэнд-программист может добавить интерактивные элементы.

Д.Д.: В большинстве популярных CMS есть визуальные редакторы публикаций. Значит ли это, что владельцы сайтов на WordPress, Drupal или Битрикс не нуждаются в услугах верстальщика?

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

Эти редакторы действительно избавляют неспециалистов от необходимости делать лишнюю для них работу: размечать контент. Но функциональность редакторов сильно ограничена. Из-за этого редактор без знаний HTML не всегда может оформить страницу в соответствии с потребностями пользователей и стандартами W3C.

Простой пример: штатный редактор самого популярного движка WordPress позволяет выделить отрывок текста с помощью полужирного начертания или курсива. В коде страницы можно увидеть, что выделение выполняется с помощью тегов strong и em соответственно. В некоторых случаях данную разметку предпочтительно делать с помощью тегов b и i. В визуальном редакторе WP нет таких инструментов, поэтому придется добавлять теги вручную. А это требует соответствующих знаний.

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

Д.Д.: Нужны ли с вашей точки зрения минимальные знания в области HTML-верстки маркетологам, копирайтерам, блогерам? Может ли журналист или копирайтер самостоятельно сверстать свой материал и опубликовать на сайте? Или каждый специалист должен заниматься своим делом?

А.П.: Каждому могут пригодиться минимальные знания в этой области. Да, копирайтер с минимальными знаниями в верстке сможет без каких-либо проблем сверстать свой материал. Для этого необходимы лишь базовые знания тегов в html. Но чтобы как-то оформить материал нестандартно, нужны будут другие навыки, которыми обладают контент-менеджеры или верстальщики.

Д.Д.: Как владелец сайта, не имеющий соответствующих знаний, может проверить качество работы верстальщика? Что для этого нужно сделать: проверить отображение страниц в разных браузерах, проверить URL или код в W3C-валидаторе, посмотреть данные об ошибках в кабинетах для вебмастеров? Как далекому от HTML-верстки человеку понять, что все сделано профессионально?

А.П.: Да, в первую очередь можно просмотреть страницы на различных разрешениях и устройствах, а также просканировать страницу в валидаторе. При плохой верстке будут сразу заметны все грубые недочеты, которые оставил верстальщик. Что касается самого кода, то тут человек без знаний никак не определит качество.

Д.Д.: Читатели интересуются возможностью обучения HTML-верстке. Каждому ли дано стать хорошим специалистом в этой области? Какие качества необходимы хорошему верстальщику?

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

Д.Д.: Где учат верстке? Это очные учебные заведения, онлайн-курсы? Можно ли научиться самостоятельно с помощью учебников и пособий?

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

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

Д.Д.: Какой набор знаний нужен хорошему верстальщику?

А.П.: Хорошему верстальщику в первую очередь нужно следить за новостями в мире IT, за всеми новинками и технологиями, которые время от времени появляются в этой сфере, так как веб не стоит на месте. Поэтому верстальшикам приходится постоянно учиться и повышать свою квалификацию. Если говорить про базовый набор знаний, то это HTML и CSS, а также хотя бы базовые знания Javascript (Jquery).

Д.Д.: Спасибо за информацию.


А.П.: Пожалуйста. Читателям успехов в обучении.

Где можно научиться верстке

Предложенная ниже подборка учебных ресурсов поможет вам получить общие представления об HTML-верстке или стать профессиональным верстальщиком. Для обучения вам понадобится только желание и ПК с выходом в интернет. Также вам пригодится знание английского языка, так как в подборке есть англоязычные ресурсы.

Обучиться веб-верстке помогут следующие ресурсы:

Онлайн-курсы для начинающих и продолжающих

  1. Бесплатный курс «Основы HTML и CSS» от «Нетологии». Пять часовых занятий познакомят вас с азами HTML и CSS. Курс будет полезен не только для будущих верстальщиков, но и для всех специалистов, работающих в сфере интернет-маркетинга.
  2. Бесплатный видеокурс по HTML и CSS от WebForMyself.com подойдет пользователям с любым уровнем подготовки. Его можно рассматривать в качестве первой ступени обучения для будущих верстальщиков или инструмента повышения квалификации для блогеров, журналистов или администраторов сайтов.
  3. Онлайн-курс «Базовый HTML и CSS» от Html-academy.
  4. Полугодовой курс «Профессиональная верстка сайтов по современным стандартам» от Geekbrains позволит вам удаленно обучиться профессии верстальщика.
  5. Если верстка вас заинтересует, продолжить образование можно на курсе «Нетологии» «HTML-верстка: с нуля до первого макета». После получения диплома можете смело называть себя начинающим верстальщиком.

Полезные тематические сайты

  1. Сайт htmlbook.ru. Этот информационный хаб будет полезен как для будущих и начинающих верстальщиков, так и для опытных специалистов. Данный ресурс для верстальщиков — то же самое, что «Серч» для сеошников и блог «Текстерры» для интернет-маркетологов. Обратите внимание на форум.
  2. В блоге верстальщика Юлии Паниной вы найдете универсальные премудрости о верстке, поиске, работе с популярными CMS. К сожалению, журнал обновляется не очень часто. Но здесь опубликовано такое количество материалов по теме, которого хватит на целую книгу.
  3. Освоили базовую информацию? Тогда развивайтесь и ищите полезную информацию на «Хабре». Куда же без этого ресурса, если вы решили стать технарем?
  4. Css-live.ru. Этот ресурс будет полезным для дизайнеров, верстальщиков и веб-программистов.
  5. Справочный хаб для верстальщиков от студии Артемия Лебедева.
  6. Консорциум всемирной паутины. Эта организация занимается разработкой и валидацией интернет-стандартов. Будущим и состоявшимся верстальщикам будет полезен валидатор разметки.

Очные курсы по веб-верстке

  1. Если вы хотите обучаться очно, запишитесь на месячный курс «Верстка для начинающих» от CubeComp Development. Занятия проходят в Москве.
  2. Еще один очный бесплатный курс для начинающих верстальщиков предлагает учебный центр «Специалист» при МГТУ им. Н.Э. Баумана.

Найти очные курсы верстальщиков в своем городе вы сможете с помощью поисковых систем.

Книги по веб-верстке

  1. «Изучаем HTML 5», Б.Лоусон, Р.Шарп. Вы можете приобрести эту книгу в электронном или бумажном формате.
  2. «CSS. Каскадные таблицы стилей. Подробное руководство», Э.Мейер. Эта книга считается классикой, с которой должен ознакомиться каждый верстальщик.
  3. «HTML и CSS. Путь к совершенству», Б.Хеник. Еще один учебник, обязательный для начинающих специалистов.
  4. «Web-дизайн по стандартам», Д.Зельдман. Книга предназначена для специалистов, у которых есть базовые знания HTML и CSS. Она была издана более 10 лет назад, но остается актуальной.
  5. «HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера», Николай Прохоренок.

Англоязычные ресурсы

Знание английского языка считается чуть ли не обязательным для верстальщика. Один из аргументов — самые современные и актуальные книги и статьи появляются сначала на английском, а потом их переводят на русский. Если вы спокойно общаетесь на иностранном языке, вам пригодятся перечисленные ниже ресурсы.

  1. W3School.com. Этот ресурс можно использовать в качестве справочника по верстке. Его можно назвать англоязычным аналогом htmlbook.ru. Зарубежные специалисты не рекомендуют использовать сайт для обучения верстке, хотя на нем есть уроки по HTML и CSS.
  2. Learn to code HTML and CSS. Это полноценный онлайн-учебник, который поможет овладеть азами верстки.
  3. Гайд по веб-верстке для начинающих. В этой огромной статье-руководстве от Айана Ллойда рассматриваются практически все вопросы, связанные с обучением профессии верстальщика. Вы узнаете, каким программным обеспечением лучше пользоваться, как размечать страницы, как работать с таблицами стилей и многое другое.
  4. Activejump — сайт-тренер по HTML и CSS. Это не просто онлайн-учебник, а интерактивный курс, в рамках которого вы можете самостоятельно получить знания и сформировать умения в области верстки.
  5. В видеоблоге Channel 9 вы найдете 21 видеоурок по HTML и CSS от разработчиков Microsoft. Курс предназначен для новичков, которые хотят стать профессионалами.
  6. HTML5 Tutorial. Еще один сайт-учебник по верстке для начинающих.
  7. Intro to HTML and CSS от Khan Academy. Еще один бесплатный интерактивный учебник для начинающих верстальщиков.

Вы можете выбрать один или несколько ресурсов, чтобы удаленно или очно обучиться верстке.

Стать верстальщиком может каждый

Обучиться HTML-верстке под силу каждому человеку. Если вы планируете овладеть новой профессией, придется погрузиться в мир HTML, CSS и JavaScript, следить за изменением стандартов и технологий и много практиковаться. Учиться можно очно и заочно, платно и бесплатно, с наставником или самостоятельно. Эти возможности можно реализовать с помощью предложенных выше учебных ресурсов.

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

Что помогает развиваться начинающему верстальщику?

В большинстве профессий, особенно в сфере IT, определяющим фактором карьерного роста становится не наличие диплома о высшем образовании. Гораздо большее значение имеют горящие глаза и непреодолимое желание развиваться в своем деле. Какие инструменты работы должны стать верными друзьями верстальщика, чтобы двигать его вперед?

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

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

Рабочее место

Первое, что будет помогать или, наоборот, мешать вам в планомерном движении вперёд – это ваше рабочее место. Обустройте его так, чтобы работа была в кайф. Чтобы работа над каждым проектом приносила удовольствие.

Тут у каждого свои предпочтения. Кому-то нужен рыжий кот, мирно сопящий около клавиатуры. Кому-то heavy metal в наушниках и полумрак в комнате.

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

Шпаргалка по тегам HTML

Путь любого верстальщика начинается с изучения тегового языка разметки веб-страницы – HTML. И основной конструкцией этого языка является тег.

Наверняка вы уже знаете, что всего существует более 100 тегов. Не нужно впадать в панику и думать, что вам придется выучить их все наизусть. Примерно 50-60 % тегов не используют даже продвинутые верстальщики.

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

Семантика кода

HTML 5 взял на себя задачу по определению типа контента, содержащегося в тегах и его четкой роли на странице. В соответствии со спецификацией HTML 5 каждый из элементов принадлежит к какой-то категории (текстовое содержимое, заголовочное, потоковое, интерактивное и др.).

Семантически верный код помогает поисковым системам понять важность контента того или иного сайта для вывода их в топ. Поэтому, работая с семантическими тегами HTML 5 при верстке, вы определяете для поисковика важность частей вашей страницы.

Семантические теги HTML 5, конечно, не совершат прорыва в SEO-продвижении созданных вами страниц. Но будут значимой деталью этого процесса.

Pixel Perfect

Pixel Perfect – это технология вёрстки, когда созданный HTML-шаблон пиксель-в-пиксель совпадает с PSD-макетом. Если наложить оригинал картинки на сверстанный макет, то оба изображения должны совпасть.

Одноименное название имеет расширение для Google Chrome, которое призвано помочь вам создавать разметку сайта максимально приближенную к разработанному дизайн-проекту. Установите это расширение и проверяйте страницу на соответствие макету на любом этапе верстки.

Препроцессоры CSS и HTML

Препроцессор – это программа, которая упрощает процесс написания кода и делает его валидным, структурированным и логичным.

Для того, чтобы использовать препроцессоры нужно скачать программу. Она будет следить за файлами, предназначенными для препроцессора и компилировать их содержимое в чистый код.

Самые распространенные препроцессоры CSS:

Для HTML одним из самых популярных препроцессоров стал Pug.

Освоить препроцессоры можно только одним проверенным способом – методом проб и ошибок.

Автопрефиксеры

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

С префиксами приходится работать всем разработчикам, но не все понимают, для чего они используются. Префиксы ставятся перед каким-то значимым элементом и указывают, что данное свойство будет реализовано в указанном браузере (например, -webkit- является префиксом для браузеров Chrome, Safari, Opera).

А вот с помощью автопрефиксеров возможна оптимизация процесса. Автопрефиксер получает на входе данные об используемых стилях и ищет в них плохо поддерживаемые свойства. Когда он находит такое свойство, он добавляет префиксы стилям, которые должны поддерживаться тем или иным браузером.

Так что использование этого инструмента упрощает жизнь всем разработчикам.

Оптимизация изображений

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

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

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

Онлайн-сервисы для оптимизации изображений:

  1. Optimizilla
  2. TinyJpg
  3. ImageOptimizer
  4. ImageOptim
  5. Compressor

Task-менеджеры

Верстальщик на любом этапе своего развития, как профессионала, должен задаваться вопросом оптимизации совей работы.

Одним из эффективных инструментов оптимизации работы верстальщика является task-менеджер. Это автоматический сборщик проекта, который включает в себя:

— компилирование файлов SASS, LESS;

— сжатие JavaScript-файлов и изображений и т.д.

В интернете можно найти множество сборщиков проектов на любой вкус – Gulp, Grunt, Brunch. Можно сначала ознакомиться с подходами, используемыми в каждом из них и выбрать, какой больше всего подходит вам.

Использование готовых решений

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

В интернете есть стоки, где есть эти готовые решения. Например, на сайте nisnom.com вы найдете множество вариантов оформления кнопок, меню «бургер», всплывающих подсказок и многого другого.

Проверка кроссбраузерности

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

Цукерберг рекомендует:  Вакансии Vortex Connections

Онлайн-сервисы для проверки кроссбраузерности сайта:

  1. Browsershots
  2. Browserling
  3. CrossBrowserTesting
  4. MultiBrowser
  5. Browserstack
  6. Equafy
  7. Browsera

Технология CSS Grid

Эта технология в скором времени станет неотъемлемым инструментом работы верстальщика. Grid – это шаблон, работающий по системе сеток и представляющий собой набор горизонтальных и вертикальных линий, которые создают размеры контента в grid-контейнере.

Технологию CSS Grid используют для выравнивания и позиционирования элементов страницы, а также для создания адаптивных версий сайта.

Добавление динамических карт

Как правило, динамические карты на сайтах встречаются также часто, как и изображения. А значит, вам необходимо обязательно освоить технологию их добавления.

Несмотря на опасение новичков в этом процессе нет ничего сложного. Нужно зайти на специальные сервисы, предоставляемые Яндекс или Google, создать там свою карту, получить iframe или script и вставить в соответствующее место своего HTML-документа.

Мастер-классы по верстке

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

Андрей Гаврилов, основатель WAYUP, на своём YouTube-канале проводит онлайн-мастер-классы по верстке с нуля. Приходите, даже если вы только задумались о том, чтобы начать свой путь верстальщика.

Игры для верстальщиков

Для получения практических навыков вёрстки необязательно заниматься монотонным написанием кода. Можно делать это в увлекательном игровом формате. В интернете есть множество браузерных игр, некоторые из которых подойдут даже для детей и новичков без опыта.

Подробный обзор на игры для верстальщиков читайте в нашей статье.

Обратная связь

Не имеет значения, работаете вы в офисе или на удаленке, вы – часть команды. И даже если вы совсем недавно на должности верстальщика не бойтесь доносить свои мысли до веб-дизайнеров и project-менеджеров.

Для решения каждой задачи в верстке существует несколько способов решения. И кто знает, может быть, выбранный именно вами вариант привнесет в проект положительные моменты.

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

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

Блочная верстка сайта с нуля. Урок 1

Существует 2 вида верстки:

Табличная верстка

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

Блочная верстка

Как вы уже догадались выше, в этой статье речь пойдет именно от блочной верстке, если предыдущая статья была, как вводная, то сейчас мы будем уже разбираться более конкретно на примере — как сверстать сайт с нуля. Во время своего изучения верстки я был в поисках подробного мануала — как по шагам сверстать даже самую простую html страницу. В этой статье я хочу максимально подробно рассмотреть каждую строчку кода и объяснить принципы работы с html, чтобы любому новичку в этом деле было понятно. Надеюсь, у меня это получится. ��

Итак, начнем. Для примера я взял простой прототип, макетом его нельзя назвать, нормальный макет рисуется в psd формате, а у нас он в jpg. Нам главное понять принцип как же верстать сайты с помощью блочной верстки. Чтобы работать с блочной версткой нужно знать не только html, но и css (каскадные таблицы стилей). В ходе цикла статей по верстке сайта, мы как раз с вами и изучим тот набор css стилей, который в дальнейшем вам всегда поможет верстать практически любые каркасы макетов/мокапов, ведь принцип один и тот же.

Итак, вот макет (кликабельно).

Мы видим у него 4 логические части:

  • Шапка сайта (далее будем называть header, хедер);
  • Левая колонка (далее будем называть left sidebar);
  • Правая колонка (далее будем называть content);
  • Подвал (далее будем называть footer, футер);

Итак, начнем конечно же с блока хедер. У нас мокап шириной 1000 пикселей (px).

Для начала скажу, что верстка делается с помощью html тегов. Например,

Обязанности HTML-верстальщика

Что должен уметь делать HTML-верстальщик сайтов.

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

HTML-верстальщик должен знать:

  • HTML и CSS на 100%. Именно с помощью этих языков разметки и происходит верстка страницы с макета дизайнера. При этом верстальщик должен учитывать все особенности, предпочтения и версии этих языков для того, чтобы осуществлять верстку страниц любой сложности;
  • JavaScript или jQuery. JavaScript (jQuery) используется для реализации различных динамических элементов на странице (слайдеры, калькуляторы и т.д.). jQuery — набор готовых функций, написанных на языке JavaScript (так называемый, фреймворк);
  • Photoshop. Верстальщик должен уметь работать в Adobe Photoshop и обладать знаниями веб-дизайна для того, чтобы при анализе макета до верстки указать дизайнеру на его ошибки и, если потребуется, быстро сделать поправки в макете без особых усилий;
  • Язык программирования PHP. В арсенале верстальщика должно быть представление о языке PHP и о том, как программист будет натягивать верстку сайта на движок;
  • Как работает CMS и ее API. Обычно верстка сайта делается под какой-то конкретный движок и в большинстве случаев ставится на бесплатную CMS. Знание того, как работает CMS, а также ее особенностей, нужно для того, чтобы у человека, который будет работать с вашей версткой, не возникало проблем при ее «натяжке». Только плюсом будет идеальное знание API одной или нескольких CMS. Например, клиент может заказать изготовление шаблона на CMS у вас.
  • SEO-оптимизацию. HTML-верстальщик обязательно должен ориентироваться в SEO, потому что оптимизация сайта начинается именно с первых строк верстальщика.

Что должен делать HTML-верстальщик:

  • Кроссбраузерную верстку — учет особенностей отображения кода веб-страницы во всех браузерах любой операционной системы.
  • Валидную верстку сайта — написание HTML и CSS-кода, соответствующих стандартам W3C (компании, разрабатывающей и внедряющей интернет-стандарты), и проходящим тест на валидаторе.
  • Семантическую верстку. Осмысленное расположение фрагментов кода на странице, правильное использование тегов, понятные название классов и идентификаторов.
  • Оптимизацию под поисковые системы. От верстальщика вы должны получить полностью оптимизированную верстку, начиная от наличия тегов title, description, keywords до присутствия alt в картинках и title в ссылках.
  • Оптимизировать скорость загрузки сайта:
    • За счет уменьшения количества кода, но не в ущерб читаемости и производительности;
    • За счет уменьшения веса и количества картинок (так называемая, верстка спрайтами).
  • Уметь работать с CMS и ее API. Даже если вам не нужно получить от верстальщика готовый шаблон, но вы планируете использовать его верстку для изготовления шаблона на нужную вам CMS, верстальщик все равно должен знать требования к верстке данной CMS.

    На заметку:

    • верстка шаблона под CMS подразумевает изготовление простой верстки (HTML + CSS) с учетом требований данной CMS. То есть, на выходе вы не получаете готовый шаблон, а вам еще нужно будет искать человека который сделает шаблон из этой верстки;
    • изготовление шаблона под CMS включает верстку и изготовление из этой верстки готового шаблона, который на 100% готов для дальнейшего использования.

    Предоставлять качественный сервис

    Должен гарантировать качество проведенной работы, не подводить по срокам и вовремя вносить правки, если потребуется.

    Программы для верстки сайтов.

    06.02.2020

    Программы для верстки сайтов.

    Для Вас я подобрал не только программы но и хитрости с помощью которых Вы будите верстать быстро, качественно и валидно.

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

    1. Редактор кода — думаю можно скачать бесплатно

    Первая из программ для верстки сайтов, это редактор кода. В принципе подойдет любой из современных редакторов, ну т.е. я думаю, Вы логически уже пришли к тому что не стоит верстать на фрилансе или в офисе в стандартном блокноте windows или Notepad++. Все же перечислю те которые мне понравились:

    Сейчас по факту у меня на пк установлены две программы для верстки, — IDE PHPStorm и Sublime Text. Саблайм хорошо выезжает на дополнительно установленных пакетах и темах. А вот PHPStorm, — умеет уже из коробки, то что обычно до устанавливаю на SublimeText3. Поэтому PHPStorm это мой основной редактор кода. Чаще всего на нем юзаю горячими клавишами:

    • Выравнивание кода(как правило по ) ( выделяю всё crtl + A, выравниваю ctrl+alt+L)
    • Поиск по всему проекту + найти и заменить (ctrl + shift +F)
    • Найти метод или его использование ( ctrl + клик левой кнопкой мыши)
    • Закомитить + запушить (ctrl + K ctrl + shift + K)
    • Работаю с базой данных проекта (на правой стороне панели редактора)
    • Обнять часть кода новым тегом html (ctrl +alt + J)
    • Показать идентичные куски кода (ctrl + alt + shift + J)
    • создание и использование сниппетов и пр.

    2. Emmet.

    Программа для верстки сайтов в программе редактора кода. Эдакий набор плагинов для текстовых редакторов. Этот товарищ поможет быстрее набирать код в HTML & CSS.
    Например такой строкой:
    nav>ul>li*3
    По жамканью на tab Вы получите такой код:

    Или вот так например в CSS :
    bg
    Даст:
    background: #000;

    3. CSS препроцессоры.

    Это конечно не программа для верстки сайтов, а наверное больше быстрый и умный способ написания кода CSS. Сам использую LESS, SASS, SCSS. Разобравшись с одним из них, остальные Вы тоже поймете. Они отличаются только синтексом. Я использую препроцессоры потому что в них есть:

    Код css получается более удобочитаемым, структурированным, легко редактируемый и расширяемый. Ух какие длинные слова, но они очень важны для верстальщика HTML .

    4. Grid (сетка).

    Как правило .psd макет веб-дизайнер разбивает на колонки(12, 24 и прочие извращения). Самостоятельно подгонять под сетку с помощью отступов, это издевательство над собой. Поэтому лучше воспользоваться сетками от фреймворков. Самая известная от Bootstrap. Bootstrap — это свободный набор инструментов. Который закрывает сразу множество задач по верстке. Поэтому советую изучить его и использовать как повседневный инструмент в верстке.

    Есть еще менее известные сетки, но не значит, что они хуже остальных, например:
    Skeleton или
    Smart-Grid(Дмитрий Лаврик), — это вообще самое лучшее что может быть в сетках для быстрой и качественной верстки сайтов.

    5. Таск-менеджер | Сборщик проектов | Менеджер задач | Ваш личный раб

    Вот она рыба мечты. Вот кто настоящий волшебник. Этот комплекс программ для верстки сайтов, реально закроет множество задач верстки сайта и разработки проекта в целом.
    Здесь тоже есть большие боссы:

    Сам использую Gulp. Grunt немного по медленнее, и на тот момент когда я начинал изучать Таск-менеджеры, был на пике Gulp.
    Ну и WebPack вроде как лучше всех, я садился разбирать, но так у меня и не пошло.
    Gulp который я настроил, закрывает задачи на моих проектах

    • Расставляет префиксы CSS для всех браузеров
    • Минимизирует CSS удаляя пробелы, и переносы
    • Создает файлы .map указывая номер строк браузеру для того что бы дебажить изначальный код
    • Группирует медиа запросы(что бы не повторялись для разных элементов DOM в одной ширине)
    • Преобразует препроцессорный код в обычный CSS
    • Минимизирует изображения
    • Уродует и минимизирует код JavaScript
    • Объединяет все файлы CSS в один(уменьшая количество обращений к серверу)
    • Минимизирует файлы HTML
    • Отслеживает изменения в редактируемых файлах и самостоятельно обновляет браузер во время верстки
    • Конфигурирует файл Smart-Grid

    Так же дома на всех устройствах в одной сети я могу посмотреть в реальном времени как выглядит то что я верстаю.

    6. Онлайн программы, для верстки и работы с .psd макетами сайтов.

    И еще когда нет под рукой Photoshop или просто хочется что-то новенького, можно использовать для препарирования .PSD макета, — онлайн программы типа:

    Работа верстальщиком удаленно: как стать верстальщиком с нуля

    Описание: создание сайтов очень не простой процесс. Все, наверное, знают, что в его создании принимают участие веб-дизайнер и программист, но многие не знают про верстальщика. А ведь именно работа верстальщиком расставляет все элементы дизайна по местам. Хотите научиться этому? Тогда читайте статью о том, как стать верстальщиком с нуля.
    Оплата: в среднем 10$ за час или 50-100$ за проект.
    Требования: усидчивость, внимательность, знать html, css, JavaScript, Photoshop

    Как стать верстальщиком

    Многие люди даже не знают о такой профессии, так что для начала стоит понять что делает верстальщик и в чем заключается его работа.

    Верстальщик создает каркас сайта, используя макет от дизайнера. Он отвечает за адаптацию ресурса под различные браузеры, мониторы и экраны смартфонов/планшетов, чтобы везде сайт выглядел определенным образом. Иными словами, он получает статичную картинку от дизайнера, а затем «оживляет» ее.

    Что требуется для работы? Минимальный набор верстальщика включает в себя:

    • Notepad++, чтобы писать код;
    • Photoshop или другой подобный графический редактор;
    • Популярные браузеры, чтобы посмотреть, как отображается работа в разных браузерах.

    Что нужно знать и какие качества понадобятся?

    • HTML.
    • CSS.
    • JavaScript.
    • Photoshop или другую подобную программу.
    • Усидчивость.
    • Внимательность.
    • Зрительная память.
    • Аккуратность.

    Как стать верстальщиком?

    Желательно иметь среднее или высшее образование в этой области, но многие верстальщики-фрилансеры самоучки. Либо своими силами изучили всю необходимую информацию, либо окончили специальные курсы в интернете. К счастью, подобных школ теперь довольно много.

    Как стать верстальщиком с нуля

    1. Для начала вам нужно изучить HTML, CSS и JavaScript. Можно не запоминать с ходу все значения, а составить себе понятную и удобную шпаргалку. Особенно обратите внимание на следующие моменты:

    HTML:

    • как строится HTML страница – основные теги страницы (head, body) и что в них может находиться.
    • главные HTML элементы — a, p, div, table, h1-h6, ol, ul, span и т.п.. Научитесь их правильно прописывать, изучите зачем нужны. Поймите разницу между блочными и строчными элементами.
    • Ознакомьтесь с версиями HTML и какие теги в них входят.
    • Изучите отличие табличной и блочной верстки, какие у них преимущества.
    • Основные элементы HTML5.

    CSS:

    • Изучить виды селекторов.
    • Основные (фон, размер, цвет, шрифт, границы и т.п.) и особенные (position, float …) свойства CSS.
    • Ознакомьтесь с версиями CSS, какие к ним относятся свойства.
    • Какие свойства работают по другому в некоторых браузерах.
    • Научитесь делать блочную структуру web-страницы.
    • Изучите основны CSS3.

    JavaScript:

    • Зачем и когда применяется.
    • Как скрыть или показать определенный блок.
    • Как добавить анимацию (скроллер или слайдер).
    • Как сменить класс и стиль элемента.
    • Как получить или изменить значение определенного элемента.

    2. Освойте программу Photoshop, ведь вам придется работать в графическом редакторе и довольно много. Верстальщику не обязательно уметь рисовать, ведь вы работаете с готовым макетом страницы. В основном вам нужно будет:

    • Делать нарезку макета.
    • Определять размеры.
    • Получать нужные цвета.
    • Вырезать определенные элементы из макета.

    3. Изучите основы верстки – разберитесь в терминологии (кроссбраузерность, валидность, семантика). Почитайте пару книг по этой теме или посмотрите хотя бы бесплатные курсы – их полно. Желательно научиться работать с WordPress и Joomla, так как многие сайты работают на этих CMS, и у них много особенностей в работе.

    4. Практикуйтесь – не нужно сразу идти на биржу фриланса и хватать самый сложный заказ. Сделайте 2-3 тестовые работы, чтобы набить руку и отточить практические навыки.

    Работа верстальщиком удаленно

    Где ее найти? Ведь во фрилансе основная проблема – найти заказ. А новичкам сделать это очень и очень сложно, особенно если вы самоучка и нет опыта реальной работы.

    1. Первый опыт можно получить бесплатно. Т.е. предлагать свои услуги за положительный отзыв. Найти заказчиков несложно – находите сайты и предлагайте сделать верстку за положительный отзыв. Многие вебмастера будут рады такому предложению, а в дальнейшем будут обращаться к вам по другим вопросам (уже платно) или посоветуют знакомым. Главное покажите себя с лучшей стороны.
    2. Найти работу можно там, где требуется постоянно создавать или дорабатывать сайты. Так что вам стоит обратиться в студии веб-дизайна или крупные интернет-проекты. Можно напрямую написать веб-студиям с предложением о сотрудничестве. На первых порах можно работать на бесплатной основе (испытательный срок + обучение), а через месяц выйти на оплату. Так вы сможете получить реальный опыт работы, а потом сможете пристроиться на постоянную удаленную работу. Но тут многое зависит от ваших умений, талантов и удачи.
    3. Не забывайте про самый распространенный вариант – биржи фриланса. Именно там новички могут получить свой первых опыт, хотя взять первый заказ будет проблематично. На сайте weblancer.net довольно много заказов по верстке, а конкуренция не так сильна как на fl.ru

    5 советов для начинающих верстальщиков:

    1. Думай. Верстка это не простое дело, которому легко и просто обучиться.
    2. Будь в курсе всего нового в этой сфере – читайте блоги, форумы, сайты и другие источники информации по этой теме. Постоянно появляются новые технологии, техники, выявляются распространенные ошибки – вы должны держать руку на пульсе, чтобы не пропустить важную информацию.
    3. Html + css – старайтесь по минимуму использовать javascript, чтобы ускорить загрузку страницы.
    4. Используйте наработки – сохраняйте свои старые наработки, чтобы была возможность к ним вернуться и воспользоваться в новом проекте.
    5. Занимайтесь версткой только если вам действительно это интересно. Просто выучить Html и css мало – надо жить версткой. Ведь в каком-то смысле это искусство, в котором нужно отдавать все свои силы, время и интерес, и только тогда можно получить удовольствие от работы и прийти к успеху.

    Так что прежде чем задаваться вопросом «как стать верстальщиком с нуля», спросите себя «нравится ли мне работа верстальщиком удаленно или лучше попробовать что-то другое?». Ведь вариантов очень много, и это не та сфере, в которую стоит идти только ради денег.

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих