• Август 2017
    Автор: Комментариев нет
    Основные теги html

    Основные теги html

    Рассмотрим верстку видимой части документа body. Все что верстается внутри тега body будет видно в браузере.

    Тег body содержит любые теги для оформления документа. Откроем файл index.html в чистом шаблоне в sublime text и браузер, чтобы видно было наглядно результат верстки.

    Основные теги

    Первым делом рассмотрим как делать ссылки.

    Ссылка обозначается тегом a и атрибутом href, который указывает куда ведет эта ссылка, например, на картинку.

    Рубрики: Верстка ЧИТАТЬ КОММЕНТЫ
  • Август 2017
    Автор: Комментариев нет
    Синтаксис, псевдоклассы, иерархия и свойства css

    Синтаксис, псевдоклассы, иерархия и свойства css

    Рассмотрим стилизацию документа, придания определенного цвета, размера, последовательности и текста на странице.

    Состоит из простых конструкций, которые легко можно выучить.

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

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

    Чтобы использовать css в документах html его нужно подключить, указав путь к файлу.

    Рубрики: Верстка ЧИТАТЬ КОММЕНТЫ
  • Август 2017
    Автор: Комментариев нет
    Подключаем шрифт font awesome иконки

    Подключаем шрифт font awesome иконки

    Подключаем шрифт font awesome к проекту.

    Это шрифт с иконками, после подключения в верстку можно применять иконки.

    Для начала скачаем шрифт с официального сайта. В архиве нам понадобятся две папки css и fonts.

    Возьмем их и перейдем в чистый шаблон gulp.

    В папке libs создадим папку font awesome и распакуем в нее две папки.

    Рубрики: Верстка ЧИТАТЬ КОММЕНТЫ
  • Август 2017
    Автор: Комментариев нет
    Чистый gulp шаблон

    Чистый gulp шаблон

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

    В конце статьи можно скачать шаблон.

    Разберем из каких файлов он состоит и основные функции этих файлов.

    Рубрики: Верстка ЧИТАТЬ КОММЕНТЫ
  • Август 2017
    Автор: Комментариев нет
    Основные gulp плагины

    gulp плагины

    Настройка gulp и плагина sass есть в статье как установить gulp.

    Продолжаем установку основных плагинов.

    Создадим таск, который будет собирать все js файлы в один и сжимать его.

    Все js скрипты и css сжимаем и переносим в один файл

    Рубрики: Верстка ЧИТАТЬ КОММЕНТЫ
  • Август 2017
    Автор: Комментариев нет
    Скрипт обратной связи для лендингов

    Рассмотрим как сделать скрипт обратной связи для лендинг страниц.

    Подключается к любой форме обратной связи с любым количеством полей, без исправления файла mail.php.

    Обратная связь состоит из трех файлов, рассмотрим каждый подробно в отдельности.

    создаем index.html

    Рубрики: Верстка ЧИТАТЬ КОММЕНТЫ
  • Август 2017
    Автор: Комментариев нет
    Настраиваем препроцессор sass

    Настраиваем препроцессор sass

    Sass это один из наиболее стабильных препроцессоров и самый популярный у профи.

    Рассмотрим его сильные стороны.

    Это совместимость с разными версиями css, поэтому можно использовать любые css библиотеки в проекте.

    Также синтаксис sass упрощает работу и разнообразит разработку.

    Настройка окружения для работы

    Рубрики: Верстка ЧИТАТЬ КОММЕНТЫ
  • Август 2017
    Автор: Комментариев нет
    livereload страниц в browsersync

    livereload страниц в browsersync

    Переходим на официальный сайт browser-sync, на главной странице увидим команду.

    Клманду нужно прописать в окно команд в проекте npm I browser-synс --save-dev.

    После успешной установки увидим, что плагин появился в package.json.

    Открываем gulpfile.js и подключаем browser-sync. Пишем.

    Рубрики: Верстка ЧИТАТЬ КОММЕНТЫ
  • Август 2017
    Автор: Комментариев нет
    Настраиваем sublime text 3

    Настраиваем sublime text 3

    Рассмотрим настройку sublime text 3 для frontend разработки.

    Для начала скачаем программу с официального сайта.

    Далее запускаем установщик.

    После запускаем программу и приступаем к настройке.

    Первым делам добавляем пакеты.

    Нажимаем ctrl+shift+p откроется табличка пишем слово install и выбираем пункт Install Package.

    Рубрики: Верстка ЧИТАТЬ КОММЕНТЫ
  • Август 2017
    Автор: Комментариев нет
    Как установить gulp и плагины

    Как установить gulp и плагины

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

    Все проекты использующие gulp имеют в корне файл gulpfile.js.

    Для начала устанавливаем gulp у нас должен быть установлен node.js.

    Скачиваем его с официального сайта, последнюю версию.

    Рубрики: Верстка ЧИТАТЬ КОММЕНТЫ