План вёрстки

1. Создать файл для сброса css-стилей
2. Создать файл для css-переменных
3. Добавить основные переменные для размера текста, цветов, анимаций, адаптива и повторяющихся блоков
4. Создать файл для шрифтов
5. Создать папку assets для картинок/шрифтов/иконок и других вспомогательных элементов
6. Добавить все иконки/картинки/видео с макета

Правила Вёрстки

1. БЕМ bem-cheat-sheet
2. Кроссбраузерность caniuse
3. Вложенность тегов caninclude

Оптимизация скорости загрузки

1. Уменьшение размеров шрифтов и удаление ненужных начертаний
2. Уменьшение качества картинок и преобразование в другие форматы squoosh
3. Уменьшение качества видео и преобразования в gif online-convert

SEO

1. ogp
2. микроразметка
3. ссылка1
4. Яндекс Метрика
5. SEO советы

Сдача сайта

1. pagespeed
2. validator.w3
3. markdown

Backend

1. Генерация API mokky
2. Бесплатные API public-apis
3. JSONPlaceholder

Шрифты

1. ffont
2. fontsquirrel

Анимации и Иконки

1. Готовые анимации (спиннеры) loading
2. Создание анимаций animista
3. GitHub иконки devicon
4. Бесплатные иконки icon-icons
5. fontawesome

<link
    rel="stylesheet"
    href="https://pro.fontawesome.com/releases/v5.15.2/css/all.css"
/>

5. Бесплатные иконки iconfinder

Полезные сайты

1. Готовые элементы (графики, 3D, эффекты для картинок) bennettfeely
2. 3D объекты sketchfab
3. Вдохновение codepen
4. Удалить фон background-remover
5. Из css в scss css2sass
6. Создание векторных картинок/gif piskel
7. Авто создание картинок по чертежу autodraw
8. Создание аватарки gallerix
9. Макеты сайтов verstaem
10. Тренировка скорости печати TypingClub

Изучение

1. learn.js
2. metanit.com
3. w3schools

JS свойства

1. Array - push - pop - ...

Библиотеки

1. Работа с 3D на сайте three.js

Наименование классов

Регулярные выражения