Լight modeDark mode
Погружение в тему создания web-продуктов. Изучение основ HTML и CSS >Как все это работает изнутри: html, css, js и тд.
Course content
Web-разработчик
Зачем нам этот модуль Free4 m 12 s- Современная разработка сайтов, веб-приложений и других веб-продуктов. Перспективы 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
- Тест на закрепление знаний о блочной модели0 s
- Позиционирование элементов в CSS. Принцип карточной колоды26 m 10 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
- Нормализация стилей normalize.css и аналоги16 m 37 s
- Подключение файлов через cdn-сервера. Различия и преимущества10 m 34 s
- Работа со шрифтами в web'e42 m 38 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
- Применяем псевдоклассы в проекте, CSS transition11 m 4 s
- Псевдоэлементы в CSS12 m 44 s
- Применяем псевдоэлементы в проекте26 m 43 s
- Практика. Заканчиваем базовую верстку. Функция calc()37 m 2 s
- Про футер и переменную1 m
- Варианты работы с иконками31 m 19 s
- Адаптация проектов под различные устройства28 m 5 s
- Что такое Pixel Perfect12 m 28 s
- Большая практика. Адаптация проекта. Часть №11 h 3 m 30 s
- Tip. Nesting при адаптации1 m
- Адаптация проекта. Часть №211 m 31 s
- Логические свойства размеров18 m 14 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
- Что такое сборщики проектов, планировщики задач и тд.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
- Практика. Создаем первую секцию и переиспользуемые компоненты1 h 9 m 43 s
- Функция clamp для быстрой адаптации (+ min()/max())21 m 10 s
- Практика адаптации1 h 10 s
- Готовые инструменты для ускорения работы со стилями43 m 32 s
- 🤖 ИИ для списка инструментов2 m
- Практика1 h 7 m 41 s
- В дополнение к практике1 m
- Перечень веб-компонентов и их названий + дз9 m 14 s
- Формы в web-продуктах59 m 32 s
- Тест на закрепление материала0 s
- Знакомимся с языком программирования Javascript40 m 25 s
- Большая практика. Создаем и разбираем компонент-слайдер. Часть 139 m 35 s
- Большая практика. Создаем и разбираем компонент-слайдер. Часть 247 m 1 s
- Дополнительная строка настройки слайдера1 m
- Реальные процессы в работе2 m
- Альтернативные варианты функционала8 m 36 s
- Большое домашнее задание. Создаем футер7 m 35 s
- Практика. Создаем гамбургер-меню. Трансформации41 m 15 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
- Анимации при помощи CSS323 m 6 s
- Библиотеки для работы с анимациями и AI-tips22 m 5 s
- Валидация, оценка и оптимизация веб-продукта. Метрики34 m 19 s
- Мета-тэги и OG tags, расширенный favicon14 m 29 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
Episode Description
В этом уроке мы обсудим из чего же состоит клиентская часть любого web-продукта
Ресурсы:
