fbpx

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

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

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

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

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

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

  • Мобильная верстка — чтобы макет правильно отображался на экранах мобильных устройств. Достигается с помощью создания отдельных (дополнительных) версий HTML- и CSS-кода. Обычно такая мобильная версия страницы выглядит как отдельная страница URL вида https://m.адрес_сайта.домен, например, https://m.onliner.by.
  • Адаптивная верстка обеспечивает корректное отображение содержимого сайта на различных устройствах. Представьте, что только на Android таких устройств больше 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-Sales
07.02.2022

Базы данных. Что нужно знать IT-рекрутеру?

База данных (БД) — это набор сведений об объекте, хранящихся упорядоченным, строго заданным способом. Простыми словами, база данных — это место хранения данных. Базы данных сейчас используются практически везде: на…
IT-СловарьITHR & IT-РекрутингДолжности в ITЛикбез для IT-SalesТехнологии IT-сорсинга
30.01.2022

Data Protection Officer. Зачем он нужен IT-компании? Как его искать?

25 мая 2018 года вступил в силу Европейский регламент по защите персональных данных (GDPR), который обязывает компании-подрядчики следовать требованиям регламента при работе с европейским заказчиком. С этого времени вопросы по…
IT-СловарьITHR & IT-РекрутингДолжности в ITТехнологии IT-сорсинга
29.01.2022

Виды тестирования и тестировщиков. Где их лучше искать IT-рекрутеру?

Около трети вакансий, которые будет закрывать рекрутер в стандартной аутсорсинговой компании, — это тестировщики. А что нам известно о профессии тестировщика? Что это человек, который ищет баги? Но если копнуть…
Golang. Где искать разработчиков и сколько они стоят? Советы IT-Рекрутерам от школы HRPRIT-СловарьITHR & IT-РекрутингТехнологии IT-сорсинга
04.01.2022

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

В ноябре 2021 года языку программирования GO исполнилось 12 лет. Название GO язык получил как производное от материнской компании Google, но позднее, чтобы не пересекаться с еще одним языком программирования…

Где вам удобнее общаться?

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

Телефон: +375 29 706 35 79, почта: hi@skademy.by

Или выберите удобный мессенджер: