Курс разработан для тех, кто хочет сменить профессию и стать высокооплачиваемым профессионалом. Он подойдёт для работающих людей, у которых мало времени.
Во время курса вы будете работать как настоящие верстальщики: создадите выразительную и доступную разметку, поработаете с графическим макетом, построите сетки страниц, оформите декоративные элементы и текстовое содержание, оптимизируете код и подготовите завершённый проект к публикации. На каждом этапе вашу работу будет проверять
Программа курса
Как проходит курс. Организационные вопросы.
Что на самом деле происходит, когда вы вводите в браузере адрес сайта и нажимаете Enter?
- Обзор личных проектов.
- Как работать с наставником.
- Критерии качества вёрстки.
- Защита личного проекта и получение сертификата.
Инструменты веб-разработчика и рабочий процесс на интенсиве.
- IP-адрес, сервер и веб-сервер, «виртуальные хосты».
- Доменные имена, URL-адреса и система DNS.
- Загрузка и «сборка» веб-страницы.
- Особенности HTTP и HTTPS. Протоколы HTTP/1.1 и HTTP/2.
- Приёмы оптимизации веб-страниц.
- Системы контроля версий.
- Инструменты вёрстки: редакторы кода, инспекторы, полезные веб-сервисы.
- Немного о браузерах, браузерных движках и различиях между ними.
Введение в HTML.
Качественная разметка и стили кодирования.
- Синтаксис HTML, типы HTML-тегов.
- Структура простейшего HTML-документа.
- Как работать со спецификацией HTML.
- Обзор HTML-тегов из личных проектов.
Создаём разметку главной страницы учебного проекта.
- Простая, понятная, читабельная и логичная разметка: примеры и антипримеры.
- Типовые ошибки разметки: «ссылка или кнопка», «картинка или фон» и другие.
- Модульность разметки или использование «пространств имён».
- Когда использовать <article>, <section> и <div>?
- Кодгайды для разметки.
- Алгоритмы создания разметки: «страница как документ», «страница как приложение», «дивянка».
Обзор основных графических редакторов и инструментов для работы с макетами: Adobe Photoshop, Sketch, Zeplin, Avocode.
Типовые задачи верстальщика в графических редакторах.
Обзор форматов графики в вебе.
- Настройка интерфейса.
- Работа со слоями, типы слоёв.
- Получение параметров текста.
- Измерение размеров блоков, отступов, получение информации о цвете.
- Получение параметров сложных декоративных эффектов: тени, градиенты и прочее.
- Экспорт графики, работа с повторяющимися паттернами.
Разбор графических макетов проектов.
- Растровая графика — PNG, JPEG, GIF.
- Векторная графика — SVG.
- Как выбрать подходящий формат?
- Оптимизация графики.
Интерфейсы — не картинки.
Понятие доступности.
- Какие есть слои интерфейса, кроме графики.
- Зачем нужные интерактивные элементы.
- Неочевидное использование интерфейсов.
Взаимодействие с клавиатуры.
- Что мешает пользоваться интерфейсами.
- Ежедневные ситуации недоступности.
- Физиологические и ментальные особенности.
Значимые элементы.
- Интерфейсы без указателя.
- Зачем нужен фокус на элементах.
- Как сделать элементы интерактивными.
Лейблы элементов.
- Зачем семантика и как не подхватить диватоз.
- Почему не нужно переделывать элементы.
- Кнопки и ссылки, в чём разница?
- Кому нужны описания элементов.
- Разбор ошибок в реальных интерфейсах.
- Инспекторы доступности и скринридеры.
Введение в CSS.
Практика стилизации.
- Синтаксис CSS.
- CSS-селекторы, псевдоклассы и псевдоэлементы.
- Наследование, каскадность и приоритеты в CSS.
- Единицы измерения в CSS: абсолютные, относительные, для управления цветом.
- CSS-функции и директивы.
Начинаем стилизацию главной страницы учебного проекта.
- Зачем нужна нормализация.
- Пространства имён и независимые компоненты.
- Стили кодирования для CSS.
- Работа с нестандартными шрифтами.
- Стилизация состояний интерактивных элементов.
Задаём глобальные стили документа, описываем текстовые параметры элементов и состояния интерактивных элементов.Поток документа и блочная модель документа.
Создание сеток на флексбоксах.
- Понятие сетки и потока документа.
- Блочные и строчные боксы и их особенности.
- Свойства блочной модели: размеры, рамки и отступы.
- Тонкости блочной модели: «схлопывание» и «выпадание» внешних отступов, width: 100% и width: auto, свойство box-sizing и другие.
- Свойство display. Управление типом боксов.
Создаём сетку главной страницы учебного проекта.
- Введение во флексбокс.
- Флекс-контейнер, флекс-элементы, флекс-оси.
- Алгоритм расчёта размеров флекс-элементов.
- Выравнивание и распределение флекс-элементов вдоль осей.
- Однострочный и многострочный флекс-контейнер, управление флекс-рядами.
- Особенности флексбоксов при создании сеток.
Позиционирование.
Приёмы создания элементов интерфейса.
- Относительное позиционирование.
- Абсолютное позиционирование: координаты, изменение точки начала координат, относительные координаты и размеры, координаты по умолчанию.
- Фиксированное позиционирование.
- Управление порядком слоёв.
Завершаем вёрстку главной страницы учебного проекта.
- Блочно-строчные боксы и их особенности.
- Борьба с пробелами между блочно-строчными боксами.
- Особенности флексбоксов при создании элементов интерфейсов.
- Типовой приём «псевдоэлемент с абсолютным позиционированием».
- Использование CSS-графики для создания декоративных элементов.
Практикуемся в вёрстке элементов содержимого.
Разбираем типовые случаи переполнения и способы борьбы с ними.
- Сверстаем текстовую страницу учебного проекта. Подготовим универсальные стили содержания, которые будут хорошо работать при наполнении страницы из CMS.
- Сверстаем всплывающие окна с формой входа и интерактивной картой. Разберём приёмы стилизации нестандартных элементов форм.
- Подготовим свёрстанный учебный макет к публикации или передаче заказчику.
Готовим проект к предзащите и защите. Разбор критериев защиты выпускных проектов.Язык программирования JavaScript.
Типовые случаи использования JavaScript.
- Роль программирования в жизни верстальщика.
- Что такое DOM и зачем нам объект document.
- Зачем нужен объект window.
Оживляем всплывающее окно и вставляем интерактивную карту на главной странице учебного проекта.
- Как найти любой элемент на странице.
- Как реагировать на события, происходящие на странице.
- Как менять CSS-стили у элементов.
- Как использовать анимацию на странице.
Совместимая вёрстка.
Реальное тестирование.
- Прогрессивное улучшение.
- Постепенная деградация.
- Цена совместимости.
- Независимые слои улучшения.
Корневые технологии.
- Многообразие браузеров и устройств.
- Инспекторы, эмуляторы, виртуальные машины.
- Слабые устройства и медленные сети.
- Минификация, сжатие, оптимизация.
- Эмпатия, приоритеты, сначала контент.
Развитие в профессии.
- Веб-стандарты и фантазийные велосипеды.
- Ваниль против библиотек и фреймворков.
- Мода, хайп, вечное и светлое.
- Как не потерять актуальность знаний.
- Обмен знаниями, события, выступления.
- Пограничные дисциплины.
Во время курса вы будете работать над специально разработанными проектами , и , а на комфортном тарифе к ним добавятся более сложные проекты и . Посмотрите короткие видеоразборы каждого макета и выберите тот, который вам больше нравится.
Информация об изменении в потоке:
Страница курса:
![[IMG]](/upload/parser/2020/11/19651.1.jpeg)
![[IMG]](/upload/parser/2020/11/19651.2.jpeg)
![[IMG]](/upload/parser/2020/11/19651.3.jpeg)
![[IMG]](/upload/parser/2020/11/19651.4.jpeg)
![[IMG]](/upload/parser/2020/11/19651.5.jpeg)
Последнее редактирование модератором:
- Статус
- В этой теме нельзя размещать новые ответы.