https://proinfoclub.net/threads/Закрытый-чат-в-telegram-для-premium-пользователей.1934/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. Декоративные элементы
2. Практика: сетка Барбершопа на флексбоксах.
1. Теория: введение во флексбоксы.
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?
Вводная лекция про роль и место верстальщика в мире веб-технологий.
Подробнее:
[/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. Декоративные элементы
2. Практика: сетка Барбершопа на флексбоксах.
1. Теория: введение во флексбоксы.
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?
Вводная лекция про роль и место верстальщика в мире веб-технологий.
Подробнее:
Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.
Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.
