Новичок
6 уроков
(1 час 9 минут)
Курс
CSS3 button generator
В этом видеокурсе вы изучите инструменты, техники и подходы для web-разработчика, которые помогут вам решать поставленные задачи более быстро и эффективно.

#1 — Bootstrap, html5boilerplate, initializr.

Первая, она же вводная, часть нашего нового курса, целью которого является помощь начинающим разработчикам в освоении современных frontend инструментов, техник и навыков. Шаг за шагом мы будем создавать генератор CSS3 кнопок, получая опыт на реальном примере. Начнём с обзора Twitter Bootstrap и html5boilerplate!

Twitter Bootstrap

Прежде всего познакомимся с Twitter Bootstrap — наиболее популярным и мощным на сегодняшний день инструментом для лёгкой и быстрой web-разработки. Twitter Bootstrap позволяет максимально ускорить процесс создания web сервиса или сайта, т.к. имеет в своём арсенале практически всё, что может понадобиться для решения самых различных задач: сетки и шаблоны для лэйаута, типографику, таблицы, формы, модальные окна, тултипы, CSS классы на все случаи жизни, а также внушительный javascript инструментарий, включающий даже слайдер!

Одно из основных, на мой взгляд, преимуществ Twitter Bootstrap заключается в том, что разработчик может целиком погрузиться в воплощение своей идеи, не растрачивая драгоценный энтузиазм и время на написание десятков и сотен строк CSS и JS кода и подключения десятков плагинов для тех или иных целей.

Попробуйте поиграться с данным фреймворком сами: официальный сайт twitter bootstrap и его русский перевод.

Html5boilerplate

Следующий инструмент, который обязательно должен быть у вас на вооружении — это html5boilerplate — самый популярный и известный шаблон среди web-разработчиков. В нём собраны все лучшие хаки и настройки для кроссбраузерной совместимости, поддержки html5 и очень много чего ещё. Больше информации вы можете найти на официальном сайте html5boilerplate. А прямо сейчас я предлагаю вам перейти к инструменту, позволяющему соединить html5boilerplate с Twitter Bootstrap. Перед вами:

Initializr

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

  • Pre-configuration — Bootstrap
  • HTML/CSS Template — Responsive Bootstrap
  • HTML5 Polyfills — Modernizr
  • jQuery — Development
  • H5BP Optional — по вашему вкусу

Ссылка на Initializr тут.

Теперь мы готовы приступить к созданию CSS3 генератора кнопок!

Потратьте некоторое время на изучение описанных выше инструментов, чтобы сформировалось хотя бы общее видение, однако не стоит слишком беспокоиться, если что-то пока не ясно. Учиться мы будем на практике, а именно на создании вашего собственного генератора CSS3 кнопок!

Делись:

Оставь комментарий!

One thought on “#1 — Bootstrap, html5boilerplate, initializr.

  1. Илья:

    Спасибо, очень пригодится. Особенно в эпоху мобильных девайсов

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

Рекомендуемые курсы