Памятка

VSCode - подсказывающий редактор

https://code.visualstudio.com/download - отсюда установить подходящую для вашей системы версию

Плагин Live Server - помогает обновлять браузер при каждом сохранении VSCode (ctrl+S)

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

Подключение стилей для сайта

Стили можно подключать инлайн, прямо в теге html, вывести в раздел style с присвоением тегам классов или идентификаторов а также можно вывести в отдельный файл

<img style="width: 100px" . . . >
<style> .myDiv{background: red } <style>
<div class="myDiv">
Создать файл, например style.css и привязать к сайту строкой в <link rel="stylesheet" href="style.css">

Относительные ссылки и абсолютные ссылки

Абсолюткая ссылка выглядит так <a href="http:// . . .>" - обычно смотрит в интернет
Относительная ссылка выглядит так <a href="images/cat.jpg>" - смотрит в текущую папку

Относитальняя ссылка предпочтительней, так как файл внутри сайта и не исчезнет при внешних изменениях

Часто используемые стили

background: orange или background: #99ffdd; font-family: Arial; font-size: 24px;

width: 300px; height: 300px; color: green; border-radius: 30px; box-shadow: 0 0 20px black;

для позиционирования position: absolute; и смещение сверху и слева top: 100px; left: 250px

Изменение по наведению мышки .myButton{ background: red; border: 3px solid yellow; margin: -3px}

Часто используемые комбинации клавиш:

CTRL+C / CTRL + V - скопировать и вставить ; CTRL+Z / CTRL+Y - отменить/вернуть отмененное; CTRL+X - вырезать; ALT+SHIFT+F - отформатировать код в VSCode; CTRL+S - сохранить