XSquareDev

Виды HTML элементов

Описание существующих контейнеров и списки соотвествующих тегов.

Блочные элементы и блочные контейнеры

Блочные элементы — элементы высшего уровня, которые форматируются визуально как блоки, располагаясь на странице в окне браузера вертикально. Значения свойства display, такие как block, list-item и table делают элементы блочными. Блочные элементы генерируют основной блок, который содержит только блок элемента. Элементы со значением display: list-item генерируют дополнительные блоки для маркеров, которые позиционируются относительно основного блока.

Список тегов: <address>, <article>, <aside>, <blockquote>, <dd>, <div>, <dl>, <dt>, <details>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <iframe>, <li>, <legend>, <nav>, <noscript>, <ol>, <output>, <optgroup>, <option>, <p>, <pre>, <section>, <summary>, <table>, <ul>

Строчные элементы и строчные контейнеры

Встроенные (строчные) элементы генерируют внутристрочные контейнеры. Они не

XSquareDev

Виды селекторов отношений

Используются для того чтобы выбрать элементы в зависимости от того как они связаны с другими элементами на веб-странице.

Вложенные селекторы

Комбинатор выбирает элементы, которые находятся внутри указанного элемента (вне зависимости от уровня вложенности).
css

div p {
  color:red;
}

XSquareDev

Основные мета-теги

Мета-теги - это служебные слова, которые содержат важную информацию о веб-документе для поисковых систем. В большинстве случаев размещаются внутри тега head.
Список мета-тегов для атрибута name:

• description — описание веб-страницы, должно быть достаточно длинным и полным
• keywords — ключевые слова,
• generator — CMS сайта,
• author — автор,
• copyright — авторские права,
• robots — правила индексирования страницы для роботов,
• viewport — данные о настройке области просмотра

XSquareDev

СОЧЕТАНИЕ КЛАВИШ VS

Частоиспользуемые сочетания клавиш в Visual Code

Файл

Ctrl + Shift + F - искать в файлах и файлы
Ctrl + Shift + N - новое окно редактора

Ctrl + K O - открыть папку

XSquareDev

Основной синтаксис Markdown разметки

Более полное руководство по Markdown синтаксису

Параграфы

<пустая строка>
Текст параграфа. Может быть
разбит на несколько строк.
<пустая строка>

XSquareDev

Настоящий документ предназначен для ознакомления пользователя с функциональными возможностями языка разметки Markdown. Markdown – это облегченный язык разметки, который является инструментом преобразования кода в HTML. Главной особенностью данного языка является максимально простой синтаксис, который служит для упрощения написания и чтения кода разметки, что, в свою очередь, позволяет легко его корректировать. Теперь рассмотрим более подробно функции языка разметки Markdown.

Markdown не является заменой HTML. Синтаксис Markdown достаточно ограничен, и соответствует лишь небольшому подмножеству элементов HTML. Он включает в себя следующие элементы:

1. Блочные элементы

• Параграфы и разрывы строк;
• Заголовки;

XSquareDev

Методология БЭМ

БЭМ (Блок, Элемент, Модификатор) — компонентный подход к веб-разработке. В его основе лежит принцип разделения интерфейса на независимые блоки. Он позволяет легко и быстро разрабатывать интерфейсы любой сложности и повторно использовать существующий код, избегая.

Основная терминология

Блок - часть страницы, являющаяся логически независимой от остального наполнения. Представляет собой «строительную единицу» для сайта (на примере конструктора лего - это отдельный «кирпичик»). Блок не отвечает за свое расположение. Он задает внутренние свойства (размеры, шрифты и т.д.).

Элемент - часть блока, которая должна входить в состав блока и не иметь какого-либо смысла отдельно от блока.

XSquareDev

Препроцессор Pug(Jade)

Pug - это препроцессор HTML и шаблонизатор, который был написан на JavaScript для Node.js.

Содержание:

1. Теги
2. Текст
3. Атрибуты
4. Констуркция Switch Case
5. Циклы
6. Вставка JavaScript кода

XSquareDev

Шпаргалка по консольным командам Git

• Общее
• Консольные команды
• Примеры реальной работы

Общее