fbpx

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

Присоединяйся к HRPR в сетях

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

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

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

  • мобильная верстка – чтобы макет правильно отображался на экранах мобильных устройств. Достигается с помощью создания отдельных (дополнительных) версий 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

ИЮНЯ 2021

Старт группы HRPR. 125 часов занятий и подготовка вашего резюме для скорейшего входа в профессию.

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

One on one hrpr schoolITHR & IT-Рекрутингвопросы на зачет
14 июня, 2021

One on one – плюсы и минусы технологии

В IT отрасли по-прежнему спрос на кадры превышает предложение, по обороту кадров это лидирующая отрасль. В год такой оборот может составлять 15% и даже выше. И хотя некоторые компании заявляют,…
hrpr school blogITHR & IT-Рекрутингвопросы на зачет
11 июня, 2021

Фреймворки Python

Python находится в шаге, чтобы стать самым популярным языком в мире. Это объясняется его легкостью и универсальностью. На нем пишут игры, веб-приложения, различные ПО для задач бизнеса и науки, в…
hrpr school blogITHR & IT-Рекрутингвопросы на зачет
9 июня, 2021

Фреймворки PHP

Фреймворк PHP — это готовая структура для веб-приложения, которую программист дорабатывает исходя из задач проекта. Фреймворки облегчают работу специалиста и делают разработку сайтов надежнее и дешевле. PHP — это самый…
hrpr school blogITHR & IT-Рекрутингвопросы на зачет
8 июня, 2021

.NET рекрутеру: продукты, решения, перспективы

.NET разработчики — довольно востребованные специалисты. Вилка зарплат мидлов по СНГ варьируется от 1300 и до 3000 долларов США, верхняя планка зарплат для уровня Senior достигает 6000-8000 тысяч. Связано это…