Скачать курс: [loftschool] Основы вёрстки сайтов. 2019

[admin]

За 5 недель качественно освойте верстку на HTML и CSS, и получите первый проект в портфолио. Программа обучения 1 неделя Открытие курса. Устройство интернета Введение в профессию. Платформа обучения. Устройство курса. Редакторы кода: Sublime Text 3, VS Code, Atom. Устройство интернета Видеокурс Основы HTTP. Модель “клиент/сервер”. Хостинг, хостер. Регистратор, домен. IP, DNS. Работа с хостингом Видеокурс Использование панели хостинга Выгрузка сайта в сеть Интернет Работа с файлами по FTP Необходимое ПО для работы с хостингом HTML. Теги и работа с разметкой Видеокурс Структура HTML-документа Emmet — инструмент, ускоряющий работу с HTML Необходимые в работе теги и их атрибуты Форматирование кода, комментирование Ссылки — предназначение и применение Теги форм и таблиц Продолжение описания Разметка элементов страницы Практический вебинар Анализ макета для последующей разметки. Логические составляющие элементов страницы. Разметка элементов. Семантика верстки. Бэм-Нейминг. Ответы на вопросы. 2 неделя CSS Видеокурс Добавление стилей к HTML-страниц. hex, text, rgb, rgba, hsla. Создаём начальную структуру проекта. Разбираемся с CSS-селекторами и их синтаксисом. Отношение блоков между собой. Работа со шрифтами. Абсолютные и относительные пути. Работа с PSD-макетом Видеокурс Работа с дизайн-макетом Разбор PSD-макета на необходимые верстальщику изображения JPEG, PNG, SVG, GIF — различие в форматах хранения изображений Работа со слоями — необходимые команды и инструменты Настройка рабочего пространства Photoshop Горячие клавиши и приемы, ускоряющие работу Альтернативные инструменты для работы с макетом (adobe.Assets, Avocode, zeplin.io) Основы вёрстки Видеокурс Основы “блочной” вёрстки Поведение элементов: блочное и строчное Блочная модель элементов. Свойства и настройка поведения блоков Расположение блоков на странице. Вёрстка Свойства позиционирования элементов и приоритет наложения блоков Точные и относительные единицы измерения Стилизация элементов страницы Практический вебинар Часто используемые свойства CSS Оформление элементов страницы Переиспользование элементов. Модификаторы Префиксы Модификация готовых элементов Perfect Pixel 3 неделя Flexbox Видеокурс Разбираем новый модуль CSS — Flexbox Основные понятия в Flexbox Поведение Flexbox-layout Преимущества перед блочной версткой Управление пропорциями и порядками блоков Использование Flexbox в мобильной вёрстке Применение знаний на практике: верстаем макет на Flexbox Построение лейаута и БЭМ-нейминг Видеокурс Подготовка структуры документа для «боевого» шаблона Настройка стилей для рабочего шаблона. Normalize.css Теория логических блоков — смотрим на макет «издалека» Модульность. Правила и способы верстать независимыми блоками Методологии именований блоков и создания структуры БЭМ-нейминг: продвинутые техники использования Вёрстка страниц Практический вебинар Применение знаний на практике Вёрстка «боевых» страниц Применение знаний на практике Старт проекта «с нуля» Построение шаблона для работы 4 неделя Частые приемы вёрстки Видеокурс Частые приемы в вёрстке типовых элементов Приведение страниц в соответствие с дизайн-макетом Подготовка вёрстки для динамических элементов Вёрстка анимированных элементов CSS3-свойства Префиксы «новых» CSS-свойств. Кроссбраузерная работа со стилями Анимации CSS Видеокурс Плавное изменение состояний элементов CSS3-анимации. Рассмотрение свойств и принципов работы Keyframes: пишем покадровую анимацию Трансформация элементов Бесконечная анимация Применение анимаций на практике Практический вебинар Реализуем заданные анимации. Полезные навыки при работе с анимациями. Управление свойствами. Покадровые анимации. 5 неделя Подводим итоги курса Выпускной вебинар Выпускной Строим планы на будущее Подводим итоги Выпускной проект В течение курса, шаг за шагом мы вместе с вами выполним боевой проект — настоящий корпоративный сайт для одной из трёх выдуманных компаний. Начало обучения 1.10.2019 года.