Введение в веб-разработку, знакомство с редакторами Sublime Text и Brackets. Установка и настройка. 5 видео-уроков

Введение в веб-разработку, знакомство с редакторами Sublime Text и Brackets. Установка и настройка. Видео

Всем привет. В этом посте я предлагаю новичкам познакомиться с основными инструментами, которые используются для верстки сайтов. А именно с текстовыми редакторами кода. Я сделал видео-обзор редактора Sublime Text 3 и Brackets. Безусловно существует еще много других разных программ. Но для того что-бы начать, необходим один инструмент, а не десять. Поэтому предлагаю начать с самого популярного Sublime Text 3 или с более дружелюбного для новичков — Brackets от Adobe. В этих уроках мы установим, настроим и подготовим к работе главный инструмент верстальщика сайтов — редактор кода.

Читать далее

Интерактивные прототипы на jQuery для веб-дизайнеров

Интерактивные прототипы на HTML CSS и jQuery для веб-дизайнеров

Все мы были в похожей ситуации. Сделав интересный дизайн концепт, предоставляя результат клиенту, скорее всего вы слышали вопрос: «А как это будет работать?». В этот момент вы начинаете объяснять что будет происходить при нажатии на кнопки, пытаясь словесно объяснить взаимодействие с интерфейсом. Проще говоря, это не лучший подход для презентации.

Сегодня мы освоим несколько простых приемов, с помощью которых вы сможете оживить свои концепты и прототипы. Уровень этого урока — средний. Предполагается что вы уже знаете HTML и CSS, поэтому мы сконцентрируемся только на JS коде и jQuery.

Читать далее

Как научиться верстать и програмировать сайты. Универсальный рецепт.

Секрет обучения - как научиться верстать и программировать сайты

У меня есть один универсальный рецепт, который 100% помогает освоить новые знания, будь то html разметка, язык программирования или запросы к базе данных. Этот метод работает, и это уже проверено не единожды. От вас требуется лишь его выполнение.

Читать далее

Семантическая структура для HTML5 страницы. Семантика в HTML5

Семантическая структура для HTML5 страницы. Семантика в HTML5

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

Читать далее

Установка и настройка Sublime Text 3. Компиляция LESS, SASS, JADE. Все необходимые плагины. Полная инструкция

Установка и настройка Sublime Text 3. Компиляция LESS, SASS, JADE. Все необходимые плагины. Полная инструкция

Привет, много уже было написано про Sublime Text. В своем блоге я писал про Sublime Text 2. Сейчас Sublime Text 3 уже вышел из альфа версии (альфа — означает — новая и крайне не стабильная версия), и перешел в бету (бета — все еще не стабильная, но уже предназначена для тестирования, после беты обычно идет официальный релиз). И я решил полностью разобраться с Sublime Text 3 (далее в тексте ST3).

Если вы собираетесь установить SublimeText3 то эта самая полная инструкция  для вас. Здесь я опишу все что связано с этим редактором, а умеет он действительно многое.

Читать далее

Работаем с less в Sublime Text. Компилируем less исходники Bootstrap

Используем less из Sublime текст. Компилируем less исходники Bootstrap

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

Самый простой способ начать компилировать less код в css в Sublime Text — это установить плагин Less Build. Главное чтобы в пути к компилируемому файлу не было русских символов, и работать он будет хорошо. Для новичков этого вполне хватит. Еще можно установить плагин BuildOnSave, чтобы билдить не сокращением Ctrl+B, а нажимать привычное Ctrl+S, и билд будет происходить по сохранению файла.

Читать далее

Препроцессор SASS. Установка и настройка в Sublime Text

Препроцессор SASS. Установка и настройка SASS в Sublime Text

Препроцессоры ускоряют работу верстальщика. Если с работой с препроцессором LESS все просто, установил плагин и он работает. То чтобы компилировать SASS нужно взять бубен и немного потанцевать с ним. Разберемся как настроить компиляцию SASS файлов в Sublime Text.

Читать далее

DIV на всю высоту родителя

DIV на всю высоту родителя

Изящное CSS решение чтобы сделать высоту блока равной высоте его родительского блока. Применяется в том случае когда высота родительского блока не задана фиксировано, и определяется контентом внутри него.

Читать далее

Обучение верстке сайтов HTML5/CSS3 – Продолжается!

Анонс курса по обучению HTML5 / CSS3 с нуля до профи

Этим летом я стартовал курс по обучению верстке сайтов. Уже прошло два потока. Программа курса прошла проверку боем, и должен сказать что мой опыт меня не подвел. Студенты которые приходили с нуля, теперь могут верстать современные сайты. Адаптивность, отображение на мобильных устройствах, responsive menu, выпадающее меню, слайдеры, фреймворк twitter bootstrap не вызывают проблем. Сейчас я готовлю программу для третьего потока обучения. В основе она останется такой же как и была, но я хочу сделать ее еще лучше, настолько, насколько это возможно.

Читать далее