Основы
WEB-разработки

— Знакомство, что такое сайты. Знакомимся с html, тегами верхнего уровня, простыми тегами (p, img, h1-h6)

— Семантические теги (header, footer, main, ul ol li strong em i b)

— Знакомимся с CSS + цветовые схемы, color, background color, font

vs code + emmet аббревиатуры

— Селекторы класса и идентификатора, название классов, шрифты

— Блоки + отступы поля границы

— Фон + хаки с маржинами

— Позиционирование и z-index

— Интерактивные элементы (встраивание видео, аудио, игры, айфрейм)

— Флексы

— Гриды

— Урок-практика по пройденному, собственный небольшой проект

— UX+UI

— Основы создания пользовательского интерфейса + практическая работа (исправляем плохой сайт)

— Знакомство с Figma

— Плагины в Figma, шаблоны, иконки

— Урок-практика в Figma, собираем небольшую основу (для того, чтобы потом создать свой полноценный проект)

— Wordpress

— Локальный сервер и знакомство с PHP

— Углубление в PHP

— Wordpress

— GitHub

— Создание собственного проекта (в Figma и вёрстка сайта)

— Урок повторение, верстаем мини-проект

— Адаптивная и отзывчивая вёрстка

— Мобильная вёрстка и бургер меню

— Практический урок в Figma по созданию макетов под разные платформы

— Cтилизация блоков

— Псевдоклассы и псевдоэлементы

— Трансформации

— Анимации

— Практический урок по псевдоклассам, псевдоэлементам, трансформациям и анимация

— Делаем карусель как в нетфликсе, только при помощи HTML+CSS

— Градиенты

— Создание цветового фона фильтры, смешивания)

— Рамки: полупрозрачные рамки, несколько рамок, внутреннее скругление.

— Градиентные рамки в CSS

— Фигуры

— CSS Sass

— CSS Sass + bootstrap

— Bootstrap

— Создание Landing Page

— Вспоминаем UX-UI правила, описываем идею, обдумываем дополнительные страницы, готовим материал

— Accessibility UI

— Делаем макет под ПК, планшет, мобильное устройство

— Доработка макета + начинаем верстать (HTML)

— Верстаем по макету

— Основы JavaScript (что такое JS; где и как взаимодействует с HTML и CSS; типы данных; переменные; преобразование типов)

— Простейшая карусель на JavaScript + добавляем к своему проекту

— Завершение работы над проектом, публикация проекта на бесплатном хостинге