Данная статья представляет собой руководство по верстке из Figma, в которой мы рассмотрим как верстать сайты. Вы узнаете, что такое Figma и как его использовать для верстки, а также научитесь создавать и экспортировать дизайн-макеты, использовать готовые компоненты, работать с текстом, изображениями и другими элементами интерфейса.
Введение в Figma
В этом разделе мы рассмотрим, что такое Figma и зачем она нужна при верстке веб-страниц. Мы также обсудим основные преимущества Figma в процессе верстки и покажем, как установить Figma и настроить рабочее пространство.
Что такое Figma и для чего он нужен (как верстать сайты)?
Figma – это инструмент для дизайна интерфейсов, который позволяет проектировать и создавать макеты веб-страниц, мобильных приложений и других цифровых продуктов. Figma используется не только дизайнерами, но и веб-разработчиками, в том числе для верстки. С его помощью можно создавать макеты, экспортировать графические элементы, генерировать CSS-код и многое другое.
#1 Верстка сайта с нуля для начинающих | HTML, CSS
Основные преимущества Figma в верстке
Figma имеет несколько преимуществ, которые делают его полезным инструментом для верстки:
- Макеты в Figma можно легко экспортировать в различных форматах, таких как SVG, PNG, JPG и другие.
- Figma позволяет работать с командами, что полезно при совместной работе над проектом.
- С помощью Figma можно создавать интерактивные прототипы, что помогает визуализировать конечный продукт и улучшить его функциональность.
- Figma имеет широкий выбор инструментов для рисования, создания макетов и векторной графики, что позволяет дизайнерам и разработчикам работать быстро и эффективно.
Установка Figma и настройка рабочего пространства
Для установки Figma на компьютер необходимо зайти на официальный сайт Figma и скачать приложение. После установки приложения нужно создать учетную запись, чтобы получить доступ к редактору и сохранять свои работы.
После установки и авторизации в Figma, пользователь попадает на главный экран, где можно создать новый проект или открыть уже созданный. В рабочем пространстве Figma можно настроить интерфейс и выбрать инструменты, необходимые для работы с макетами. Настройки включают изменение языка интерфейса, настройку клавиатурных комбинаций и настройку шрифтов.
Работа с макетом. Как верстать сайты.
Figma предоставляет удобный интерфейс для работы с макетами, который позволяет быстро и эффективно разрабатывать дизайн и верстку веб-сайтов и приложений. В этом разделе мы рассмотрим основные элементы макета и способы их использования в Figma.
Загрузка макета в Figma
Первым шагом в работе с макетом в Figma является его загрузка в программу. Для этого можно просто перетащить файл макета в окно Figma или выбрать опцию “Открыть” в главном меню и выбрать файл на компьютере. После загрузки макета он будет доступен для редактирования в Figma.
Основные элементы макета: рамка, слои, группы, шаблоны, компоненты
- Рамка (frame) в Figma – это область, которая содержит элементы макета, например, изображения, текст и кнопки. Рамка может быть простой или составной, то есть содержать другие рамки внутри себя.
- Слои (layers) – это элементы, которые содержат визуальную информацию в макете, такие как текст, изображения, иконки, формы и т.д. Слои могут находиться внутри рамки или вне ее, и могут быть сгруппированы вместе для удобства работы с макетом.
- Группы (groups) – это набор слоев, которые могут быть объединены для удобства работы с макетом. Группы могут содержать другие группы и слои, и могут быть раскрыты или свернуты для удобства просмотра.
- Шаблоны (templates) – это наборы элементов, которые могут быть использованы повторно в разных частях макета. Шаблоны могут содержать рамки, слои и группы, которые могут быть изменены при необходимости.
- Компоненты (components) – это наборы элементов, которые могут быть использованы повторно в разных частях макета. Компоненты могут содержать рамки, слои и группы, которые могут быть изменены при необходимости. Компоненты также могут быть связаны с другими компонентами, что позволяет быстро и легко вносить изменения во всем макете.
Использование гайдов и сетки для удобной верстки (как верстать сайты)
Гайды и сетки являются важным инструментом для удобной и точной верстки в Figma. Гайды – это линии, которые помогают выравнивать элементы на макете относительно друг друга. Они могут быть горизонтальными или вертикальными и располагаться на любой позиции на макете.
Сетка в Figma представляет собой сетку линий, которые помогают определить расположение элементов на макете. Эти линии располагаются на равных расстояниях друг от друга, что упрощает выравнивание элементов по вертикали и горизонтали.
При работе с макетом в Figma, особенно когда речь идет о многокомпонентных интерфейсах, гайды и сетка могут значительно упростить процесс верстки и ускорить его выполнение. Использование гайдов и сетки также помогает сохранять консистентность дизайна на всех страницах сайта или в приложении.
Чтобы использовать гайды и сетку в Figma, необходимо включить их отображение в настройках программы. Гайды можно создавать и перемещать вручную, а также устанавливать точки привязки, чтобы быстро выравнивать элементы относительно них. Сетка также может быть настроена на любое количество столбцов и расстояний между ними.
Наконец, при работе с макетом в Figma, важно помнить о том, что он должен быть адаптивным и масштабируемым. Это означает, что при верстке необходимо учитывать различные разрешения экранов и размеры устройств, на которых будет отображаться сайт или приложение.
Работа со шрифтами и цветами
Работа со шрифтами и цветами – это один из важных аспектов в верстке макета в Figma. В этом пункте мы рассмотрим основные приемы работы с шрифтами и цветами.
Импорт и управление шрифтами в Figma
В Figma можно использовать шрифты, которые установлены на вашем компьютере. Если же нужного шрифта на компьютере нет, его можно импортировать в Figma. Для этого нужно выбрать пункт “Add fonts” в меню настроек и выбрать нужный шрифт. После этого он станет доступен в списке шрифтов при работе с макетом.
Использование цветовой палитры и создание своей
Figma предоставляет удобную цветовую палитру, в которой можно выбирать нужные цвета для элементов макета. Также можно создавать свои цвета и добавлять их в палитру. Для этого нужно выбрать пункт “Create color” в меню цветовой палитры, указать нужный цвет и дать ему имя. Созданный цвет станет доступен в списке цветов.
Экспорт цветов и шрифтов для дальнейшей верстки
В Figma можно экспортировать цвета и шрифты, используемые в макете, для дальнейшей работы с ними в других программах. Для экспорта нужно выбрать нужный цвет или шрифт и нажать кнопку “Copy” или “Export”. После этого можно вставить их в другую программу для дальнейшей работы.
Работа с графикой и изображениями
Вырезка изображений и графики является одной из важных частей работы верстальщика. В Figma есть ряд инструментов, которые помогают быстро и удобно вырезать изображения из макета.
Для вырезки изображения нужно выделить нужный участок макета с помощью инструментов выделения – прямоугольника, эллипса, лассо и других. Затем выбрать команду “Вырезать” или нажать сочетание клавиш “Ctrl + X“. Выделенный участок будет скопирован в буфер обмена и удален из макета.
Если нужно вырезать несколько элементов макета, можно использовать функцию “Скопировать стиль” и “Вставить стиль”, которые сохраняют свойства выделенного элемента и применяют их к другим элементам.
Кроме того, в Figma удобно работать с векторной графикой. Для создания векторных объектов можно использовать инструменты линии, прямоугольника, эллипса, многоугольника и других. Векторные объекты можно группировать, изменять их свойства и экспортировать в формате SVG для дальнейшей верстки.
Важно помнить, что вырезанные изображения и экспортированные векторные объекты могут иметь большой размер файла, что может негативно повлиять на скорость загрузки сайта. Поэтому необходимо оптимизировать изображения и графику перед использованием на сайте.
Советы по ускорению и оптимизации верстки из Figma
При верстке из макета Figma важно не только создать качественный и точный HTML и CSS, но и сделать это эффективно и быстро. Для этого можно использовать некоторые советы по ускорению и оптимизации верстки из Figma:
- Использование плагинов и расширений для упрощения работы. В Figma есть множество плагинов и расширений, которые помогают ускорить и упростить процесс верстки. Например, плагины для автоматической генерации CSS кода, плагины для экспорта изображений в нужном формате и размере, плагины для создания иконок и многое другое.
- Оптимизация изображений для ускорения загрузки сайта. Один из самых важных аспектов оптимизации сайта – это оптимизация изображений. Изображения могут занимать большой объем и сильно замедлять загрузку страницы, поэтому необходимо использовать сжатие изображений перед загрузкой на сайт. В Figma вы можете использовать плагины для экспорта изображений в нужном размере и формате, а затем сжимать их с помощью онлайн-сервисов, таких как TinyPNG или Compressor.io.
- Использование фреймворков и библиотек для ускорения верстки. Фреймворки и библиотеки, такие как Bootstrap или Foundation, предоставляют готовые компоненты и стили, которые можно использовать при верстке. Это помогает значительно ускорить процесс верстки и сделать ее более структурированной и последовательной.
В целом, для ускорения и оптимизации верстки из Figma необходимо использовать различные инструменты и методы, которые помогут упростить и ускорить процесс. Важно не только создать качественный и точный код, но и сделать это эффективно и быстро.
Заключение. Как верстать сайты в Figma
В заключении, стоит отметить, что использование Figma для верстки макетов является очень удобным и эффективным инструментом для веб-разработчиков. Figma позволяет быстро и точно создавать макеты, вырезать изображения и графику, использовать шрифты и цвета, а также экспортировать готовую верстку для дальнейшего развертывания на сервере.
Figma предоставляет веб-разработчикам большой набор инструментов, плагинов и расширений для оптимизации и ускорения работы с макетами, что позволяет значительно ускорить и упростить процесс верстки. В итоге, Figma – это мощный инструмент, который может значительно улучшить и ускорить процесс разработки веб-сайтов. Читайте советы по оптимизации производительности CSS для быстрой загрузки сайта чтобы сделать ваш html макет еще более качественным.
Александр Сокирка
Занимаюсь веб разработкой с 2007 года. Имею большой опыт в веб-дизайне и разработке сайтов. Являюсь автором YouTube канала Быть Программистом. Основатель бренда Aletheme и автор тем для WordPress на маркетплэйсе Envato. С 2017 года занимаюсь обучением людей желающим стать программистами.
Мои обучающие программы можно найти на этом сайте или на Udemy.
Источник: geniuscourses.com
Вёрстка сайта для начинающих от А до Я
Верстка сайта – это сложная и многоступенчатая задача. Сначала нужно получить макет (скачать или заказать у дизайнера), после чего нужно согласовать верстку сайтов с бэкэндом – программисты должны предоставить API для вашего JS-кода (если работаете в одиночку/используете CMS/не собираетесь посылать информацию на сервер – это можно опустить). Только после этого можно начинать саму верстку веб-страниц – разбивать макет на коллекцию блочных элементов, заниматься разработкой макета в HTML/CSS/JS, переносить элементы дизайна. И фиксить баги, которые будут ползти из каждой щели, если у вас еще нет опыта. Ниже – сводка всей основной информации, которая позволит вам верстать сайты из пары страниц и ссылки на курсы, которые позволят вам углубиться в тему.
Что такое вёрстка сайта
Виды вёрстки
Верстка по шагам
Советы для быстрой вёрстки
Признаки правильной и неправильной вёрстки
Инструменты верстальщика
Проверка вёрстки
Что почитать по теме
Подведем итоги
Что такое вёрстка сайта
Верстка – это перенос дизайна из макета на страницу так, чтобы ничего из изначального (макетного) отображения сайта стояло на своем месте и не потерялось в процессе. Версткой ее называют потому, что процесс очень похож на верстание газетной страницы: вы имеете перед собой чистый лист и с помощью различных инструментов создаете колонки, размещаете текст и картинки, выбираете шрифт и так далее.
Естественно, перед правильной версткой страницы стоит больше вызовов, чем перед адекватной версткой газетного листа.
Все дело в интерактивности – когда верстальщик размечает газетный лист, ему не нужно заботиться о том, что газетный лист может уменьшиться в 2 раза или что читатель захочет открыть интерактивное меню газеты, чтобы перейти к предпоследнему листу. А вот если верстальщик осуществляет разработку сайтов, то он должен со всеми этими вызовами бороться: создавать адаптивный дизайн для разных экранов, задавать адекватное поведение интерактивных элементов (ссылок, меню, кнопок и так далее), прописывать реакции на действия пользователя (с учетом ситуаций, которые следует избегать). Добавьте сюда и оптимизацию – если скорость открытия газетного листа зависит от ловкости рук читающего, то скорость открытия веб-страницы зависит от размера всех файлов на странице – и некоторые из них могут весить очень много, с чем вам тоже придется бороться. В общем, процесс создания сайтов с точки зрения верстальщика – это балансировка между идеальной версткой и адекватными сроками выполнения, что, в общем-то, справедливо для любой сферы разработки.
Естественно, решить все эти задачи без конкретных инструментов не получится. Основной стэк: HTML, CSS, JavaScript, Photoshop.
- HTML – это язык разметки, с помощью HTML-тэгов вы говорите браузеру, что вот в этом вот месте должен располагаться вот этот вот элемент.
- CSS – это язык описания внешнего вида документов, файлы стилей CSS говорят браузеру, что вот этот вот элемент (описанный HTML-тэгом) должен иметь такой-то фон, такой-то шрифт и так далее.
- JS – это полноценный язык программирования, изначально предназначенный для браузеров. JS с помощью DOM-модели (специальная модель для описания элементов страницы) получает доступ к элементу страницы или стилю, после чего что-то с ним делает. При этом изменять параметры можно на ходу, то есть вы, например, можете сделать анимацию из векторной графики или впихнуть плашку «СКИДКА 99%» на весь экран, если пользователь дошел до середины страницы. JS может на лету подгружать данные с сервера, и пользователь будет видеть, как товар, который он просматривает сейчас, активно покупают другие пользователи. В общем, у JS – масса применений.
- Photoshop – программа для редактирования растровой графики. Верстальщику она нужна для того, чтобы взять готовый макет и декомпозировать его на атомарные составляющие: размеры блоков, цвета, шрифты и так далее. Качественную верстку создают очень кропотливо, то есть вам придется перенести каждый кусочек верстки из макета в страницу вручную.
То, что мы описали выше, может показаться очень сложным, но не пугайтесь – все становится намного проще, если вы используете готовые подходы.
В рамках основных подходов можно прибегнуть к одному из трех вариантов: вы можете делать табличную верстку (устарела), обычную блочную верстку (устаревает), адаптивную верстку (процветает). Об этих видах мы расскажем чуть ниже. Есть еще и фреймворки, но это – сложная тема, ее мы вкратце коснемся в конце.
HTML
Начать стоит именно с HTML, поскольку правила отображения страницы задает именно он – таблицы стилей и JS задаются после. HTML-разметка задается с помощью тэгов – вам нужно последовательно перечислить все элементы на странице. Если нужно – никто не запрещает вам класть тэги в тэги. Основные тэги:
Тэг
Что делает
Указывает на то, что браузер имеет дело с HTML-страницей
Содержит внутри себя мета-информацию
Содержит внутри себя контент
Задает заголовок страницы
Размечает блок, которому можно задавать правила отображения
Размечает строку, которой можно задавать правила отображения
Перевод строки внутри текста
Создает форму, в которую пользователь может вводить какие-то данные. По нажатию на кнопку данные из формы передаются на сервер
Сначала вам нужно создать скелет страницы:
Стили и скрипты нужно подключать в head, в body вы размещаете блоки div и контент страницы.
Виды вёрстки
Теперь – о подходах к CSS-верстке. Есть 3 основных – табличная, блочная, адаптивная.
Табличная
Самый древний вид верстки. Во времена зарождения интернета ни CSS, ни тэга div еще не было, и создателям страниц приходилось выкручиваться доступными методами. Самым лучшим вариантом было создание одной огромной таблицы на странице, после чего в эту таблицу размещали шапку, подвал, текст, картинки и прочие элементы страницы.
Табличная верстка не требует CSS. Сейчас она используется только в учебных примерах, потому что контролировать отображение и создавать human-friendly верстку табличным способом крайне сложно (а адекватную резиновую верстку создать и вовсе невозможно).
Блочная
Блочная верстка основывается на тегах div и span. Сначала вы создаете все нужные блоки и правильно их располагаете, затем в CSS задаете размеры ширины блоков, после чего размещаете контент.
Преимущество этого подхода – в его гибкости. Такая верстка сайта соответствует требованиям любых браузеров, и в можете быстро задать конкретные размеры и расположение любого блока – достаточно поменять один параметр в CSS.
Адаптивная
У предыдущего варианта верстки есть всего одна проблема: если вы делали верстку на компьютере, то она будет некорректно отображаться на мобильных устройствах, потому что у них меньше ширина экрана. Проблему решает гибкая/адаптивная верстка – верстка, которая автоматически подстраивается под размеры экрана.
Адаптивная верстка – это дальнейшее развитие блочной верстки. Идея – в том, что вы задаете блокам не фиксированную ширину, а ширину в процентах и диапазонах от ширины экрана. Если блоку явно не хватает размера – он перемещается под мешающийся блок или размещается над ним. Если вы умеете писать на JS – вы можете сделать так, чтобы блок при определенных разрешениях экрана вообще начинал отображаться как-то иначе (это можно сделать и через CSS, но – сложнее).
Сейчас адаптивная верстка – маст-хэв в разработке сайтов, потому что минимум 50% пользователей заходят на сайты со смартфонов или планшетов.
Верстка по шагам
Здесь мы кратко пройдемся по всем шагам создания верстки. Если вам нужны знания более глубокие, чем предоставлены здесь – смотрите курсы ниже.
Шаг 1. Поиск шаблона
Для начала вам нужно найти готовый шаблон, который вы будете переносить на страницу. Поискать можно здесь:
- https://freehtmlthemes.ru/
- http://psd-html-css.ru/shablony/html-shablony-saytov
- https://nicepage.com/ru/html-shablony
Кроме того, вам нужно будет купить/скачать Adobe Photoshop, чтобы получить доступ к слоям шаблона.
Шаг 2. Создаем структуру страницы
Еще один подготовительный шаг. Вам нужно найти хостинг и создать на нем основные файлы/папки. Если нет желания тратиться на хостинг – можете установить WAMP Server, но придется помучаться с его настройкой.
В корневой папке (www) вам нужно создать index.html, папку css, файл styles.css внутри папки css и папку images. Index.html – основная страница сайта, в папке css будут храниться стили, в папке images – изображения.
Шаг 3. Создаем структуру страницы
Вам нужно прикинуть (или нарисовать) размещение основных блоков и содержимое этих блоков. После этого можете описывать всю эту структуру в HTML:
Наш сайт
Как видите, в теле создается общий div, внутри которого лежат различные блоки. У каждого блока – свой id, чтобы мы могли обращаться к блокам в CSS.
Шаг 4. Нарезаем макет на картинки
Откройте макет в Photoshop, найдите все сложные картинки (те, которые не являются одноцветными прямоугольниками) и сохраните их в формате .jpg, после чего – залейте на хостинг, в папку images.
Шаг 5. Собираем все воедино
Самый большой и сложный шаг – вам нужно воссоздать макет на каркасе с помощью сохраненных картинок и CSS-стилей. Помните, что цвет можно взять в Photoshop пипеткой, шрифт можно узнать в свойствах текста.
Шаг 6. Тестируем
Правила валидной верстки требуют, чтобы все теги были на месте и закрытыми при необходимости, а стили не конфликтовали друг с другом. Поскольку процесс создания кода на CSS – дело кропотливое, избежать ошибок практически невозможно. Чтобы найти и исправить их, можно проверить валидность кода через специальные сервисы, про которые мы расскажем ниже.
Советы для быстрой вёрстки
5 короткий советов, который упростят вам жизнь:
- Приучите себя закрывать тэги. Отыскать незакрытый div бывает очень непросто, а верстка едет сразу. Приучите себя перепроверять закрытость тэгов.
- Найдите DocType. В самом начале страницы нужно указывать тип документа – большая строка с множеством параметров. Doctype практически всегда одинаковый, поэтому сохраните его себе где-нибудь и копируйте-вставляйте при необходимости.
- Избегайте описания стилей в HTML. Возможно вы уже знаете, что стили можно описывать и внутри HTML. Ни в коем случае этого не делайте – такие стили имеют более высокий приоритет, чем CSS, и если вы забудете, что прописывали его, то будете очень долго отлавливать ошибку.
- Держите включения в одном месте. Все подключенные CSS-файлы держите строго в шапке, чтобы не искать их по всему документу.
- Пользуйтесь отладчиком. В любой современный браузер встроен отладчик, который позволяет получить информацию об элементе и предупреждает об ошибках. Обычно вызывается кнопкой F12. Пользуйтесь им регулярно.
Признаки правильной и неправильной вёрстки
Правильная верстка
Неправильная верстка
Грамотная структура – все стили лежат в .css-файлах, картинки лежат в папках
Картинки лежат где попало, часть css прописана в .html
Инструменты отладки не видят багов и не выдают предупреждений
Есть баги и предупреждения
Макет перенесен на страницу полностью или почти полностью
Есть очевидные расхождения между макетом и страницей
Страница одинаково отображается во всех браузеров (кроме IE)
Страница по разному отображается на разных сайтах
Правильно расставлены заголовки – один H1 на страницу, заголовки более низкого уровня вложены в заголовки более высокого уровня
Есть несколько H1 на странице, нарушена последовательность заголовков
Изображения оптимизированы, страница грузится быстро
Изображения много весят, страница загружается медленно
Инструменты верстальщика
Про основные инструменты мы уже рассказали. Здесь – вкратце о фреймворках и методологиях. Фреймворк – это одновременно и набор инструментов, и каркас, и философия. Фреймворк построен таким образом, чтобы вы взяли его, подключили, настроили под себя – и получили готовый результат.
В случае с CSS это означает, что вы подключаете к странице готовый css-файл, переопределяете нужные вам классы – и все магическим образом начинает работать. На маленьких проектах вполне можно обойтись без фреймворка, на больших проектах без фреймворков никуда. Самый простой вариант – фреймворк Bootstrap. Взять его и посмотреть на примеры использования можно здесь: https://getbootstrap.com/.
Методология – это оптимальный подход к решению задач.
Методология, в отличие от фреймворка, не дает вам готовых инструментов (и не ограничивает вас в этом), но дает вам методы построения архитектуры вашей верстки.
Ознакомьтесь с БЭМ, разработанном в Яндексе: https://ru.bem.info/.
Проверка вёрстки
Инструменты для проверки валидности кода, соответствия макету и так далее:
- Pixel Perfect. Позволяет получить попиксельную картину страницы, чтобы сравнивать ее с макетом.
- Валидатор. Проверяет ваш код на ошибки и соответствие стандартам.
- Проверка скорости загрузки. Смотрит, насколько быстро загружается ваша страница.
- Проверка по регионам. Еще одна проверка скорости, но вы можете указать регион, с которого будут заходить ваши потенциальные клиенты. Удобно тестировать геолокацию серверов.
Что почитать по теме
- Краткий курс по верстке.
- Расширенный курс по верстке, захватывает JavaScript.
Подведем итоги
Тезисно:
- Верстка – это перенос шаблона на страницу в первозданном виде.
- Основные инструменты верстальщика – HTML, CSS, JavaScript, Photoshop.
- На данный момент доминирует адаптивная верстка.
- Шаги верстки: поиск шаблона, создание файловой структуры, создание каркаса HTML, вырезание картинок из макета, непосредственно верстка (перенос дизайна), тестирование.
- В серьезных проектах используются дополнительные инструменты – фреймворки и методологии.
- Не забудьте прогнать свою страницу через валидатор и сервис тестирования скорости.
Источник: www.sravni.ru
Быстрая вёрстка: какие инструменты использовать и каких правил придерживаться
Верстать сайты — здорово, а делать это быстро — ещё круче! Разбираемся, как этому научиться.
Максим Васянович
Автор статей по программированию. Преподаватель, ментор, выпускник Skillbox. Фрилансер, веб-разработчик
Хороший верстальщик не только знает, как правильно собрать по макету страницу на HTML и CSS, но и умеет делать это быстро. Чем выше скорость — тем лучше.
Давайте рассмотрим основные принципы быстрой вёрстки и некоторые рекомендации, которые сделают работу легче и приятнее.
1. Анализируйте макет до начала работы
Как только получили макет — не спешите сразу его верстать. Сначала обдумайте, даже попробуйте представить будущую страницу в виде HTML-разметки, а уже потом пишите код. Это важно: иначе, возможно, придётся переделывать, потому что появятся неправильная вложенность тегов и другие ошибки. А скорость работы от этого замедлится.
Практикуйтесь: с опытом умение заранее представить, как лучше сверстать макет, придёт само. Это серьёзно ускорит вашу работу.
2. Освойте метод слепой печати
Это кажется банальным, но чтобы быстро писать код быстро — нужно уметь быстро печатать, не отвлекаясь от макета и внешнего вида сайта в браузере. В этом помогает слепая печать — когда вы не обращаете внимания на клавиатуру, пальцы сами набирают код, используя мышечную память.
Есть множество сайтов, чтобы обучиться или развить навык слепой печати. Например, ratatype.ru.
3. Выберите и настройте текстовый редактор
Писать HTML-код можно в любом редакторе кода, даже в блокноте. Да, он будет работать, его можно редактировать и улучшать, но работать в блокноте — долго и неэффективно. Сейчас есть огромное количество различных редакторов и IDE, в которых писать код гораздо удобнее.
Для верстальщика устанавливать полноценную и платную IDE не имеет смысла — код, который он пишет, не настолько сложный. Но подобные редакторы кода отличаются от блокнота массой возможностей: есть встроенный проводник, управление форматированием кода, подсветка синтаксиса, плагины, даже работа с Git. Всё это ускоряет и делает более удобной разработку.
Один из самых популярных редакторов у верстальщиков — VS Code. Это бесплатный продукт от Microsoft, который очень часто обновляется, дорабатывается и улучшается. Есть аналоги: Sublime Text 3, Atom, Brackets. Какой из них выбрать — решать вам.
4. Плагины в редакторе кода
Плагины, которые уже есть (или можно добавить) в редактор кода, — важная часть работы любого верстальщика. Их множество, но я посоветую только те, что действительно ускорят вашу работу.
- Emmet — позволяет использовать сокращения кода вместо того, чтобы писать целые конструкции. Например, достаточно ввести буквы bgc и нажать клавишу Tab, после этого код автоматически развернётся в background-color. Кстати, в VS Code этот плагин уже встроен.
- eCSStractor — плагин, позволяющий выделить участок HTML-кода, в котором уже есть написанные классы, нажать одну кнопку и вставить в CSS-код готовые селекторы. Только представьте: вам больше не надо писать ни одного селектора в CSS — только нужные свойства.
- AutoFileName — помогает быстро находить файлы в папке проекта прямо при добавлении пути файла в атрибут src.
Конечно, есть и другие плагины для разных целей, но эта статья о другом.
5. Готовые фрагменты кода
Никто из программистов не любит писать лишний код, и верстальщики не исключение. Рано или поздно вы замечаете, что из проекта в проект повторяется реализация того или иного элемента. Крайне полезно вынести это в готовый фрагмент кода — сниппет.
Сниппеты можно реализовать прямо в редакторе или использовать Github Gist — своеобразное хранилище для кода. А с помощью плагина Gist содержимое готовых сниппетов можно легко доставать оттуда.
Использование и переиспользование кода — отличный способ ускорить вёрстку и избежать лишних опечаток.
6. Использование БЭМ
Многих начинающих верстальщиков пугает аббревиатура БЭМ (блок-элемент-модификатор) — сидеть и разбираться в том, где блок, а где элемент, кажется сложным.
На самом деле это не так. Попрактикуйтесь, сделайте несколько макетов по БЭМ, мозг привыкнет и начнёт автоматически выдавать правильные суждения о сущностях HTML-элементов, их именовании и так далее.
Вам больше не потребуется придумывать названия классов (это часто приводит к трате времени) или то, как элементы будут зависеть друг от друга.
В общем, стоит сперва побуксовать, изучив БЭМ, чтобы потом делать быстрее и правильнее. Кстати, знать БЭМ требуют в 90% вакансий.
7. Препроцессоры
Препроцессоры — это надстройка над привычными нам языками (например, CSS), которая добавляет массу новых возможностей.
Известный препроцессор Sass даёт возможность использования специальных импортов файла в файл (что поможет в организации кода), вложенности в селекторах (не придётся писать селектор каждый раз с новой строки), миксинов (по сути, функций, которые позволяют сокращать код и выносить одинаковые реализации), переменных и так далее.
Сейчас невозможно представить профессионала в вёрстке, не использующего препроцессоры, — они в несколько раз ускоряют рабочий процесс, позволяют лучше структурировать проект.
8. Сборщики проекта
Сборщики проекта нужны, чтобы сделать то, что разработчику не хочется делать руками — и на что уходит много времени.
Например, Gulp может автоматически собирать все файлы в один, расставлять префиксы для поддержки разных браузеров, создавать SVG-спрайты, и многое другое. Но самое удобное именно для вёрстки здесь и сейчас — возможность автоматически обновлять страницу браузера при сохранении кода.
Если вы используете Gulp, больше не нужно вручную переключаться на браузер и нажимать на кнопку обновления каждый раз после вёрстки какого-либо элемента. Это здорово сокращает затраты времени верстальщика.
Выводы
Здесь перечислены основные методы и инструменты, которые помогут ускорить вашу вёрстку. Все эти инструменты, плагины, редакторы кода — очень здорово. Но главное — ваш профессионализм.
Очень важна практика, постоянное изучение нового (поверьте, в HTML и CSS очень много всего) и самоконтроль. Со временем вы сможете сверстать один и тот же макет не за 2-3 дня, а за 5-6 часов. И это будет свидетельством того, что вы верстаете быстро.
Научиться настраивать редактор, использовать плагины и препроцессоры, а также автоматически собирать проекты можно на нашем курсе.
- Учимся верстать: что такое CSS
- Ох уж эти детки: 10 вундеркиндов из мира IT и не только
- Пишем мессенджер на C#. Часть 1. Вёрстка
Источник: skillbox.ru