fbpx

В этой статье мы обсудим самую простую должность в сфере технического IT – это верстальщик-фронтендщик (верстальщик для олдскул, фронтендщик – для миллениалов). То, что она простая, совершенно не подразумевает негативной оценки, это сверхпопулярная и востребованная профессия, чтобы ее освоить не обязательно писать код (хотя со временем было бы неплохо освоить Java Script), нужно понимать, что такое сайт, из чего он состоит, как работает, почему так выглядит, и как все это сделать руками.

Есть еще одно преимущество профессии верстальщика: результат работы будет виден сразу.

Присоединяйся к школе HRPR в Telegram-cообществе IT-Рекрутеров и в соцсетях

Тулы для верстальщика

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

Для начала скажем пару слов про то, какая бывает верстка:

  • мобильная верстка – чтобы макет правильно отображался на экранах мобильных устройств. Достигается с помощью создания отдельных (дополнительных) версий HTML- и CSS-код. Обычно такая мобильная версия страницы выглядит как отдельная страница с URL вида https://m.адрес_сайта.домен, например, https://m.onliner.by
  • адаптивная верстка обеспечивает корректное отображение содержимого сайта на различных устройствах. Представьте, что только на Андроиде таких устройств больше 200. Адаптивная верстка помогает подстроить контент сайта под разрешение многих экранов.

CSS (Cascading Style Sheets) – язык стилей внешнего вида веб-страницы , написанного языком разметки, обычно HTML. Это о том, как именно будет выглядеть документ, каким шрифтом, стилем и цветом будет отображаться каждая строчка. Будет ли в ней тень, градиент, анимация.

Пример оформления цитаты

.pull-quote {

   width: 200px;

   float: right;

   margin: 5px;

   font-family: Georgia, “Times New Roman”, Times, serif;

   font: italic bold #ff0000 ;}

HTML (HyperText Markup Language) – это не язык программирования, это язык разметки. С помощью него размечается информация на странице, что есть что: заголовок, подзаголовок, основной текст, не такой уж и важный текст. А браузер интерпретирует эту информацию и отображает текст на экране должным образом: что за чем, какие отступы и т.д.

Пример

<!DOCTYPE html>

<html>

 <head>

  <meta charset=”utf-8″>

  <title>Пример веб-страницы</title>

 </head>

 <body>

  <h1>Заголовок</h1>

  <!– Комментарий –>

  <p>Первый абзац.</p>

  <p>Второй абзац.</p>

 </body>

</html>

XLM (eXtensible Markup Language) – это язык для хранения и передачи данных. Это не то не самое, что HTML. XLM хранит, структурирует и передает информацию, HTML отображает информацию. Можно сказать, что XLM дополняет HTML.

Теги можно создавать самостоятельно. По сути, это информация “обернутая” в теги для простоты понимания ее структуры. То есть, смотря на файл XLM, мы понимает, кто адресат, кто адресант, где заголовок, где главное сообщение, а где подпись и дата. В таком виде информация храниться.

 Пример

<?xml version=”1.0″ encoding=”UTF-8″?>

<note>

   <to>Tove</to>

   <from>Jani</from>

   <heading>Напоминание</heading>

   <body>Не забудь обо мне в эти выходные!</body>

</note>

Bootstrap – набор тулов для создания сайтов и веб-приложений. В него включены HTML- и CSS-шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и других составляющих веб-интерфейса, включая даже JavaScript-расширения.

Это очень удобно для взаимодействия дизайнера и фронтенд-разработчика, поскольку дизайн-макет «под Bootstrap» понятен в работе и предсказуем в результате и для одного, и второго.
И просто отдельно: это очень удобно. Посмотрите, вот здесь примеры шаблонов для админки, портфолио, магазина и пр. на любой вкус.

Редакторы кода – текстовые редакторы, которые подсвечивают синтаксис языков программирования ( в нашем случае Javascript) и HTML-разметки.

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

Sublime Text – сложнее и функциональнее Notepad++, поддерживает более 20 языков программирования, подсвечивает синтаксис, автоматически сохраняет изменения в файлах.

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

И коротко о других полезных инструментах.

Google fonts – каталог бесплатных шрифтов.

Font Awesome – коллекция иконок.

Песочница кода – площадка для тестирования кода. Можно написать код и проверить, как он будет изменения.

Валидатор – проверка кода на ошибки и соответствие стандартам WWW.

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

На занятиях в школе HRPR вы пройдете технический ликбез!

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

01

ШАГ

Приходите на курс HRPR для IT-рекрутеров. Скоро старт новой группы. 125+ часов, 40+ занятий, 10+ спикеров из ведущих IT-компаний

Последнее из блога

IT-СловарьITHR & IT-РекрутингТехнологии IT-сорсинга
4 января, 2022

Golang. Где искать разработчиков и сколько они стоят?

В ноябре 2021 года, языку программирования GO исполнилось 12 лет. Название GO, язык получил как производное от материнской компании Google, но позднее, чтобы не пересекаться с еще одним языком программирования “Go!”,…
IT-ПродажиIT-СловарьITHR & IT-РекрутингЛикбез для IT-SalesТехнологии IT-сорсинга
4 января, 2022

Embedded system. Что это? Почему так востребовано?

АМбЭдет или ЭМбэдед. Только не скажите - эмбед, как это делает большинство.  Встраиваемая, или встроенная, система (Embedded System) ― это микропроцессорная вычислительная система, являющаяся модулем какого-либо устройства и предназначенная для…
IT-МенеджментIT-ПродажиIT-СловарьITHR & IT-РекрутингЛикбез для IT-Sales
29 ноября, 2021

Continuous Integration & Continuous Delivery. Почему для собеседования в IT это нужно знать?

На рынках высокой конкуренции, когда скорость доставки изменений зачастую играет решающую роль в борьбе за клиента, компании стремятся к максимальной автоматизации процессов. В разработке ПО существуют практики, при которых релизы…
IT-ПродажиIT-СловарьITHR & IT-РекрутингДолжности в ITЛикбез для IT-Sales
29 ноября, 2021

Тестирование & QA. Или почему QA-инженер и тестировщик – не одно и то же

Профессия тестировщика (software test engineer) или QA-инженера (quality assurance engineer) остается одной из самых востребованных на рынке труда, во многом, благодаря своей зрелости (есть множество учебников, подготовительных курсов и тренингов) …