P.S. Курс доступен в [/size]«Удалено по просьбе правообладателя» HTML Academy — стандарт в обучении фронтендеров. Наша задача — сделать из любого новичка полноценного и востребованного специалиста, готового работать в веб-индустрии. Интенсив «Базовый HTML и CSS» это профессиональный курс, построенный на базе платформы HTML Academy. Вести его будут практикующие преподаватели с десятилетним опытом веб-разработки. Курс подойдёт для тех, кто делает свои первые шаги и тех, кто считает себя начинающим верстальщиком. Также, если ваши знания не систематизированы, он подойдёт и вам. HTML Academy — стандарт в обучении фронтендеров. Наша задача — сделать из любого новичка полноценного и востребованного специалиста, готового работать в веб-индустрии. Интенсив «Базовый HTML и CSS» это профессиональный курс, построенный на базе платформы HTML Academy. Вести его будут практикующие преподаватели с десятилетним опытом веб-разработки. Курс подойдёт для тех, кто делает свои первые шаги и тех, кто считает себя начинающим верстальщиком. Также, если ваши знания не систематизированы, он подойдёт и вам. Спойлер: Программа курса 1. Вводная Спойлер: Программа курса 11. Финал 10. Доступность интерфейсов 3. Немного о минификации стилей и скриптов. 2. Вносим изменения в вёрстку учебного проекта с учётом прогрессивного улучшения. —Прогрессивное улучшение и прокси-браузеры — друзья навсегда. —Как добавлять улучшения независимыми и цельными слоями. —Влияет ли прогрессивное улучшение на скорость и эффективность разработки? —Этапы прогрессивного улучшения. —«Житейские» примеры двух подходов. 1. Знакомство с прогрессивным улучшением и постепенной деградацией. Узнаем, как использовать новые возможности HTML и CSS, не ломая работоспособность вёрстки. 9. Прогрессивное улучшение 3. Оживляем всплывающее окно и вставляем интерактивную карту на главной странице учебного проекта. —Как использовать анимацию на странице. —Как менять CSS-стили у элементов. —Как реагировать на события, происходящие на странице. —Как найти любой элемент на странице. 2. Типовые случаи использования JavaScript. —Зачем нужен объект window. —Что такое DOM и зачем нам объект document. —Роль программирования в жизни верстальщика. 1. Язык программирования JavaScript. Познакомимся с JavaScript, узнаем что такое Vanilla JS и оживим некоторые блоки вёрстки. 8. Введение в JavaScript 3. Готовим проект к защите. Подробный разбор критериев защиты выпускных проектов. 2. Разбираем типовые случаи переполнения и способы борьбы с ними. —Подготовим свёрстанный учебный макет к публикации или передаче заказчику. —Сверстаем всплывающие окна с формой входа и интерактивной картой. Разберём приёмы стилизации нестандартных элементов форм. —Сверстаем текстовую страницу учебного проекта. Подготовим универсальные стили содержания, которые будут хорошо работать и при наполнении страницы из CMS. 1. Практикуемся в вёрстке элементов содержимого. Завершим вёрстку внутренних страниц и подготовим проекты к публикации. Начнём готовиться к защите личного проекта. 7. Оформление контента 3. Завершаем вёрстку главной страницы учебного проекта. —Подключение нестандартных шрифтов. —normalize.css. —Спрайты. —Псевдоэлементы. 2. Другие важные приёмы. —Управление порядком слоёв. —Фиксированное позиционирование. —Абсолютное позиционирование: координаты, изменение точки начала координат, относительные координаты и размеры, координаты по умолчанию. —Относительное позиционирование. 1. Позиционирование. Познакомимся с приёмами создания декоративных элементов. Завершим вёрстку главных страниц учебного и личного проектов. 6. Декоративные элементы Практика: сетка Барбершопа на флексбоксах. Теория: введение во флексбоксы. 5. Знакомство с флексбоксами 3. Создаём сетку главной страницы учебного проекта, экспериментируем с «карточными» элементами интерфейса на блочно-строчных элементах. —Построение сеток на блочно-строчных элементах. —Блочно-строчные элементы и их особенности, борьба с пробелами между блочно-строчными элементами. —Построение сеток на «плавающих» элементах. —Свойство float и его особенности. —Свойство display. Управление типом элементов. 2. Как управлять потоком и строить сетки? —Тонкости блочной модели: «схлопывание» и «выпадание» внешних отступов, width: 100% и width: auto, свойство box-sizing и другие. —Свойства блочной модели: размеры, рамки и отступы. —Блочные и строчные элементы и их особенности. —Понятие сетки и потока документа. 1. Поток документа и блочная модель документа. Разберёмся с блочной моделью документа. Создадим сетки страниц учебного и личного проектов. 4. Сетки 3. Разбор графических макетов проектов. —Как выбрать подходящий формат? —PNG, JPEG, SVG, GIF. 2. Обзор форматов графики в вебе. —Экспорт графики, работа с повторяющимися паттернами. —Получение параметров сложных декоративных эффектов: тени и прочее. —Измерение размеров блоков, отступов, получение информации о цвете. —Получение параметров текста. —Работа со слоями, типы слоёв. —Настройка интерфейса фотошопа. 1. Типовые задачи верстальщика в фотошопе. Разберём всё необходимое для работы верстальщика в фотошопе. Подготовим графику для проектов. 3. Фотошоп для верстальщика 3. Создаём разметку главной страницы учебного проекта. —Зачем нужен стиль кодирования? Обзор популярных стайлгайдов. —Когда использовать , и ? —Модульность разметки или использование «пространств имён». —Типовые ошибки разметки: «ссылка или кнопка», «картинка или фон» и другие. —Простая, понятная, читабельная и логичная разметка: примеры и антипримеры. 2. Качественная разметка и стили кодирования. —Наследование, каскадность и приоритеты в CSS. —Синтаксис CSS. Базовые CSS-селекторы. —Структура простейшего HTML-документа. —Синтаксис HTML. 1. Введение в HTML и CSS. Создадим HTML-разметку страниц учебного и личного проектов. Попрактикуемся использовать подходящие теги, задавать имена классов, оценивать сложность разметки. 2. Разметка —Немного о браузерах, браузерных движках и различиях между ними. —Инструменты вёрстки: редакторы кода, инспекторы, полезные веб-сервисы. —Системы контроля версий. Git и GitHub. 2. Инструменты веб-разработчика и рабочий процесс на интенсиве. —Приёмы оптимизации веб-страниц. —Загрузка и «сборка» веб-страницы, TCP/IP, HTTP. —Доменные имена, URL-aдреса и система DNS. —IP-адрес, сервер и веб-сервер, «виртуалхосты». 1. Что на самом деле происходит, когда вы вводите в браузере адрес сайта и нажимаете Enter? Вводная лекция про роль и место верстальщика в мире веб-технологий. Подробнее: hidden_contenthidden_content