Веб-дизайн и UI/UX: от вёрстки до портфолио
HTML, CSS, JS, Figma, анимация и первый фриланс — 28 тем · 156 занятий
- 01: Введение в веб-разработку — Как работают сайты, backend и frontend. Sublime Text, первая HTML-страница, теги, атрибуты, CSS-стили.
- 02: Язык HTML — Структура HTML5, основные теги, веб-формы, валидация, таблицы, семантическая вёрстка и стандарты.
- 03: История и стандарты — Развитие интернета, WWW, XHTML, блочные и линейные элементы, заголовки H1-H6, редакторы и браузеры.
- 04: Основы CSS — Синтаксис CSS, правила каскадности, группировка и наследование стилей, приоритеты.
- 05: Селекторы CSS — Комбинированные селекторы, группировка и наследование, приоритеты стилей в CSS.
- 06: Ссылки и пути — Тег ссылки, относительные и абсолютные пути, URL/URN, фрагменты страницы, именование папок.
- 07: Списки, символы, метаданные — Маркированные и нумерованные списки, Unicode, MIME-типы, метаданные KEYWORDS и DESCRIPTION, SEO-основы.
- 08: CSS. Блочная модель и позиционирование — Box model, border/margin/padding, обтекание, навигация, Relative/Absolute/Flex/Fixed.
- 09: Шрифты и текст — Шрифтовое и текстовое оформление, выравнивание, интерлиньяж, кернинг, цвет, написание текстов для Web.
- 10: Цвета и изображения — Цветовые модели в CSS, форматы JPEG/GIF/PNG, фоновые изображения, градиент, тени, UI-генераторы.
- 11: Расположение элементов (CSS) — Relative/Absolute, z-index, селекторы по иерархии, классы и идентификаторы, внешние таблицы стилей.
- 12: Таблицы — Структура таблицы, объединение ячеек, оформление классами, карты ссылок, устаревшая табличная вёрстка.
- 13: Медиазапросы — Синтаксис медиазапросов, логические операторы, viewport, стратегии адаптивности, ориентиры по размерам экрана.
- 14: Псевдоклассы и анимации CSS — Псевдоклассы текста, ссылок, кнопок, оформление списков, библиотека Animate.css, практика блоков.
- 15: Итоги базовой вёрстки — Распределение наполнения и оформления, инициатива доступности Web, размещение страниц в интернете.
- 16: Адаптивность и кроссбраузерность — Резиновый сайт, media-запросы, Flexbox, сетки, особенности браузеров, инструменты проверки.
- 17: Flexbox — Гибкий контейнер, оси, порядок элементов, многострочность, коэффициенты роста/сжатия, выравнивание.
- 18: Advanced CSS — Сложные селекторы, !important, псевдо-элементы, трансформации, БЭМ, Bootstrap, SASS/LESS.
- 19: Основы JavaScript — Подключение JS, jQuery, обработка событий, показ/скрытие элементов, работа с сетью, JS-фреймворки.
- 20: Оформление веб-проекта — Фон, градиенты, тени, типографика, спецсимволы, форматы изображений, Favicon, SVG и Canvas.
- 21: Знакомство с Figma — Фреймы, компоненты, Auto Layout, стили — современный инструмент UI-дизайнера и верстальщика.
- 22: UI-кит и прототип в Figma — Design System, цветовые токены, варианты компонентов, интерактивный прототип для клиента.
- 23: UX Research и проектирование — User Persona, Customer Journey Map, wireframes, usability testing — думаем как пользователь.
- 24: Анимация CSS и JavaScript — Keyframes, transitions, GSAP, Lottie — живые эффекты на сайте без Flash и дополнительных плагинов.
- 25: Adobe Photoshop для Web — Нарезка макета, оптимизация изображений для загрузки, мокапы, ретушь для сайта.
- 26: Motion Design: анимация интерфейсов — Smart Animate в Figma, микроанимации, After Effects для лого — как сделать дизайн живым.
- 27: Ведение собственных проектов и фриланс — Upwork, Behance, GitHub Pages — портфолио, ставки, NDA, первый контракт на веб-дизайн.
- 🚀: Инструменты верстальщика. Дипломная работа — Домен и хостинг, Git, таск-трекеры, сборщики, минификаторы. Публикация собственного сайта.
