<MyRusakov.ru />

Программирование на JavaScript с Нуля до Гуру 2.0

Программирование на JavaScript с Нуля до Гуру 2.0

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

Дополнительно, почти к каждому уроку идут упражнения.

Помимо самого курса Вас ждёт ещё 5 бесплатных ценных Бонусов: «Библиотека jQuery», «Защита JavaScript-кода от копирования», «Решение упражнений из курса», «HTML для начинающих» и «CSS для начинающих».

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Как ускорить верстку сайтов

Как ускорить верстку сайтов

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


Анализ макета

Первое, что нужно сделать - это проанализировать макет на предмет повторяющихся его частей. Например, если это лендинг пейдж, то вы скорее всего обнаружите похожие друг на друга секции с одинаковыми заголовками. У многостраничных сайтов на всех страницах обязательно присутствует шапка и футер. Делайте наброски кода из похожих элементов на отдельной странице. После визуального осмотра макета, определите базовые переменные. Обычно в переменные заносят основные цвета, шрифты, радиусы скругления кнопок или блоков. Пройдитесь по всем секциям / страницам проекта и стилизуйте все теги от h1 до h6. Заранее определите для вашего проекта повторяющиеся участки в макете.


Подключение Bootstrap сетки

Верстка по Bootstrap сетке очень существенно ускоряет верстку. Этот CSS-фреймворк берет на себя позиционирование элементов на странице и быстро решает вопрос с адаптивностью сайта. Как правило профессиональные макеты уже рисуются веб-дизайнерами по 12-ти колоночной сетке. Что существенно облегчает жизнь верстальщиков.


Использование CSS препроцессоров

Нереально много времени уходит на прописывание CSS стилей, как говорится "от корки до корки". Однако понимание приходит примерно после верстки 10-ти макетов. Любые CSS препроцессоры (я предпочитаю Sass) являются супер эффективным инструментом по автоматизации верстки.


Экспорт изображений из макета

Если перед вами PSD макет, открытый в Photoshop, то имейте ввиду, что понятие "нарезка изображений" уже не актуально. Вместо инструмента "раскройка", следует экспортировать изображения. У других специализированных программ по работе с макетами (Figma, Adobe XD), вопрос экспорта в нужном формате, отлично налажен.


Плагин Emmet

Всегда используйте плагин Emmet при написании кода в вашем любимом редакторе. Могу без всякого преувеличения сказать, что благодаря плагину, время затрачиваемое на набор кода уменьшилось в 3-5 раз.


Использование таск-менеджера (Gulp)

Таск-менеджер автоматизирует рутинные задачи:

  • оптимизирует изображения
  • минимизирует CSS / JS файлы
  • проставляет вендорные префиксы
  • управляет файлами и папками
  • подключает файлы библиотек, плагинов

Применение jQuery

Я придерживаюсь мнения, что для решения типичных рутинных задач в процессе верстки (табы, карусели, аккордеоны, модальные окна, различные анимации), вполне подходят готовые библиотеки и плагины на jQuery. Для маленьких и средних проектов не стоит писать свои скрипты на нативном JS. Это долго и неэффективно.


CSS генераторы кода

В особых случаях, при написании редких или слишком "замороченных" CSS правил, получается быстрее воспользоваться онлайн-генераторами. Я с большим удовольствием использую некоторые из них. Здесь небольшой список моих помощников:

  • Google Webfonts Helper - https://google-webfonts-helper.herokuapp.com/fonts
  • Генератор треугольников на CSS - http://apps.eky.hk/css-triangle-generator
  • Фигуры необычной формы - https://9elements.github.io/fancy-border-radius
  • Генератор префиксов - https://autoprefixer.github.io/ru
  • Генератор теней - https://www.cssmatic.com/box-shadow
  • Генератор градиентов - https://www.colorzilla.com/gradient-editor/

Умение быстро и правильно верстать сайты - это профессия, овладев которой можно неплохо заработать. А начинать нужно с изучения самых основ верстки. Мой видео-курс проведет вас за руку по всем сложным местам, абсолютно с нуля до приобретения навыков верстки макетов любой сложности.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.