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