1. Погружение в тему создания web-продуктов. Изучение основ HTML и CSS"
2. Ускорение работы и еще больше современных подходов"
- Зачем нам этот модуль
- Современная разработка сайтов, веб-приложений и других веб-продуктов. Перспективы
- Про конструкторы, искусственный интеллект и перспективы
- Классификация и этапы создания сайтов/веб-приложений
- Как все это работает изнутри: протоколы, клиент-серверная архитектура и http
- Как все это работает изнутри: html, css, js и тд.
- Работа с графикой: виды, дизайн-макеты и тп
- Сервисы для работы с графикой
- (Дополнительно) Преобразование иконок в svg формат и “сетки” в макетах
- Установка и настройка редактора кода
- Создаем свой первый проект. Основы HTML
- Основные теги HTML на практике
- Семантика и семантические теги HTML5
- Основы CSS на практике
- Блочная модель CSS
- Developer Tool. Что это и как с ним работать?
- Блочная модель CSS. Часть 2
- Позиционирование элементов в CSS. Принцип карточной колоды
- Выравнивание элементов по вертикали. История: верстка таблицами и float'ами
- Единицы измерения CSS
- Специфичность CSS селекторов
- Автоматическое форматирование кода
- Практика часть 1. Создаем сайт на чистом HTML и CSS
- Практика часть 2. Создаем сайт на чистом HTML и CSS
- Технология Flexbox
- Применение Flexbox в проекте
- Практика. Заканчиваем сайт на чистом HTML и CSS + домашнее задание
- Свойство object-fit и работа с изображениями
- Нормализация стилей normalize.css и аналоги
- Подключение файлов через cdn-сервера. Различия и преимущества
- Работа со шрифтами в web'e
2. Ускорение работы и еще больше современных подходов"
- Зачем нам этот модуль
- Как чистый CSS постепенно догоняет инструменты
- CSS Nesting
- Практика. Создаем новый проект
- CSS variables (custom properties)
- Практика. Создаем первые две секции
- CSS Grid. Начало
- CSS Grid. Единица гибкости (fr) и repeat()
- Что использовать: Grid или Flexbox
- Практика. Создаем grid-секцию
- CSS Grid. Явные и неявные гриды
- CSS Grid. Функция minmax()
- CSS Grid. Масштабирование треков, auto-fit и auto-fill
- CSS Grid. Позиционирование треков
- (Дополнительно) CSS Grid. Выравнивание треков
- (Дополнительно) CSS Grid. Grid Area и подсетки
- Псевдоклассы в CSS
- Применяем псевдоклассы в проекте, CSS transition
- Псевдоэлементы в CSS
- Применяем псевдоэлементы в проекте
- Практика. Заканчиваем базовую верстку. Функция calc()
- Про футер и переменную
- Варианты работы с иконками
- Адаптация проектов под различные устройства
- Что такое Pixel Perfect
- Большая практика. Адаптация проекта. Часть №1
- Tip. Nesting при адаптации
- Адаптация проекта. Часть №2
- Логические свойства размеров
- Локальные ссылки, favicon и smooth-behavior
- Системы контроля версий. Git
- Сервисы для хранения репозиториев. github / gitlab и другие
- Публикуем сайт в интернете. Домен. Хостинг. Сброс "кеша"
- Как работать с GitHub с разных компьютеров, gitignore и Git UI
- Зачем нам этот модуль
- Препроцессоры в CSS (SASS/SCSS и другие)
- Методологии названия классов (BEM, Atomic и тд) конвенция названий
- Что такое сборщики проектов, планировщики задач и тд.
- Настраиваем Vite для нового проекта и разбор нюансов
- ИИ для конфигураций
- Обсуждаем и подготавливаем новый проект
- Заготовка под проект
- Что такое Mobile first
- Практика. Разбираемся с UI Kit / Style Kit и остальными нюансами сборки
- Практика. Создаем первую секцию и переиспользуемые компоненты
- Функция clamp для быстрой адаптации (+ min()/max())
- Практика адаптации
- Готовые инструменты для ускорения работы со стилями
- ИИ для списка инструментов
- Практика
- В дополнение к практике
- Перечень веб-компонентов и их названий + дз
- Формы в web-продуктах
- Знакомимся с языком программирования Javascript
- Большая практика. Создаем и разбираем компонент-слайдер. Часть 1
- Большая практика. Создаем и разбираем компонент-слайдер. Часть 2
- Дополнительная строка настройки слайдера
- Реальные процессы в работе
- Альтернативные варианты функционала
- Большое домашнее задание. Создаем футер
- Практика. Создаем гамбургер-меню. Трансформации
- Практика. Создаем табы на странице
- Проверьте свою работу
- Практика. Создаем записи блога и обсуждаем нюансы динамического контента
- Практика. Создаем интерактивные карты. Iframe
- Практика. Валидация форм
- Разбираем интересные моменты д/з, :auto-fill
- Практика. Отправка формы c сайта
- Анимации при помощи CSS3
- Библиотеки для работы с анимациями и AI-tips
- Валидация, оценка и оптимизация веб-продукта. Метрики
- Мета-тэги и OG tags, расширенный favicon
- Загружаем web-продукт на реальный хостинг. Что такое FTP
- Заключение. ИИ для ускорения работы. Интерфейсы в разных технологиях. Проекты
- Зачем нам этот модуль
- Подготовка к созданию портфолио
- Создаем первый экран, часть 1
- Создаем первый экран, часть 2 (анимация меню)
- Используем CSS Grid для создания второго экрана
- Создаем третий экран портфолио
- Реализуем скрипт автоматического пересчета процентов
- Создаем блок-портфолио работ
- Создаем блок с контактами
- Политика конфиденциальности. Что это, зачем и как использовать.
- Добавляем object-fit и работаем с изображениями
- Адаптация портфолио, часть 1
- Заканчиваем портфолио и адаптируем последние экраны
Для просмотра скрытого содержимого необходимо Войти или Зарегистрироваться.