Минимум знаний по курсу «Технологии Web-разработки»

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

Учебно-методическая литература

Коротко или full steck Web-разработки

Подробно

Английский язык

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

HTML и CSS

Графические редакторы

Самые популярные: Photoshop и paint.net.
В ~90% случаев Photoshop’а и Paint.net-а будет достаточно

Необходимый минимум, чтобы начать работать:

  • нарезка и экспорт графических элементов;
  • работа со стилями слоя;
  • информация о тексте (размер, шрифт, цвет, межстрочный интервал и тд.).

Инструменты разработчика в браузере

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

chrome-dev-tools
Chrome DevTools

Emmet

Набор сниппетов для HTML и CSS, дающий супер-скорость.
Лучше 1 раз почитать документацию и сразу начать использовать.

Семантика и доступность

Правильное именование

Имена должны нести в себе смысл. Цель — сделать код хорошо читаемым и легко поддерживаемым.
У новичков часто можно встретить <b class="b">, <div class="div13>" и все в таком духе. Это неправильно.
Также нельзя использовать транслитерацию <div class="shapka">.
Общепринятый язык для именования — английский.

Responsive/adaptive верстка

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


jQuery

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

Подключение шрифтов

Сборка спрайтов

Спрайт — графический файл, в котором сгруппировано много изображений небольшого размера. Такая организация графики позволяет минимизировать количество запросов за сервер и ускорить загрузку сайта.

Пример спрайта

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

Во времена быстрого интернета легко забыть о том, что нужно оптимизировать изображения. Недавно я проверял работу начинающего разработчика и прогнал изображения через оптимизатор. Картинки похудели на 86% (16 мегабайт). Вдумайтесь.
Также важно уметь выбрать оптимальный формат графики (jpg, png, gif, svg).

Работа с SVG

SVG-спрайты

CSS-анимации и плавные переходы

CSS-методологии

Сотни их: OOCSS, BEM, SMACSS и тд. Не обязательно все использовать, но вы должны иметь представление о лучших практиках css-архитектуры.

CSS-фреймворки

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

Верстка писем

Ад мира HTML-верстки. Привет из нулевых. Тут свои правила и до сих пор верстка таблицами. Звучит плохо, на деле еще хуже.

Командная строка

Необходимый инструмент для доступа к радостям жизни: препроцессорам, компиляции шаблонов, запуску таск-раннеров, git и другим полезным вещам.

Git

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

CSS-препроцессоры

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

Шаблонизаторы

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

Автоматизация: таск-раннеры

Вся рутина должна быть автоматизирована. Примеры автоматизации — запуск препроцессоров и шаблонизаторов, оптимизация графики, сборка спрайтов, сжатие css и js.

Тестирование верстки

Плох тот разработчик, который не тестирует свою работу.

Подборка статей на моем сайте

Записки преподавателя

Заключение

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

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

CC BY-SA 4.0 Минимум знаний по курсу «Технологии Web-разработки», опубликовано Вадим В. Костерин, лицензия — Creative Commons Attribution-ShareAlike 4.0 International.


1 нравится это


1 нравится это

Автор

Вадим В. Костерин

Директор Инженерного центра Высшей школы экономики и управления НИУ ЮУрГУ, ст. преп. кафедры Информационных технологий экономики

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

И что тут получается? *