<MyRusakov.ru />

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

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

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

К курсу прилагается множество упражнений и все исходники из уроков.

Наконец, Вы получите ещё несколько бонусов: "Создание калькулятора на Python", "Создание игры на Python" и "Правильная работа со справочником".

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

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

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

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

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

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

Pug – это не мопс, тогда кто?

Pug – это не мопс, тогда кто?

Pug – это HTML препроцессор, написанный на JS для работы на платформе Node.js, с одной единственной целью – ускорить верстку. За счет чего верстать станет быстрее?

Нет открывающих и закрывающих тегов, вложенность регулируется отступами. Давайте сравним, как бы мы написали данный код, в обычном HTML и с Pug.

HTML

<div>
    <h1>Pug</h1>
    <p>HTML</p>
    <p>шаблонизатор</p>
</div>

Pug

div
    h1 Pug
    p HTML
    p шаблонизатор

Редактирование текста

Как редактировать текст, если нет закрывающих тегов? Разработчики, проявили милосердие и кое-что оставили для нас – закрывающие и открывающие теги, внутри текста.

HTML

<p>Верстаю с препроцессором <b>Pug</b>.</p>

Pug

p Верстаю с препроцессором <b>Pug</b>.

Как записать тип документа.

HTML

<!DOCTYPE html>

Pug

doctype html

Создание и вывод переменных.

// переменные

- var title = " Pug – это не мопс ";
- var who = "Точно не собака.";
- var what = "<span>шаблонизатор и препроцессор</span>";

// Pug код

h1= title
p Тогда, кто это? #{who}
p Не кто, а что: {what}

// Скомпилированный HTML

<h1>Pug – это не мопс</h1>
<p>Тогда, кто это? Точно не собака.</p>
<p>Не кто, а что: <span>шаблонизатор и препроцессор</span></p>

Переиспользование блоков через миксины.

HTML

<ul>
    <li class="dog">pug</li>
    <li class="dog">mops</li>
    <li class="dog">griffon</li>
</ul>

Pug

// миксин

mixin dog(breed)
    li.dog= breed

//- Pug код

ul
    +dog('pug')
    +dog('mops')
    +dog('griffon')

Однако браузер не поймет то, что мы тут понаписали. Поэтому Pug код сначала нужно скормить компилятору. На компьютере должна быть установлена программа Node.js и редактор кода VS code (необязательно).

Установка Pug

  1. Открыть терминал у VS code
  2. Выполнить команду $ npm install pug
  3. Затем npm install pug-cli –g
  4. Команда pug –help выведет список всех доступных команд.
  5. Создать папку с файлом, index.pug
  6. Выполнить команду pug -w index.pug
  7. На выходе, получите скомпилированный index.html, в той же папке

Заключение

Хочу предостеречь тех, кто только начинает изучать HTML. Сначала освойте нативный HTML, а на Pug не обращайте никакого внимания, всему своё время. Использование препроцессоров хорошо работает на разработчиков с опытом – реально сокращает время верстки. Для начинающих, одновременное изучение классического HTML с препроцессорами – вызовет дикий хаос в голове.

Предвижу ваши возражения: "Вам легко говорить, но в 90% вакансиях на верстальщика / front-end разработчика, одним из требований стоит – Pug (бывший Jade)". Конечно же работодатели требуют использование прогрессивных способов верстки. Скажу вам по секрету, что новичков никто не ждет. Если вы новичок, то вам нужно начинать с основ верстки (есть хороший видео-курс по верстке), но никак не с изучения препроцессоров.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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