Լight modeDark mode
Погружение в тему создания web-продуктов. Изучение основ HTML и CSS >Работа с графикой: виды, дизайн-макеты и тп
Course content
Расширенный Web-разработчик с индивидуальным проектом
Зачем нам этот модуль Free4 m 12 s
Про закрытый чат и мобильное приложение2 m- Современная разработка сайтов, веб-приложений и других веб-продуктов. Перспективы Free4 m 40 s
- Про конструкторы, искусственный интеллект и перспективы Free5 m 13 s
- Классификация и этапы создания сайтов/веб-приложений36 m 43 s
- Как все это работает изнутри: протоколы, клиент-серверная архитектура и http Free16 m 44 s
- Как все это работает изнутри: html, css, js и тд. Free6 m 31 s
- Работа с графикой: виды, дизайн-макеты и тп Free20 m
- Сервисы для работы с графикой30 m 38 s
- (Дополнительно) Преобразование иконок в svg формат и “сетки” в макетах9 m 41 s
- Установка и настройка редактора кода18 m 30 s
- Создаем свой первый проект. Основы HTML38 m
- Основные теги HTML на практике59 m 25 s
Тест на закрепление основных тэгов0 s- Семантика и семантические теги HTML519 m 54 s
- Тест на закрепление семантических тэгов0 s
- Основы CSS на практике42 m 50 s
- Тест на закрепление знаний о CSS0 s
- Блочная модель CSS27 m 57 s
- Developer Tool. Что это и как с ним работать?18 m 57 s
- Блочная модель CSS. Часть 235 m 3 s
- ⭐️ Что такое схлопывание отступов10 m
- Тест на закрепление знаний о блочной модели0 s
- Позиционирование элементов в CSS. Принцип карточной колоды26 m 10 s
- ⭐️ “Липкое” позиционирование7 m 12 s
- Выравнивание элементов по вертикали. История: верстка таблицами и float'ами16 m 15 s
- Единицы измерения CSS31 m 8 s
- Специфичность CSS селекторов15 m 27 s
- Промежуточный тест на закрепление знаний0 s
- Автоматическое форматирование кода10 m 14 s
- Практика часть 1. Создаем сайт на чистом HTML и CSS46 m 45 s
- Практика часть 2. Создаем сайт на чистом HTML и CSS42 m 24 s
- Технология Flexbox19 m 19 s
- Применение Flexbox в проекте17 m 16 s
- Практика. Заканчиваем сайт на чистом HTML и CSS + домашнее задание52 m 46 s
- Свойство object-fit и работа с изображениями20 m 48 s
- ⭐️ Продвинутое использование Flexbox17 m 55 s
- Нормализация стилей normalize.css и аналоги16 m 37 s
- Подключение файлов через cdn-сервера. Различия и преимущества10 m 34 s
- ⭐️ Протоколы HTTP / HTTPS, их версии и зачем это все нужно знать фронтендеру30 m 22 s
- ⭐️ Встраивание svg-изображений и base64 формат13 m 49 s
- Работа со шрифтами в web'e Free42 m 38 s
- ⭐️ Ошибки дизайнов с текстами, шрифтами и как с ними бороться8 m 6 s
- Заключительный тест модуля0 s
- Зачем нам этот модуль1 m
- Как чистый CSS постепенно догоняет инструменты2 m 39 s
- CSS Nesting18 m 57 s
- Практика. Создаем новый проект6 m 26 s
- CSS variables (custom properties)25 m 53 s
- Практика. Создаем первые две секции1 h 3 m 55 s
- CSS Grid. Начало10 m 39 s
- CSS Grid. Единица гибкости (fr) и repeat()8 m 44 s
- Что использовать: Grid или Flexbox8 m 36 s
- Практика. Создаем grid-секцию28 m 31 s
- CSS Grid. Явные и неявные гриды10 m 22 s
- CSS Grid. Функция minmax()8 m 6 s
- CSS Grid. Масштабирование треков, auto-fit и auto-fill6 m 26 s
- CSS Grid. Позиционирование треков16 m 10 s
- (Дополнительно) CSS Grid. Выравнивание треков12 m 23 s
- (Дополнительно) CSS Grid. Grid Area и подсетки12 m 33 s
- Тест на закрепление знаний0 s
- Псевдоклассы в CSS20 m 13 s
- ⭐️ Вендорные префиксы. Что это и нужно ли оно сейчас?5 m 1 s
- Применяем псевдоклассы в проекте, CSS transition11 m 4 s
- ⭐️ Псевдоклассы :not() и :has()13 m 42 s
- Псевдоэлементы в CSS12 m 44 s
- Применяем псевдоэлементы в проекте26 m 43 s
- Практика. Заканчиваем базовую верстку. Функция calc()37 m 2 s
- Про футер и переменную1 m
- Варианты работы с иконками31 m 19 s
- ⭐️ Variable fonts8 m 25 s
- ⭐️ Что такое css-фильтры. Применяем в проекте5 m
- Адаптация проектов под различные устройства28 m 5 s
- Что такое Pixel Perfect12 m 28 s
- Большая практика. Адаптация проекта. Часть №11 h 3 m 30 s
- Tip. Nesting при адаптации1 m
- ⭐️ Что такое UX. Отключение ненужных эффектов21 m 35 s
- ⭐️ Ленивая загрузка изображений7 m 41 s
- ⭐️ UX. Использование заднего фона7 m 44 s
- Адаптация проекта. Часть №211 m 31 s
- Логические свойства размеров18 m 14 s
- ⭐️ Специфичные единицы cqw, cqh и тд.26 m 53 s
- Локальные ссылки, favicon и smooth-behavior15 m 43 s
- Системы контроля версий. Git30 m 37 s
- Сервисы для хранения репозиториев. github / gitlab и другие29 m 23 s
- Публикуем сайт в интернете. Домен. Хостинг. Сброс "кеша"27 m 31 s
- Как работать с GitHub с разных компьютеров, gitignore и Git UI30 m 47 s
- Заключительный тест модуля0 s
- Зачем нам этот модуль1 m
- Препроцессоры в CSS (SASS/SCSS и другие)27 m 23 s
- Методологии названия классов (BEM, Atomic и тд) конвенция названий19 m 15 s
- ⭐️ Модульность в CSS5 m 58 s
- Что такое сборщики проектов, планировщики задач и тд.4 m 30 s
- Настраиваем Vite для нового проекта и разбор нюансов41 m 22 s
- 🤖 ИИ для конфигураций1 m
- Обсуждаем и подготавливаем новый проект3 m 40 s
- Заготовка под проект0 s
- Что такое Mobile first14 m 58 s
- Практика. Разбираемся с UI Kit / Style Kit и остальными нюансами сборки41 m 27 s
- ⭐️ Детали использования rem5 m
- Практика. Создаем первую секцию и переиспользуемые компоненты1 h 9 m 43 s
- ⭐️ Sass синтаксис из прошлого + “_”6 m 52 s
- Функция clamp для быстрой адаптации (+ min()/max())21 m 10 s
- Практика адаптации1 h 10 s
- ⭐️ Адаптивные шрифты12 m 18 s
- Готовые инструменты для ускорения работы со стилями43 m 32 s
- 🤖 ИИ для списка инструментов2 m
- ⭐️ Технологические конфликты и мнения9 m 23 s
- Практика1 h 7 m 41 s
- В дополнение к практике1 m
- ⭐️ Технология сглаживания шрифтов12 m 19 s
- Перечень веб-компонентов и их названий + дз9 m 14 s
- Формы в web-продуктах59 m 32 s
- Тест на закрепление материала0 s
- ⭐️ Базовая валидация форм20 m 6 s
- Знакомимся с языком программирования Javascript40 m 25 s
- Большая практика. Создаем и разбираем компонент-слайдер. Часть 139 m 35 s
- Большая практика. Создаем и разбираем компонент-слайдер. Часть 247 m 1 s
- Дополнительная строка настройки слайдера1 m
- ⭐️ Единицы измерения в готовых решениях2 m
- Реальные процессы в работе1 m
- Альтернативные варианты функционала8 m 36 s
- Большое домашнее задание. Создаем футер7 m 35 s
- ⭐️ Практика. Стилизация встроенных элементов. Тестирование футера28 m 25 s
- Практика. Создаем гамбургер-меню. Трансформации41 m 15 s
- ⭐️ Тестирование кроссбраузерности6 m 40 s
- Практика. Создаем табы на странице35 m 27 s
- Проверьте свою работу 🙂3 m
- Практика. Создаем записи блога и обсуждаем нюансы динамического контента58 m 17 s
- Практика. Создаем интерактивные карты. Iframe20 m 59 s
- Практика. Валидация форм37 m 58 s
- Разбираем интересные моменты д/з, :auto-fill9 m 51 s
- Практика. Отправка формы c сайта33 m 28 s
- ⭐️ Адаптивные изображения, DPR24 m 20 s
- ⭐️ Элементы picture и source, css аналоги12 m 3 s
- Анимации при помощи CSS323 m 6 s
- Библиотеки для работы с анимациями и AI-tips22 m 5 s
- Валидация, оценка и оптимизация веб-продукта. Метрики34 m 19 s
- Мета-тэги и OG tags, расширенный favicon14 m 29 s
- ⭐️ Шаблонизируем наш веб-продукт19 m 39 s
- Загружаем web-продукт на реальный хостинг. Что такое FTP32 m 36 s
- Заключительный тест курса0 s
- Заключение. ИИ для ускорения работы. Интерфейсы в разных технологиях. Проекты3 m 59 s
- Зачем этот модуль2 m
- Подготовка к созданию портфолио22 m 37 s
- Создаем первый экран, часть 157 m 37 s
- Создаем первый экран, часть 2 (анимация меню)48 m
- Используем CSS Grid для создания второго экрана41 m 50 s
- Создаем третий экран портфолио47 m 29 s
- Реализуем скрипт автоматического пересчета процентов13 m 52 s
- Создаем блок-портфолио работ25 m 21 s
- Создаем блок с контактами37 m 47 s
- Политика конфиденциальности. Что это, зачем и как использовать.15 m 15 s
- Добавляем object-fit и работаем с изображениями14 m 54 s
- Адаптация портфолио, часть 157 m 16 s
- Заканчиваем портфолио и адаптируем последние экраны24 m 18 s
- ⭐️ CSS Scroll-Driven Animations37 m 3 s
- ⭐️ CSS Layers и их использование18 m 49 s
- ⭐️ Tailwind и почему его любят и ненавидят14 m 42 s
- ⭐️ Практика Tailwind, Design-tokens и множество нюансов56 m 2 s
- ⭐️ Практика Tailwind, variants, адаптация и оставшиеся нюансы41 m 41 s
- ⭐️ Продвинутая доступность и её тестирование29 m 49 s
- ⭐️ Продвинутая доступность, практика и спецификация WAI-ARIA. Tabindex39 m 3 s
Episode Description
В этом уроке мы обсудим что такое дизайн-макет, какие виды графики бывают в нем и какие форматы использовать
Ресурсы:
